Safari MediaSource 永远不会在后台选项卡中打开答案

【问题标题】：Safari MediaSource never opens in background tabSafari MediaSource 永远不会在后台选项卡中打开
【发布时间】：2017-04-14 01:15:47
【问题描述】：

我认为这可能与Changing <source> with HTML5 Audio works in Chrome but not Safari有关

我遇到的问题是将 MediaSource 附加到背景选项卡中的 Audio 元素不会打开 MediaSource，Audio 元素永远不会开始播放。

使用以下 jsbin 可以轻松重现： http://jsbin.com/haqexirege/edit?js,console

var mediaSource = new MediaSource();
mediaSource.addEventListener('sourceopen', function (data) {
    console.log('media source opened', data);
});
console.log('script started');

setTimeout(function () {
    console.log('timeout callback executed');
    var audioElement = new Audio();
    audioElement.src = URL.createObjectURL(mediaSource);
    console.log('audio element attached to media source');
}, 5000);

在单独的窗口中打开开发工具
在 jsbin 上点击“运行”
立即打开一个新选项卡，让 jsbin 选项卡成为背景

您会看到控制台中为代码的每一步发出的日志，但只有当您将选项卡放在前台时，您才会看到“媒体源已打开”日志行。

有人有 MediaSource 的解决方法吗？

【问题讨论】：

标签： javascript html safari

【解决方案1】：

根据苹果：

请注意，我们的工程团队已根据所提供的信息确定此问题的行为符合预期。

在后台标签中创建的媒体元素被设计阻止播放。

完全没有必要创建一个单独的元素。您可以使用具有相同元素的新 SourceBuffer，也可以将下一首歌曲附加到现有缓冲区的末尾。

[编辑] 我还发现了一些希望可以帮助其他人的更多细节。如果页面上有多个 Audio 元素，并且使用不同的 MediaSource 在它们之间进行交换，则必须在前台选项卡中初始化 Audio 元素并清空 MediaSource：

const audio1 = new Audio();
audio1.src = URL.createObjectURL(new MediaSource());
const audio2 = new Audio();
audio2.src = URL.createObjectURL(new MediaSource());

如果您不初始化，当您尝试在后台设置 audio2.src = anotherMediaSource 时， anotherMediaSource 将永远不会打开。但是，如果在前台将 Audio 元素初始化为媒体源，则可以继续在后台更改 .src。

【讨论】：