Question

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

有关

我遇到的问题是在后台标签中将MediaSource附加到音频元素并不会打开MediaSource，音频元素永远不会开始播放。

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

在单独的窗口中打开开发工具
点击＆＃34;运行＆＃34;在jsbin
立即打开一个新标签，使jsbin标签背景为

您会在代码的每个步骤中看到控制台中发出的日志，但只有当您将标签放在前台时，才能看到“媒体”源已打开＆＃39;记录线。

有没有人有MediaSource的解决方法？

Answer 1

根据Apple的说法：

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

在背景标签中创建的媒体元素无法按设计播放。

创建一个单独的元素应该是完全没必要的。您可以使用具有相同元素的新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时，另一个MediaSource将无法打开。但是，如果将Audio元素初始化为前景中的媒体源，则可以继续在后台更改.src。

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

1 个答案: