AudioContext 直播答案

【问题标题】：AudioContext Live StreamingAudioContext 直播
【发布时间】：2019-10-29 05:46:29
【问题描述】：

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

【问题讨论】：

如果你想让人们帮助你，添加 mp3 直播的 url 会很方便，因为我认为音频元素应该能够播放（虽然不要把我钉在那个上面））。如果我们有 url，我们可以尝试一些调试。

标签： javascript web-audio-api

【解决方案1】：

试试

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

【讨论】：

流媒体是否可能不支持 MP3？我已经尝试过使用 ogg 并且它有效。使用 mp3 流它不起作用，尽管 VLC 播放它。
@JurePolutnik 你回答这个问题了吗？

【解决方案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>';

【讨论】：