AnalyserNode和AudioContext.createMediaElementSource在移动设备中不起作用

问题描述 投票:2回答:1

我无法在移动设备中使用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...};

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

测试示例:http://webaudioapi.com/samples/visualizer/

android ios mobile webkit html5-audio
1个回答
2
投票

我找到了答案,很遗憾,这是一个错误。此处有更多信息:https://code.google.com/p/chromium/issues/detail?id=419446


0
投票

似乎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>
© www.soinside.com 2019 - 2024. All rights reserved.