javascript - 由于 CORS 访问限制，无法使用 MediaElementAudioSource

Question

我正在尝试使用音频 API，但无法播放音频。

Here是问题的重现。如果您打开 js 控制台，在触发视频播放/暂停后，您会看到一条消息说 VM374:1MediaElementAudioSource outputs zeroes due to CORS access restrictions for https://s3.amazonaws.com/mettavr/dev/VfE_html5.mp4 并且没有播放音频。 (这不是错误，只是一个信息日志)

我发现了一些 SO 问题，例如 this一个或this一。听起来标志 crossorigin 应该设置为 anonymous 并且服务器权限应该允许跨源。

我正在从似乎已打开足够权限的 S3 存储桶中提供文件:

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://*</AllowedOrigin>
        <AllowedOrigin>https://*</AllowedOrigin>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>HEAD</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <ExposeHeader>Content-Range</ExposeHeader>
        <ExposeHeader>Content-Length</ExposeHeader>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

仍然，我无法播放我的音频

======

编辑 1:说明信息消息出现的时间

Answer 1

如果您不想使用 WebRTC 将您的音频流式传输给对等方例如，您不需要使用 AudioContext.createMediaStreamDestination()。

此函数将创建一个 MediaStreamAudioDestinationNode 与 WebRTC MediaStream 相关联，表示可以存储在文件中或发送到另一台计算机/浏览器的音频流。一种常见的用法是使用 RTCPeerConnection addStream() 方法将其发送到远程对等点。

在您的情况下，如果您只想输出声音以便播放您的音频，您可以使用 AudioContext 的 destination 属性。它通常表示实际的音频呈现设备，例如您设备的扬声器。

var audioCtx = new AudioContext();
var source = audioCtx.createMediaElementSource(document.getElementById('video'));

var gainNode = audioCtx.createGain();
gainNode.gain.value = 0.5;
source.connect(gainNode);
gainNode.connect(audioCtx.destination);

您可以在this fiddle上查看结果.