javascript - 为什么 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 配合得很好？ Web Audio API 至少从 6.0 版开始就存在于 Safari 中，我最初在 Safari 7.0 发布之前很久就发布了这个问题。是否有原因尚未修复？它会被修复吗？

对于 Mozilla，我知道您仍在从旧的音频数据 API 进行切换，但这是您的网络音频实现的一个已知问题吗？它会在下一版 Firefox 之前得到修复吗？

Answer 1

这个答案几乎完全引用 self 对相关问题的回答:Firefox 25 and AudioContext createJavaScriptNote not a function

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

规范并不是真正具体^(双关语)，但有人告诉我这是一种预期行为，问题实际上出在 Chrome 上……need to be updated to require CORS 是 Blink 实现(Chrome、Opera) .

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 media elements can play media resources from any origin. When an element plays a media resource from an origin different from the page's origin, we must prevent page script from being able to read the contents of the media (e.g. extract video frames or audio samples). In particular we should prevent ScriptProcessorNodes from getting access to the media's audio samples. We should also information about samples leaking in other ways (e.g. timing channel attacks). Currently the Web Audio spec says nothing about this.

I think we should solve this by preventing any non-same-origin data from entering Web Audio. That will minimize the attack surface and the impact on Web Audio.

My proposal is to make MediaElementAudioSourceNode convert data coming from a non-same origin stream to silence.

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

您可以对来自远程来源的音频/视频数据做哪些危险的事情？一般的想法是不对 MediaElementSource 应用同源策略。节点，一些恶意 javascript 可以访问只有用户有权访问的媒体( session 、vpn、本地服务器、网络驱动器)并将其内容(或它的某种表示)发送给攻击者。

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

[It's] for the same reason that you cannot dump image data cross-origin via <canvas>: media may contain sensitive information and therefore allowing rogue sites to dump and re-route content is a security issue. - @nmaier