简单播放实例1:
var url='../content/audio/海阔天空.mp3';
if (!window.AudioContext) {
alert('您的浏览器不支持AudioContext');
} else {
//创建上下文
var ctx = new AudioContext();
//使用Ajax获取音频文件
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';//配置数据的返回类型
//加载完成
request.onload = function () {
var arraybuffer = request.response;
ctx.decodeAudioData(arraybuffer, function (buffer) {
//处理成功返回的数据类型为AudioBuffer
console.info(buffer);
//创建AudioBufferSourceNode对象
var source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(ctx.destination);
//指定位置开始播放
source.start(0);
}, function (e) {
console.info('处理出错');
});
}
request.send();
}
实例2,带暂停:
<div class="container">
<button class="btn btn-primary" id="playBtn">
<i class="glyphicon glyphicon-pause"></i>
</button>
</div>
<script>
var url='../content/audio/海阔天空.mp3';
if (!window.AudioContext) {
alert('您的浏览器不支持AudioContext');
} else {
//创建上下文
var ctx = new AudioContext();
var source = null;
//使用Ajax获取音频文件
var request = new XMLHttpRequest();
request.open('GET', url, true);
request.responseType = 'arraybuffer';//配置数据的返回类型
//加载完成
request.onload = function () {
var arraybuffer = request.response;
ctx.decodeAudioData(arraybuffer, function (buffer) {
//处理成功返回的数据类型为AudioBuffer
//console.info(buffer);
//创建AudioBufferSourceNode对象
source = ctx.createBufferSource();
source.buffer = buffer;
source.connect(ctx.destination);
//指定位置开始播放
source.start(0);
console.info(source);
}, function (e) {
console.info('处理出错');
});
}
request.send();
//绑定播放按钮
$('#playBtn').click(function () {
var icon = $(this).find('i');;
icon.toggleClass('glyphicon-play').toggleClass('glyphicon-pause');
//停止播放
source.stop();
});
}
</script>
说明:
WebAudio API主要是为音频文件添加音效而设计的,但是它也可以用来播放音频文件,这类似于HTML5 audio元素的功能,只是audio元素可以有控制界面,用户可以点击界面上的播放/停止按钮来控制文件的播放,也可以拖动界面上的进度条来控制播放进度。而采用WebAudio API实现的音频播放则没有控制界面,但对于移动平台Android,IOS确实非常有用的,例如在Android平台上Chrome浏览器设置了gesture-requirement-for-media-playback属性,意思是说不能通过调用audio元素的play函数实现音频文件的播放,除了调用play函数之外,还必须要求用户在屏幕上有一个手势操作,该行为和苹果的IOS上的行为一致。
使用WebAudio播放音频文件的效率问题