HTML iframe 允许自动播放音频文件不工作 safari

Question

这适用于其他浏览器，但 safari 会自动下载文件。

<iframe src="lib/audio/voice.mp3" allow="autoplay" class="audio-main" id="iframeAudio">
</iframe>   

我需要在网站中播放背景音频。 Opera 和 Chrome 都运行良好不幸的是 Safari 浏览器打开网站自动音频下载。到底是什么问题，感谢提前

Answer 1

男人说默认没有自动播放

根据 Safari / WebKit Auto-Play policy它使用户能够以更少的注意力浏览网络，尤其是从自动播放声音的网站中解脱出来。他们指示网站假设任何视频或音频的使用都需要用户手势或点击播放。

策略配置

用户可以在每个网站的基础上启用自动播放功能。

Safari >> Preferences >> Websites >> Auto-Play

选项是:

• 允许所有自动播放
• 停止有声媒体(默认)
• 从不自动播放

功能 iframe 允许在 Safari 中自动播放

当用户允许从特定网站自动播放时 iframe标签按预期工作。

<iframe allow="autoplay" src="happy.mp3"></iframe>

虽然 <audio> 也是如此，但这并不奇怪元素自行加载和播放。

<audio autoplay loop src="happy.mp3"></audio>

检测自动播放被禁用并显示播放器

但是，预计不会启用此功能，因为用户可以禁用它，因此检测自动播放是否被拒绝并主动做出相应 react 非常重要。

var promise = $('video')[0].play();

if (promise) promise.catch(error => {
    // Auto-play disabled show controls 
    $('audio').attr('controls', '');
});

对于此选项，我们根本不需要自动播放，因为我们是手动调用播放。如果需要用户操作，这当然不会起作用，所以我们剩下要做的就是添加控件并显示播放器。

带控件的音频

为了完成，总有其他选择；一起避免自动播放...但这有什么乐趣。

<audio controls src="happy.mp3"></audio>

nJoy!