Baseline Widely available
AudioContext
æ¥å£ç decodeAudioData()
æ¹æ³å¯ç¨äºå¼æ¥è§£ç é³é¢æä»¶ä¸ç ArrayBuffer
ãArrayBuffer
æ°æ®å¯ä»¥éè¿ XMLHttpRequest
å FileReader
æ¥è·åãAudioBuffer æ¯éè¿ AudioContext éæ ·çè¿è¡è§£ç çï¼ç¶åéè¿åè°è¿åç»æã
è¿æ¯ä»é³é¢è½¨éå建ç¨äº web audio API é³é¢æºçé¦éæ¹æ³ã
è¯æ³// åºäº Promise çè¯æ³è¿åä¸ä¸ª Promiseï¼
decodeAudioData(arrayBuffer)
// åè°è¯æ³æ²¡æè¿åå¼ï¼
decodeAudioData(arrayBuffer, successCallback)
decodeAudioData(arrayBuffer, successCallback, errorCallback)
举ä¾
卿¬ç« èä¸ï¼æä»¬å°é¦å å¦ä¹ åºäºåè°çç³»ç»ï¼ç¶åéç¨æ°çåºäº promise-based çè¯æ³
æ§çåè°è¯æ³å¨è¿ä¸ªäºä¾ä¸ï¼ getData()
æ¹æ³ä½¿ç¨ XHR å è½½ä¸ä¸ªé³è½¨ï¼è®¾ç½®è¯·æ±ç responsetype 为 ArrayBuffer 使å®è¿åä¸ä¸ª arraybuffer æ°æ®ï¼ç¶ååå¨å¨ audioData åéä¸ãç¶åæä»¬å°è¿ä¸ª arraybuffer æ°æ®ç½®äº decodeAudioData()
æ¹æ³ä¸ä½¿ç¨ï¼å½æåè§£ç PCM Data åéè¿åè°è¿åï¼å°è¿åçç»æéè¿AudioContext.createBufferSource()
æ¥å£è¿è¡å¤çå¹¶è·å¾ä¸ä¸ªAudioBufferSourceNode
, å°æºè¿æ¥è³AudioContext.destination
å¹¶å°å®è®¾ç½®ä¸ºå¾ªç¯çã
éè¿æé®æ¥è¿è¡ getData()
æ¥è·åé³è½¨å¹¶ææ¾å®ãå½ä½¿ç¨ stop()
æ¹æ³å source å°ä¼è¢«æ¸
é¤ã
夿³¨ï¼ You can run the example live (or view the source.)
// define variables
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source;
var pre = document.querySelector("pre");
var myScript = document.querySelector("script");
var play = document.querySelector(".play");
var stop = document.querySelector(".stop");
// use XHR to load an audio track, and
// decodeAudioData to decode it and stick it in a buffer.
// Then we put the buffer into the source
function getData() {
source = audioCtx.createBufferSource();
var request = new XMLHttpRequest();
request.open("GET", "viper.ogg", true);
request.responseType = "arraybuffer";
request.onload = function () {
var audioData = request.response;
audioCtx.decodeAudioData(
audioData,
function (buffer) {
source.buffer = buffer;
source.connect(audioCtx.destination);
source.loop = true;
},
function (e) {
"Error with decoding audio data" + e.err;
},
);
};
request.send();
}
// wire up buttons to stop and play audio
play.onclick = function () {
getData();
source.start(0);
play.setAttribute("disabled", "disabled");
};
stop.onclick = function () {
source.stop(0);
play.removeAttribute("disabled");
};
// dump script to pre element
pre.innerHTML = myScript.innerHTML;
æ°ç promise-based è¯æ³
ctx.decodeAudioData(compressedBuffer).then(function (decodedData) {
// use the decoded data here
});
åæ°
å°ä¼è¢«è§£ç çé³é¢æ°æ®ï¼å¯éè¿XMLHttpRequest
æFileReader
æ¥è·åã
彿åè§£ç åä¼è¢«è°ç¨çåè°å½æ°ã该åè°å½æ°åªæä¸ä¸ª AudioBuffer ç±»ååæ°ã
ä¸ä¸ªå¯éçé误åè°å½æ°ã
ä¸ä¸ª Promise
对象ã
RetroSearch is an open source project built by @garambo | Open a GitHub Issue
Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo
HTML:
3.2
| Encoding:
UTF-8
| Version:
0.7.4