Question

如何在使用CSS加载页面时播放音乐？

我需要音乐自动播放并控制它。

Answer 1

音乐是内容。 CSS是演示，而不是内容。

您可以在HTML中嵌入音频：

<audio src="path/to/song.mp3" controls autoplay></audio>

这是最小的，因此它不适用于Firefox，因为它不支持MP3。有教程。

Answer 2

您可以使用取自here的html5音频标记，注意支持哪些浏览器。

<audio controls="controls" autoplay>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

如果你需要支持IE8及以下版本，请考虑使用jplayer，当不支持html5音频时，它会闪回。

Answer 3

正如其他人所指出的，CSS本身不可能。您唯一的选择是HTML5，JavaScript，Applet或第三方技术，如Flash和SilverLight。但是，这些选项中的每一个都有自己的警告和缺陷。

所有浏览器都不完全支持HTML5，这会导致您的网页/网站没有不一致的体验 - 这是您不想要的。
Javascript可能是你最好的选择，因为除了纯文本浏览器或非常简单的浏览器（你可以在一些早期的手机上找到）之外，它大部分都是跨浏览器。
< / LI>
小程序本身就是一个独立的蠕虫病毒，因为你必须处理另一种编程语言（及其所有细微差别），以及 可怕的烦恼 用户每次访问或刷新页面时都必须激活applet。

Flash或Silverlight是另一种很有前途的选择，因为它们可以在任何浏览器中运行 - 前提是操作系统支持它。但是，您的站点/页面的访问者必须安装并启用该插件。如果您决定采用这种方式，Flash是最佳选择，因为几乎每台计算机和操作系统都运行并支持它。但是，有一点需要注意的是，最近（过去5年左右），Adobe一直遇到Flash的安全问题。

因此，我的建议是：

Javascript - 特别是Jquery。

HTML5，如果可以 - 但支持Javascript作为备份。示例：http://css-tricks.com/play-sound-on-hover/

Flash / SilverLight等技术。

小程序

对于大杂烩有关如何执行此操作的可能方法，您可以访问此链接：一个很好的收集就是这个：http://iapdesign.com/webdev/25-awesome-html5-and-jquery-plugin-music-player/

Answer 4

我有一个使用CSS悬停播放的Gif。我有MP3文件来匹配Gif动画。可以在CSS悬停部分中添加一些代码来触发您拥有的HTML代码中的音频文件，以便它们同时播放吗？

CSS：

.animation:hover {
  cursor: pointer;
  background: url('my_animation.gif'), url('Background.jpg');
 **ADD some code here to trigger my_sound.mp3**
}

HTML：

<audio autoplay>
  <source src="my_sound.mp3" type="audio/mp3" />
</audio>

Answer 5

我认为没有css代码。尝试使用这个HTML代码

<audio controls="controls" autoplay>
  <source src="horse.ogg" type="audio/ogg" />
  <source src="horse.mp3" type="audio/mp3" />
  Your browser does not support the audio element.
</audio>

如何使用CSS播放音乐？

5 个答案: