为什么Safari或Firefox无法处理MediaElementSource的音频数据？

Question

Neither Safari or Firefox are able to process audio data from a MediaElementSource using the Web Audio API.

var audioContext, audioProcess, audioSource,
    result = document.createElement('h3'),
    output = document.createElement('span'),
    mp3 = '//www.jonathancoulton.com/wp-content/uploads/encodes/Smoking_Monkey/mp3/09_First_of_May_mp3_3a69021.mp3',
    ogg = '//upload.wikimedia.org/wikipedia/en/4/45/ACDC_-_Back_In_Black-sample.ogg',
    gotData = false, data, audio = new Audio();
 
function connect() {
  audioContext = window.AudioContext ? new AudioContext() : new webkitAudioContext(),
  audioSource  = audioContext.createMediaElementSource( audio ),
  audioScript  = audioContext.createScriptProcessor( 2048 );
 
  audioSource.connect( audioScript );
  audioSource.connect( audioContext.destination );
  audioScript.connect( audioContext.destination );
  audioScript.addEventListener('audioprocess', function(e){
    if ((data = e.inputBuffer.getChannelData(0)[0]*3)) {
      output.innerHTML = Math.abs(data).toFixed(3);
      if (!gotData) gotData = true;
    }
  }, false);
}
 
(function setup(){
  audio.volume = 1/3;
  audio.controls = true;
  audio.autoplay = true;
  audio.src = audio.canPlayType('audio/mpeg') ? mp3 : ogg;
  audio.addEventListener('canplay', connect);
  result.innerHTML = 'Channel Data: ';
  output.innerHTML = '0.000';
  document.body.appendChild(result).appendChild(output);
  document.body.appendChild(audio);
})();

有没有计划在不久的将来修补此问题？或者是否有一些可以为用户提供音频控制的解决方法？

对于Apple，这个可以在WebKit Nightlies中修复的东西，还是我们必须等到Safari 8.0 发布才能让HTML5 <audio>与Web Audio API很好地配合？至少在6.0版本中，Web Audio API已存在于Safari中，我最初在Safari 7.0发布之前就发布了这个问题。有没有原因这个问题已经解决了？它会被修复吗？

对于Mozilla，我知道您仍然在从旧的音频数据API切换过程中，但这是Web音频实现的一个已知问题，是否会在下一个版本的Firefox之前修复？

Answer 1

这个答案几乎完全取决于我对相关问题的回答：Firefox 25 and AudioContext createJavaScriptNote not a function

如果媒体遵守Same-Origin Policy，则Firefox 支持MediaElementSource，但在尝试使用来自远程来源的媒体时，Firefox不会产生错误。

规范并非特定关于它^{（双关语）}，但我被告知这是一个预期的行为，问题实际上是Chrome ...这是Blink实现（Chrome，Opera）need to be updated to require CORS。

MediaElementSource Node and Cross-Origin Media Resources

  

From: Robert O'Callahan <robert@ocallahan.org>
  Date: Tue, 23 Jul 2013 16:30:00 +1200
  To: "public-audio@w3.org" <public-audio@w3.org>

     

HTML媒体元素可以播放来自任何来源的媒体资源。当一个   element从不同于页面的原点播放媒体资源   原点，我们必须防止页面脚本能够读取内容   媒体（例如，提取视频帧或音频样本）。特别是我们   应该阻止ScriptProcessorNodes访问媒体   音频样本。我们还应该提供有关其他样品泄漏的信息   方式（例如定时信道攻击）。目前Web Audio规范说   什么都没有。

     

我认为我们应该通过防止任何非同源数据来解决这个问题   进入网络音频。这将最小化攻击面和对其的影响   网络音频。

     

我的建议是让MediaElementAudioSourceNode转换来自的数据   一个不同的原始流来沉默。

如果此提案符合规范，开发人员几乎不可能意识到他的MediaElementSource无效的原因。就目前而言，在Firefox 26 actually stops the <audio> controls from working at all中的createMediaElementSource()元素上调用<audio>并且会抛出无错误。

您可以对来自远程来源的音频/视频数据做些什么危险的事情？一般的想法是，如果不将同源策略应用于MediaElementSource节点，一些恶意javascript可以访问只有用户应该访问的媒体（会话，VPN，本地服务器，网络驱动器）并发送其内容 - 或者它的一些表示 - 给攻击者。

默认情况下，HTML5媒体元素没有这些限制。您可以使用<audio>，<img>或<video>元素在所有浏览器中添加远程媒体。只有当您想要从这些远程资源中操作或提取数据时，才会发起同源策略。

  

[这是]出于同样的原因，您无法通过<canvas>转储图像数据跨域：媒体可能包含敏感信息，因此允许恶意网站转储和重新路由内容是一个安全问题。 - @nmaier

Answer 2

createMediaElementSource（）在Safari 8.0.5中（以及可能更早）无法正常工作，但在Webkit Nightly中自10600.5.17，r183978

起修复