为什么 Safari 或 Firefox 不能处理来自 MediaElementSource 的音频数据?

IT技术 javascript html firefox safari web-audio-api
2021-03-18 11:29:43

Safari 或 Firefox 都无法处理来自MediaElementSource使用 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 进行切换,但这是否是您的 Web 音频实现的一个已知问题,是否会在下一个 Firefox 版本之前修复?

2个回答

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

如果媒体遵守同源策略Firefox确实支持,但是当尝试使用来自远程来源的媒体时,Firefox 不会产生错误。MediaElementSource

规范是不是真的特定(双关语意),但我一直在告诉我,这是一个预期的行为,这个问题实际上是与Chrome浏览器...这是眨眼实现(铬,歌剧),其需要更新要求科尔斯

MediaElementSource 节点和跨域媒体资源

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 媒体元素可以播放来自任何来源的媒体资源。当元素播放来自与页面源不同的源的媒体资源时,我们必须防止页面脚本能够读取媒体的内容(例如提取视频帧或音频样本)。特别是我们应该防止 ScriptProcessorNodes 访问媒体的音频样本。我们还应该了解以其他方式泄漏的样本(例如定时通道攻击)。目前,Web Audio 规范对此一无所知。

我认为我们应该通过防止任何非同源数据进入 Web Audio 来解决这个问题。这将最大限度地减少攻击面和对 Web 音频的影响。

我的建议是让 MediaElementAudioSourceNode 将来自异源流的数据转换为静音。

如果这个提议成为规范,开发人员几乎不可能意识到他的为什么MediaElementSource不起作用。就目前而言,调用Firefox 26 中createMediaElementSource()<audio>元素实际上完全停止<audio>控件的工作并且不会引发任何错误

您可以对来自远程来源的音频/视频数据做哪些危险的事情?总体思路是,如果不对MediaElementSource节点应用同源策略,一些恶意 javascript 可以访问只有用户应该访问的媒体(会话、vpn、本地服务器、网络驱动器)并发送其内容 - 或某些表示它——给攻击者。

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

[这是] 出于同样的原因,您不能通过以下方式跨源转储图像数据<canvas>:媒体可能包含敏感信息,因此允许流氓站点转储和重新路由内容是一个安全问题。- @nmaier

那么我们是否仍然使用 Safari 来处理音频数据?
2021-05-01 11:29:43
有一个 Firefox 错误似乎阻止了它的工作,即使它应该:https : //bugzilla.mozilla.org/show_bug.cgi?id=937718
2021-05-07 11:29:43
示例 jsfiddle ( jsfiddle.net/9eGSp/1 ) 现在似乎在 Firefox 34 中工作(播放音频)。也许这个错误得到了修复?有人知道吗?
2021-05-20 11:29:43

createMediaElementSource() 在 Safari 8.0.5(可能更早版本)中无法正常工作,但在 Webkit Nightly 中从 10600.5.17 开始修复,r183978