HTML 自动播放在 Chrome 和 Safari 中不起作用

【问题标题】：HTML autoplay not working in Chrome and SafariHTML 自动播放在 Chrome 和 Safari 中不起作用
【发布时间】：2023-03-28 08:31:01
【问题描述】：

我的目标是在 Chrome 和 Safari 的网站上自动播放歌曲，但它不起作用。在播放audio 标签之前，我发现了一个使用iframe 和silence.mp3 的技巧，但它也不起作用。

我的代码：

<iframe src="silence.mp3" allow="autoplay" id="audio" style="display: none" type="audio/mp3"></iframe>
<div style="position: fixed; left: 0px;top: 0px;">
      <audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3">
           <source src="song.mp3">
           Your browser does not support the audio element.
      </audio>
</div>

对此我有什么办法吗？

【问题讨论】：

标签： html google-chrome safari autoplay

【解决方案1】：

你不能 - 需要用户交互才能允许播放/自动播放有声媒体。

添加muted属性

<audio id="vid" controls loop="loop" autoplay="autoplay" type="audio/mp3" muted>
...
</audio>

音频将开始播放而没有声音。然后允许用户用JS打开声音。

编辑

这似乎不再适用于音频标签

用视频测试

<video controls muted autoplay>
        <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-13.mp3"/>
</video>

【讨论】：

这是如何与 JS 一起工作的？有教程链接之类的吗？
我也尝试添加“静音”，但仍然无法自动播放
w3schools 提供了关于网络技术的优秀教程。您有自动播放属性的基本示例：w3schools.com/jsref/prop_audio_autoplay.asp