我无法在移动设备中使用AudioContext.createMediaElementSource使AnalayserNode工作。它在iOS上的Safari中不起作用,在Android上的Chrome中不起作用。当我执行analayser.getByteFrequencyData(buffer);
时,我总是得到一个带有零的数组。这是错误吗?我应该在哪里举报?任何解决方法?
下面或代码笔中的完整代码:http://codepen.io/elranu/pen/WQOerB
var initialized = false;
var audio = new Audio();
audio.src = "http://blogtalk.vo.llnwd.net/o23/show/6/884/show_6884921_2014_09_08_16_11_36.mp3";
audio.crossOrigin = "anonymous";
audio.preload = false;
function init(){
var context = new AudioContext();
var source = context.createMediaElementSource(audio);
var anal = context.createAnalyser();
anal.fftSize = 1024;
var buffer = new Uint8Array(anal.frequencyBinCount);
var lines = [];
var eq = document.getElementById('eq');
for(var index = 0; index < buffer.length; index++){
var line = document.createElement('div');
line.className = 'line';
lines.push(line);
eq.appendChild(line);
}
source.connect(anal);
anal.connect(context.destination);
setInterval(function(){
anal.getByteFrequencyData(buffer);
for(var index = 0; index < buffer.length; index++){
lines[index].style.height = buffer[index] + 'px';
}
}, 50);
}
function startAudio(){
if(!initialized){
init();
initialized = true;
}
audio.play();
}
function stopAudio(){
audio.pause();
}
.line {
width: 2px;
background-color: blue;
margin-left:3px;
display:inline-block;
}
#eq {
height: 500px;
}
<button onclick="startAudio()">Start Audio</button>
<button onclick="stopAudio()">Stop Audio</button>
<div id="eq">
</div>
更新:我已经注意到,如果AudioContext的来源是createBufferSource()
,则AnalayserNode可在移动设备上运行。但这不是解决问题的可行方法。因为要创建一个缓冲区,所以我必须执行以下请求:
var request = new XMLHttpRequest();
request.open("GET", url, true);
request.responseType = "arraybuffer";
request.onload = function(){//stufff...};
如果我执行此请求,则移动设备将下载完整的音频,只需渲染音频的频率即可。对于大型音频,这在移动设备中并不是可行的解决方案,因为用户可能要等待很多时间才能开始播放。
我找到了答案,很遗憾,这是一个错误。此处有更多信息:https://code.google.com/p/chromium/issues/detail?id=419446
似乎createMediaElementSource仍然无法按预期在android上运行。
注意:如果从文件中删除createMediaElementSource,音乐将在android上播放。
HTML代码:
<html>
<head></head>
<body>
<audio src="https://webaudioapi.com/samples/visualizer/chrono.mp3" controls></audio>
<script type="application/javascript">
let audio = document.querySelector('audio');
audio.crossOrigin = 'all';
audio.load();
let ctx = new (window.AudioContext || window.webkitAudioContext);
let audioSrc = ctx.createMediaElementSource(audio);
audioSrc.connect(ctx.destination);
</script>
</body>
</html>