当播放器不可见时，使用HTML5嵌入标签自动播放音频

Question

我想自动播放MP3音频文件，我不希望播放器可见。

<div id="music"><embed src="Comfortably Numb.mp3" autostart=true loop=false></div>

当我使用css将display:none添加到音频标签时，它根本不播放音乐。 有人可以解释我热播放音乐而不显示播放器吗？

Answer 1

或者你可以尝试基本的东西来满足你的需求，

<audio autoplay loop>
      <source src="johann_sebastian_bach_air.mp3">
</audio>

进一步参考click here

Answer 2

如果您使用的是React，请确保将自动播放设置为，

autoPlay

React希望它成为camelcase！

Answer 3

我使用了这段代码，

 <div style="visibility:hidden">
    <audio autoplay loop>
        <source src="Aakaasam-Yemaaya Chesave.mp3">
    </audio> 
</div>

它运作良好，但我想要停止和暂停按钮。所以，如果我们不想听，我们就可以停止。

Answer 4

有时需要自动播放。有人曾经指出，着名的Les Paul Google Doodle（2011）需要自动播放，即使声音没有播放，直到你翻过吉他琴弦。如果它完成了课堂和伟大的设计，它可以是美丽的（特别是具有身临其境设计的电影网站）

Answer 5

“敏感”时代

当今的现代浏览器似乎（默认情况下）阻止了这些自动播放功能。它们在某种程度上被视为弹出窗口。很有侵略性是的，用户现在可以完全控制声音的播放时间。 ^[1,2,3]

HTML5时代

<audio controls autoplay loop hidden>
    <source src="audio.mp3" type="audio/mpeg">
</audio>

HTML的早期

<embed src="audio.mp3" style="visibility:hidden" />

参考文献

1. Jer Noble， iOS的新，WebKit，link
2. 允许或阻止Firefox中的媒体自动播放，FireFox帮助，link
3. Mounir Lamouri，统一自动播放，Chromium博客，link
4. 嵌入式内容，万维网联盟，link

Answer 6

<div id="music">
<audio autoplay>
  <source src="kooche.mp3" type="audio/mpeg">
  <p>If you can read this, your browser does not support the audio element.</p>
</audio>
</div>

和css：

#music {
  display:none;
}

如上所述，您可能应该以某种形式提供控件。也许使用一个切换链接/复选框，通过jquery滑动控件。

来源：HTML5 Audio Autoplay

Answer 7

您可以使用此代码，它与我合作

<div style="visibility:hidden">
    <audio autoplay loop>
        <source src="../audio/audio.mp3">
    </audio> 
</div>

Answer 8

以后参考以后找到此页面的人可以使用：

<audio controls autoplay loop hidden>
<source src="kooche.mp3" type="audio/mpeg">
<p>If you can read this, your browser does not support the audio element.</p>
</audio>

Answer 9

您可以使用以下简单代码：

wmctrl

对于此处看到的结果：https://hataken.000webhostapp.com/list-anime.html

Answer 10

我所做的是：

<div>
   <embed src="sample.mp3" autostart=true loop=false width="1px" height="1px">
</div>

您仍然会听到页面上的音频自动播放，但您看不到它，而且您的代码中几乎不需要空间！ “双赢！”