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();

Answer 1

尝试

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

Answer 2

您可能会错过audio.crossOrigin = "anonymous"启用了CORS的托管直播流。

这也是我的整个工作解决方案，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>';