【问题标题】：HTML iframe allow autoplay of audio file not working safariHTML iframe 允许自动播放音频文件不工作 safari
【发布时间】：2019-08-07 08:56:25
【问题描述】：

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

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

我需要在网站中播放背景音频。 Opera 和 Chrome 工作正常，不幸的是 Safari 浏览器打开网站自动下载音频。到底是什么问题，谢谢您的进步

【问题讨论】：

从您的问题开始一个问题总是一个好主意，然后解释您尝试解决的问题，最后以您期望找到的内容结束。尝试包含尽可能多的信息。哪些浏览器正在运行？他们对文件做了什么？是否有任何其他 JavaScript 库像播放器一样在使用？你从哪里得到这个代码？您提供的信息越多，就越容易吸引知识渊博的人回答。
我需要在网站中播放背景音频。 Opera 和 Chrome 运行良好，不幸的是 Safari 浏览器打开网站自动音频下载。
我建议根据建议编辑您的问题以改进它。用户倾向于忽略负分问题，但您的问题没有错，您只需要遵循约定即可。

标签： html browser safari

【解决方案1】：

默认情况下没有自动播放，男人说

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

策略配置

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

Safari >> 偏好 >> 网站 >> 自动播放

选项有：

允许所有自动播放
通过声音停止媒体（默认）
从不自动播放

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

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

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

<audio> 元素也会自行加载和播放，这并不奇怪。

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

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

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

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

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

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

带控件的音频

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

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

开心！

【讨论】：