android - AnalyserNode 和 AudioContext.createMediaElementSource 在移动设备上不起作用

Question

我无法在移动设备中使用 AudioContext.createMediaElementSource 使 AnalayserNode 工作。它不适用于 iOS 上的 Safari，也不适用于 Android 上的 Chrome。当我执行analayser.getByteFrequencyData(buffer);时，我总是得到一个带有零的数组。这是一个错误吗？我应该去哪里举报？有什么解决办法吗？

完整代码如下或在 Codepen 中: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...};

如果我执行此请求，移动设备将下载完整的音频，仅渲染音频的频率。对于大音频，这在移动设备中不是可行的解决方案，因为用户可能需要等待很长时间才能开始播放。

测试此功能的示例:http://webaudioapi.com/samples/visualizer/

Answer 1

我找到了答案，不幸的是这是一个错误。更多信息请点击这里: https://code.google.com/p/chromium/issues/detail?id=419446