是否可以使用适当的 Access-Control-Allow-Origin 标头为跨源资源启用 WebAudio 处理? [英] Is it possible to enable WebAudio processing for Cross-Origin Resources with appropriate Access-Control-Allow-Origin headers?

问题描述

我正在构建一个涉及两台服务器的音频应用程序.服务器 A 专用于音频流，而 B 服务器提供一个 HTML 页面，从 A 加载音频源.

I am building an audio application that have two servers involved. Server A is dedicated for audio streaming, while B servers a HTML page that loads audio sources from A.

音频可以播放.但是，当我尝试使用 WebAudio API 做一些魔术时，我收到消息说

The audios are OK to play. However, when I try to do some magic with WebAudio API, I got message saying

"由于 CORS 访问，MediaElementAudioSource 输出零{{URL of audio src}}"

"MediaElementAudioSource outputs zeroes due to CORS access restrictions for {{URL of audio src}}"

这是公平的，因为 WebAudio 规范 说

This is fair because WebAudio spec said

HTMLMediaElement 允许播放跨源资源.因为 Web Audio 允许检查资源的内容(例如，使用 MediaElementAudioSourceNode 和 ScriptProcessorNode读取样本)，如果脚本来自一个源检查来自另一个源的资源的内容.

HTMLMediaElement allows the playback of cross-origin resources. Because Web Audio allows inspection of the content of the resource (e.g. using a MediaElementAudioSourceNode, and a ScriptProcessorNode to read the samples), information leakage can occur if scripts from one origin inspect the content of a resource from another origin.

为了防止这种情况，MediaElementAudioSourceNode 必须输出静音而不是 HTMLMediaElement 的正常输出，如果它已经使用执行提取的 HTMLMediaElement 创建算法将资源标记为 CORS 跨域.

To prevent this, a MediaElementAudioSourceNode MUST output silence instead of the normal output of the HTMLMediaElement if it has been created using an HTMLMediaElement for which the execution of the fetch algorithm labeled the resource as CORS-cross-origin.

问题是如果我确实想要进行这种跨源"检查，该怎么办?

我可以完全控制两台服务器的输出，所以我想出了两个想法.

I have full control on the outputs of both servers, so I came up with two ideas.

1. 添加 Access-Control-Allow-Origin 标头.这是什么工作CORS XMLHttpRequest.但是，它不适用于 WebAudio API.做我需要一些其他标题吗?
2. 在域映射或标题上做一些技巧，让浏览器认为 A和 B 是(逻辑上)同一个域.到目前为止我不知道它是否实际上是可行的.

1. Add Access-Control-Allow-Origin headers. This is what worked for CORS XMLHttpRequest. However, it does not work for WebAudio API. Do I need some other headers?
2. Do some trick on domain mapping or headers, to let browser think A and B are (logically) the same domain. So far I have no idea if it is actually feasible.

我应该有更多选择吗?任何建议表示赞赏.

Should I have more options? Any suggestion is appreciated.

注意:

代理服务器 B 对我来说不是一个选择，因为 A 的目的是从 B 卸载此类工作.

Proxying with server B is not an option for me, because the purpose of A is to offload such work from B.

推荐答案

自己找到答案.

解决办法是给对应的音频元素添加crossOrigin="anonymous"属性.

The solution is to add crossOrigin="anonymous" attribute to corresponding audio element.

这篇关于是否可以使用适当的 Access-Control-Allow-Origin 标头为跨源资源启用 WebAudio 处理?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！