Javascript – 使用AudioContext播放音频
1 Javascript使用AudioContext播放音频
JS中可通过AudioContext管理和播放声音,以下代码可以创建一个AudioContext
对象
try {
var audio_context = new AudioContext();
} catch (e) {
alert ('Web Audio API is not supported in this browser');
}
在创建AudioContext
对象之后,在Web Audio API中使用AudioBuffer
保存声音文件的buffer,可以通过XMLHttpRequest
的方法获取音频文件数据,可支持WAV、MP3、AAC、OGG等音频数据格式,以下代码说明了如何使用XMLHttpRequest
加载音频数据到AudioBuffer
对象中
// 从远程url下载声音二进制数据
function loadAudioFileFromUrl(url) {
var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) { //下载完成
initSound(this.response);
};
xhr.send();
}
// 初始化声音数据
function initSound(arrayBuffer) {
audio_context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数
audio_buffer = buffer;
playSound();
}, function(e) { //解码出错时的回调函数
console.log('Error decoding file', e);
});
}
音频数据是二进制数据,而不是文本数据,所以将XMLHttpRequest
的responseType
设置为arraybuffer
。在请求完成接收到音频数据之后,使用AudioContext
的decodeAudioData
方法对音频二进制数据进行解码,此方法会获取存储在 request.response
中的音频二进制数据的 ArrayBuffer
并对其进行异步解码,不会阻塞主 JavaScript 执行线程。在解码完成之后,会触发回调函数,返回已经解码的PCM音频数据。
在解码音频数据被解码完成之后,之后就是控制音频的播放与停止播放了,以下的代码演示了如何开始播放音频和停止播放音频
// 播放声音
function playSound() {
if(audio_buffer)
{
audio_buffer_source = audio_context.createBufferSource();
audio_buffer_source.buffer = audio_buffer;
audio_buffer_source.loop = true; //循环播放
audio_buffer_source.connect(audio_context.destination);
audio_buffer_source.start(0); //立即播放,或者使用audio_buffer_source.noteOn(0);
}
}
// 立即停止播放声音
function stopSound() {
if (audio_buffer_source) {
audio_buffer_source.stop(0); //
}
}
完整的示例代码如下
try {
var audio_context = new AudioContext();
var audio_buffer_source = null;
var audio_buffer = null;
// 从远程url下载声音二进制数据
function loadAudioFileFromUrl(url) {
var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) { //下载完成
initSound(this.response);
};
xhr.send();
}
// 初始化声音数据
function initSound(arrayBuffer) {
audio_context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数
audio_buffer = buffer;
playSound();
}, function(e) { //解码出错时的回调函数
console.log('Error decoding file', e);
});
}
// 播放声音
function playSound() {
if(audio_buffer)
{
audio_buffer_source = audio_context.createBufferSource();
audio_buffer_source.buffer = audio_buffer;
audio_buffer_source.loop = true; //循环播放
audio_buffer_source.connect(audio_context.destination);
audio_buffer_source.start(0); //立即播放,或者使用audio_buffer_source.noteOn(0);
}
}
// 立即停止播放声音
function stopSound() {
if (audio_buffer_source) {
audio_buffer_source.stop(0); //
}
}
} catch (e) {
alert ('Web Audio API is not supported in this browser');
}
参考
本文作者:StubbornHuang
版权声明:本文为站长原创文章,如果转载请注明原文链接!
原文标题:Javascript – 使用AudioContext播放音频
原文链接:https://www.stubbornhuang.com/2857/
发布于:2023年10月19日 11:23:07
修改于:2023年10月19日 11:24:10
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。
评论
51