WebAudio API主要是为音频文件添加音效而设计的,但是它也可以用来播放音频文件,这类似于HTML5 audio元素的功能,只是audio元素可以有控制界面,用户可以点击界面上的播放/停止按钮来控制文件的播放,也可以拖动界面上的进度条来控制播放进度。而采用WebAudio API实现的音频播放则没有控制界面,但对于移动平台Android,IOS确实非常有用的,例如在Android平台上Chrome浏览器设置了gesture-requirement-for-media-playback属性,意思是说不能通过调用audio元素的play函数实现音频文件的播放,除了调用play函数之外,还必须要求用户在屏幕上有一个手势操作,该行为和苹果的IOS上的行为一致。现在如果采用WebAudio来播放音频文件就不会有该限制,开发者可以任意控制音频文件的播放和停止,这对移动平台的上游戏开发者而言尤为重要,目前比较流行的游戏引擎Cocos2d-html5正在使用该功能。
下面是一段实例代码:
var context = new window.webkitAudioContext();
var source = null;
var audioBuffer = null;
function stopSound() {
if (source) {
source.noteOff(0); //立即停止
}
}
function playSound() {
source = context.createBufferSource();
source.buffer = audioBuffer;
source.loop = true;
source.connect(context.destination);
source.noteOn(0); //立即播放
}
function initSound(arrayBuffer) {
context.decodeAudioData(arrayBuffer, function(buffer) { //解码成功时的回调函数
audioBuffer = buffer;
playSound();
}, function(e) { //解码出错时的回调函数
console.log('Error decoding file', e);
});
}
function loadAudioFile(url) {
var xhr = new XMLHttpRequest(); //通过XHR下载音频文件
xhr.open('GET', url, true);
xhr.responseType = 'arraybuffer';
xhr.onload = function(e) { //下载完成
initSound(this.response);
};
xhr.send();
}
loadSoundFile('demo-audio.mp3');
上面的实例中,先通过XMLHttpRequest API从服务器上下载音频文件到本地,在下载完毕后,调用iniSound函数,该函数调用WebAudio中的解码函数decodeAudioData对下载的数据(当前存储为ArrayBuffer)进行解码,如果平台不支持音频文件的解码,将调用出错回调函数,如果解码成功就会调用成功的回调函数。现在假设解码成功,在成功的解码函数中,调用playSound函数去播放解码后的音频文件。
使用WebAudio播放音频文件的效率问题
前面介绍了如何使用WebAudio来播放音频文件,但是需要注意的是不要轻易采用WebAudio的该功能,因为当音频文件较大时,可能会影响程序的执行效率。首先,如果我们在程序中采用XMLHttpRequest去下载文件时,这是一个比较耗时的操作,具体的时间取决于当前的网络环境和文件的大小,尽管程序中采用异步的下载方式,但是同样会让音频的播放延迟。其次,程序需要调用WebAudio的decodeAudioData函数去解码整个音频文件,这里需要注意的是它需要一次性解码整个文件后,才会触发成功的回调函数,程序才能开始播放音频文件,这又一次的增加了音频文件播放的延迟,另外,由于整个文件的一次性解码,整个解码前和解码后的文件都同时存放在内存中,这也引起了内存的巨大开销(相比采用audio元素播放时,因为audio元素是一边解码一边播放)。此时可能有朋友会质疑decodeAudioData API的实现有问题,其实该函数是为解码比较短小的声音文件而设计的,另外由于WebAudio对音频的延时性特别关注,所以为了较少声音的延时,在音效处理前要求把需要处理的音频文件装载进内存。
所以如果需要使用WebAudio播放文件,又比较关注效率问题时,建议把音频文件的大小缩小一些,或者分解成若干小的文件再分别加载解码播放。
分享到:
相关推荐
web audio api + audio标签 javascript 原生实现音频播放标注功能
web-audio-api, 由W3C音频小组开发的网络音频 API 网络音频API规范 这个存储库包含了最新的 W3C AudioWG音频API站点编辑器。你可以在这里预览主分支的当前版本。测试对于标准更改,需要使用相应的web-platform-tests...
这是基于FastAPI的Web API,可在使用MongoDB数据库时模拟音频文件服务器的行为。 问题陈述 Colne资料库 从github git clone ...
合并音频 上传词干并将它们组合成您和您的朋友可以收听的曲目! 使用 WebAudio API 现场混音词干。 跑步 只需使用命令 cd app/ node app.js 然后访问 localhost:5000
可在以下位置找到与Web Audio API相关的代码: : 要首先在本地运行混合器,请确保已安装Node。 将仓库和CD复制到目录运行npm i 运行npm start 造访http://localhost:3000 该项目仅在Chrome和Firefox上进行了测试。 ...
web-audio-scheduler, Web音频API的事件调度程序 web-audio-scheduler Web音频API的事件调度程序这个模块是基于本文的思想开发的。https://www.html5rocks.com/en/tutorials/audio/scheduling/
此存储库提供了低延迟的Web音频播放示例,可使用Web Audio API和新的Fetch&Streams API以编程方式对块中的音频进行解码。 传统上, 用于程序解码,但需要下载完整的文件,并且不支持基于块的解码。 这些Streams示例...
Web Audio API提供了功能强大且用途广泛的系统,用于控制Web上的音频,从而使开发人员可以选择音频源,为音频添加效果,创建音频可视化效果,应用空间效果(例如平移)等等。 用法 规划 v0。*:了解基础知识,稳定...
Web Audio API日语翻译本文档是W3C文档“ Web音频API,W3C候选建议书,2020年6月11日”的日语翻译。 Web Audio API的官方文档仅提供英文,并且日语翻译可能会因翻译而导致错误。官方文档可以在W3C网站上找到: : 。...
播放音频队列(需要Web Audio Api支持) 在所有浏览器中都可以正常工作 仅针对扬声器:在Chrome浏览器中,您应使用安全连接,因为Chrome在不安全的HTTP连接中不支持getUserMedia 凉亭 $ bower install ws-audio-api...
默认情况下, web-audio-api不播放其生成的声音。 实际上, AudioContext没有默认输出,因此您需要为其提供可写的节点流,以便可以向其写入原始PCM音频。 创建AudioContext ,按如下所示设置其输出流: audioC
webaudio-mod-player, 用于网络音频的MOD/S3M/XM 模块播放器 webaudio-mod-player 这是使用Web音频API实现的MOD/S3M/XM 模块播放器,并完全在浏览器中运行。 已经被测试并确认可以在 Chrome 14 ,Firefox 24 ,...
最新的ORELLY新书[Web.Audio.API],里面讲得真的不错
Learn how to program JavaScript while creating interactive audio applications with JavaScript for Sound Artists: Learn to Code With the Web Audio API! William Turner and Steve Leonard showcase the ...
vue视听Vue HTML5音频可视化组件概述安装和设置...它使用HTML5 Web Audio API构建,并且与所有支持HTML5音频API的浏览器兼容。 它提供了多个Vue组件,这些组件允许为“音频” HTML元素绘制光亮的外观。 有一个DEMO ava
使用Web Audio API制作的自定义合成器和效果的集合 使用此库制作的作品: “ PIECE_PAGE_TEMPLATE.zip”是一个完整HTML模板,用于在上面的链接中创建片段 由于模板中包含的许多文件都是我自己的工作流程所特有的,...
Canceller 基于 Angular.js 和 Node.js 构建,并使用 HTML5 WebAudio API 读取麦克风的输入数据并发出破坏性的降噪声波。 安装 克隆存储库。 如果您没有安装 Bower/Grunt 命令行工具,请在命令行执行: npm install...
音频-WebAPI HTML5 音频录制和文件创建
Web Audio API用于音频播放,效果和控件。 使用Browserify是为了将代码分成模块。 2申请 。 (建议使用Firefox) 2.1功能 2.1.1概述 使用DJ Wannabe步进音序器,可以使用现有的声音片段样本库来创建短音轨。 用户...