AudioContext 实时流传输

Question

使用WebAudio API播放直播流的正确方法是什么？

我尝试了以下代码，但是我看到的只有MP3正在下载，而没有播放；可能MediaElementSource期望的是文件，而不是连续的流。

window.AudioContext = window.AudioContext||window.webkitAudioContext;
context = new AudioContext();

var audio = new Audio();
var source = context.createMediaElementSource(audio);
source.connect(context.destination);
audio.src = '<live mp3 stream>';
audio.play();

- Jure Polutnik

---

如果你想得到别人的帮助，最好附上mp3直播流的URL，因为我认为音频元素应该能够播放它（但不要完全相信我）。如果我们有URL，我们可以尝试一些调试。 - MarijnS95

Answer 1

尝试。

audio.addEventListener('canplaythrough', function() {
  audio.play();
}, false);

- Kevin Ennis

---

MP3不支持流媒体吗？我已经尝试使用ogg并且可以正常工作。但是使用MP3流媒体时，它无法正常工作，尽管VLC可以播放它。 - Jure Polutnik

@JurePolutnik，你回答了这个问题吗？ - TeChn4K

Answer 2

如果您使用带有CORS的托管直播流，您可能会错过 audio.crossOrigin = "anonymous"。

这是我的整个工作解决方案，包括MP3：

window.AudioContext = window.AudioContext || window.webkitAudioContext;

const context = new AudioContext();

const audio = new Audio();
audio.crossOrigin = 'anonymous'; // Useful to play hosted live stream with CORS enabled

const sourceAudio = context.createMediaElementSource(audio);
sourceAudio.connect(context.destination);

const playHandler = () => {
  audio.play();
  audio.removeEventListener('canplaythrough', playHandler);
};
const errorHandler = e => {
  console.error('Error', e);
  audio.removeEventListener('error', errorHandler);
};

audio.addEventListener('canplaythrough', playHandler, false);
audio.addEventListener('error', errorHandler);

audio.src = '<live mp3 stream>';

- TeChn4K