Question

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

Here是该问题的复制品。如果您打开js控制台，在视频上触发播放/暂停后，您会看到一条消息“{1}}”并且没有播放音频。（这不是错误，只是信息日志）

我发现了一些问题，例如this一个或this个问题。听起来标志VM374:1MediaElementAudioSource outputs zeroes due to CORS access restrictions for https://s3.amazonaws.com/mettavr/dev/VfE_html5.mp4应该设置为crossorigin，并且服务器权限应该允许交叉来源。

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

anonymous

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

==

编辑1：澄清信息消息何时出现

Answer 1

例如，如果您不想使用WebRTC将音频流式传输给同伴，则不需要使用AudioContext.createMediaStreamDestination()。

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

在您的情况下，如果您只想输出声音以播放音频，则可以使用destination的{{1}}属性。它通常代表一种实际的音频呈现设备，例如您设备的扬声器。

AudioContext

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

Answer 2

您可以使用ArrayBuffer或Blob以fetch或XMLHttpRequest请求资源，同时设置<video>和AudioContext当时，或从AudioContext <video>加载src。

.decodeAudioData使用ArrayBuffer或URL.createObjectURL使用Blob作为参数。这是针对Why aren't Safari or Firefox able to process audio data from MediaElementSource?中描述的问题的解决方法吗？见this Answer。另请参阅Getting Started with Web Audio API。

根据以下方法，使用<video>加载AudioContext和Blob，FileReader()将Blob转换为ArrayBuffer。另请注意source.start(0)以启动音频上下文播放。

加载<input type="range">后，包含gainNode元素以调整value AudioContext。

TODO，加载视频和音频时的进度处理程序和显示。

<label>adjust audio gain<br>
<input type="range" min="0" max="5" value="2.5" step=".5" disabled /></label>
<video src="" id="video" controls="true" crossorigin="anonymous" />

var src = "https://s3.amazonaws.com/mettavr/dev/VfE_html5.mp4";
fetch(src)
.then(response => response.blob())
.then(blob => {
  video.src = URL.createObjectURL(blob);
  var audioCtx = new AudioContext();
  var reader = new FileReader();
  reader.onload = (e) => {
    audioCtx.decodeAudioData(e.target.result, (buffer) => {
      console.log(buffer); // `AudioBuffer`
        // creates a sound source
      var source = audioCtx.createBufferSource();
      source.buffer = buffer;
      gainNode = audioCtx.createGain();
      gainNode.gain.value = 2.5;
      // tell the source which sound to play
      source.connect(gainNode);
      // connect the gainNode to the context's destination
      // (the speakers)
      gainNode.connect(audioCtx.destination);
      source.start(0);
      console.log(source, audioCtx);
      range.removeAttribute("disabled")
    });
  }
  reader.readAsArrayBuffer(blob);
});

jsfiddle https://jsfiddle.net/m305au2d/2/

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

2 个答案: