如何在网页中添加背景音乐？

Posted 2023-02-25

【中文标题】如何在网页中添加背景音乐？

【英文标题】：How to add background music to a web page?

【发布时间】：2011-06-30 03:26:07

【问题描述】：

如何向网页添加背景音乐？这样当访问者打开页面时，音乐就会自动播放。

我试过<object> <embed> 和<bgsound> 但它们都不能在Firefox 中工作。为什么？

【问题讨论】：

不要这样做。它惹恼了用户。

@Asaph 我认为在极少数情况下它可能是合适的（例如 html 游戏、基于画布的动画等）。大多数时候，你是对的——这很烦人，会让人离开。

<bgsound> 是 deprecated 和 only supported by IE (MDN compatibility table)。

【参考方案1】：

<bgsound> 标签是 Internet Explorer 特有的，因此在其他浏览器（例如 FireFox）中不起作用。如果使用正确，<embed> 标签应该可以在 FireFox 中使用。它将使用浏览器插件来播放声音。下面是一个例子：

<embed loop="true" src="sound.wav" hidden="true" type="video/quicktime"></embed>

loop="true" 指定重复播放声音。 src="sound.wav" 指定要播放的声音文件的相对路径。您可以播放的各种格式取决于您指定的type=。 hidden="true" 表示不显示媒体播放器的界面。如果您希望用户无法暂停、停止或浏览声音，请将其隐藏。 type="video/quicktime" 指定使用 Quicktime 组件，这意味着客户端必须安装 Quicktime。将application/x-mplayer2 用于Windows Media Player 或audio/x-pn-realaudio-plugin 用于Real Player 音频。 Quicktime 播放更多格式，可能是您想要使用的。

或者，以非常相似的方式使用<object>。下面是一个例子：

<object data="sound.wav" type="video/quicktime"  >
    <param name="filename" value="sound.wav">
    <param name="autostart" value="1">
    <param name="playcount" value="true"> 
</object>

请记住，与<marquee> 标签一样，网页上的背景声音通常不受欢迎，因为它通常会突兀和​​烦人。此外，当用户在页面之间切换或导致回发时，声音将从头开始。仅使用高度压缩的音频格式，这意味着它们具有较小的文件大小，否则声音在下载到客户端计算机时不会播放几秒钟。

【参考方案2】：

播放音频和显示标准控件：

<audio autoplay="autoplay" controls="controls">
     <source src="http://play.onet4u.com/nazrenz.mp3" />     
 </audio>

或者隐藏控件：

<audio autoplay="autoplay">
     <source src="http://play.onet4u.com/nazrenz.mp3" />     
 </audio>

【参考方案3】：

嵌入方法会在您的页面中放置一个媒体播放器。这是代码的最基本版本：

<audio controls="controls"><source src="SoundFile.mp3" type="audio/mpeg" /></audio>

嵌入式播放器如下所示：

如果您希望不显示播放器（并让用户没有控制权），请使用以下代码：

<audio><source src="SoundFile.mp3" type="audio/mpeg" /></audio>

有关自动播放等更多信息和选项，请参阅HTML5 audio。