最近在做HTML5 网页端和音频相关的项目,在安卓、PC(chrome)、Mac(safari)下,AudioContext均能正常工作,但偏偏在IOS底下吃了亏,咋整都无法工作。示例代码如下:
window.AudioContext = window.AudioContext || window.webkitAudioContext || false;
if (window.AudioContext) {
alert('no Web Audio API support');
return false;
}
window.auctx = new AudioContext();
console.log('采样率:'+auctx.sampleRate);
navigator.mediaDevices.getUserMedia({audio:true}).then(function(stream){
console.log('设备:'+stream.getAudioTracks()[0].label);
window.aisrc = auctx.createMediaStreamSource(stream);
window.aiprc = auctx.createScriptProcessor(2048,1,1);
window.aiprc.onaudioprocess = function (e){
var in_data = e.inputBuffer.getChannelData(0);
var out_data = e.outputBuffer.getChannelDate(0);
out_data.set(in_data); // TODO: 这里得到的是Float32Array, 是-1.0 ~ 1.0的裸数据流,可以根据自己的需要转换
}
/* 连接音频节点 */
aisrc.connect(aiprc).connect(auctx.destination);
console.log('音频初始化成功');
}.catch(function(err){
console.log('初始化失败,请授予音频权限');
}
以上代码仅作示例,,,未实际运行。测试发现IOS上始终无法进入onaudioprocess回调,原因是auctx的state处于suspend挂起状态,但笔者无论怎么调用auctx.resume()都无法使之进入running状态。。。
后来在apple的论坛上发现有人回答这个问题,是苹果的策略引起的,大意是必须通过 click、touch的事件回调,在回调函数里面创建AudioContext,并调用resume才能正常工作。。原因是防止在载入的时候就突然播放声音,防止吓到用户。。。 - -
修改代码如下,顺便注意auctx要挂在全局变量下,不然垃圾回收了会出错的。。
$('#button').on('tap', function(){
/* 把原来的代码挪到这里就好了。。。 */
auctx.resume(); // 不调用resume是不会退出suspend状态的
}