很偶然的,在一个微信公众号里面,看到了这样的一篇文章。
WEB音频API。作者分享技术的优良品质值得我们学习。
原文讲述的大致是这样的,使用JavaScript来动态的加载音频资源,这样来起到一个不错的交互效果。尤其是对于网页游戏开发而言,这一点也是很重要的。
于是,我就翻译了一下,并写了个小例子。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>WEB音频API测试</title>
<script>
function play(){
alert('即将播放音频!');
//创建音乐播放的上下文实例,适配手机和PC
var audioContext = new (window.AudioContext||window.webkitAudioContext)();
//为即将到来的音频文件创建一个缓冲区
var source = audioContext.createBufferSource();
//创建Ajax请求对象,用于向服务器请求音频资源
var request = new XMLHttpRequest();
// 使用非异步请求方式,来请求音频资源
request.open('GET','./TheMountain.mp3',true);
// 设置服务器即将返回的类型,便于浏览器解码
request.responseType = 'arraybuffer';
request.onload = function(){
//一旦请求内容完整返回就开始解码
audioContext.decodeAudioData(request.response,function(buffer){
source.buffer = buffer;
//连接音频资源,正式播放
source.connect(audioContext.destination);
//设置为循环播放模式
source.loop = true;
// 等待零秒后播放
source.start(0);
},function(e){
alert('Audio Error!',e);
})
}
// 开启ajax请求
request.send();
}
//window.onload = function(){
// play();
//}
</script>
</head>
<body>
<input id="button" type="button" name="test" onclick="play()" value="播放">
</body>
</html>
注意,音频资源存放在服务器上的位置很重要,路径可不能写错咯。然后就是注意ajax的不能跨域请求的原则即可。
希望能让更多有此需求的人看得到,造福更多的人。