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

我找到答案了，可惜是个bug。更多信息在这里： https://code.google.com/p/chromium/issues/detail?id=419446

AnalyserNode 和 AudioContext.createMediaElementSource 不适用于移动设备

AnalyserNode and AudioContext.createMediaElementSource does not work in mobile

mobile

android

webkit

ios

html5-audio