如何使用 CSS 播放音乐？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12102157/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I play music using CSS?
提问by Evan H.
How do I make music play when my page loads using CSS?
使用 CSS 加载页面时如何播放音乐？
I need music to automatically play and have controls for it.
我需要音乐自动播放并对其进行控制。
回答by Niet the Dark Absol
Music is content. CSS is presentation, not content.
音乐是内容。CSS 是展示，而不是内容。
You can embed audio in HTML:
您可以在 HTML 中嵌入音频：
<audio src="path/to/song.mp3" controls autoplay></audio>
This is minimal, though, so it won't work in Firefox for instance since it doesn't support MP3. There are tutorials for this.
但是，这是最小的，因此它不能在 Firefox 中工作，例如，因为它不支持 MP3。有这方面的教程。
回答by tsukimi
You can use html5 audio tag, taken from here, note which browsers are supported.
您可以使用 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>
If you need to support IE8 and below consider using jplayerwhich has flash fallback when html5 audio is not supported.
如果您需要支持 IE8 及以下版本，请考虑使用在不支持 html5 音频时具有 Flash 回退功能的jplayer。
回答by jrd1
As others have pointed out, this is not natively possible with CSS. Your only options are HTML5, JavaScript, Applets or 3rd party technologies like Flash and SilverLight. However, each of these options have their own caveats and flaws.
正如其他人指出的那样，这在 CSS 中是不可能的。您唯一的选择是 HTML5、JavaScript、Applets 或 3rd 方技术，如 Flash 和 SilverLight。但是，这些选项中的每一个都有自己的警告和缺陷。
HTML5 is not fully supported by all browsers, and will result in your page / site not having a non-consistent experience - which you wouldn't want.
Javascript is probably your best bet as it is for the most part cross-browser except for text-only browers, or very lite browsers (which you may find on some earlier generation cellphones).
Applets are a separate can of worms in themselves as you will have to deal with another programming language (and all its nuances), as well as the horribly annoyingmatter of your users having to activate the applet every time they visit or refresh the page.
Flash or Silverlight is another promising alternative as they can run in any browser - provided that the operating system supports it. However, the visitors of your site / page have to have that plugin installed and enabled. If you decided to go this route, Flash is the best option as almost every computer and OS runs and supports it. However, one thing to note is that of late (past 5 years or so), Adobe has been having some security issues with Flash.
并非所有浏览器都完全支持 HTML5，这将导致您的页面/站点没有不一致的体验 - 这是您不希望的。
Javascript 可能是您最好的选择，因为它在大多数情况下是跨浏览器的，除了纯文本浏览器或非常精简的浏览器（您可能会在一些较早的手机上找到）。
小程序本身就是一个单独的蠕虫，因为您将不得不处理另一种编程语言（及其所有细微差别），以及用户每次访问或刷新页面时都必须激活小程序的令人讨厌的问题。
Flash 或 Silverlight 是另一种很有前途的替代方案，因为它们可以在任何浏览器中运行——只要操作系统支持它。但是，您网站/页面的访问者必须安装并启用该插件。如果您决定走这条路，Flash 是最佳选择，因为几乎所有计算机和操作系统都运行并支持它。但是，需要注意的一件事是最近（过去 5 年左右），Adobe 一直存在 Flash 的一些安全问题。
Thus, my suggestion would be:
因此，我的建议是：
Javascript - particularly Jquery.
HTML5 if you can - but supported by Javascript as a backup. Example: http://css-tricks.com/play-sound-on-hover/
Flash / SilverLight and like technologies.
Applets
Javascript - 特别是 Jquery。
如果可以，HTML5 - 但 Javascript 支持作为备份。示例：http: //css-tricks.com/play-sound-on-hover/
Flash / SilverLight 等技术。
小程序
And for a Hodgepodge of possible ways of how to do this you can visit this link: A nice collection to start is this one: http://iapdesign.com/webdev/25-awesome-html5-and-jquery-plugin-music-player/
对于如何做到这一点的可能方法的大杂烩，您可以访问此链接：一个不错的收藏开始是这个：http: //iapdesign.com/webdev/25-awesome-html5-and-jquery-plugin-music -玩家/
回答by Edwards
I think so there is no css code. try to use this html code
我认为没有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>回答by Robert
I have a Gif that plays on hover using CSS. I have the MP3 file to match the Gif animation. Can some code be added within the CSS hover section that would trigger the audio file in the HTML code you have so they play at the same time?
我有一个使用 CSS 悬停播放的 Gif。我有 MP3 文件来匹配 Gif 动画。是否可以在 CSS 悬停部分中添加一些代码来触发您拥有的 HTML 代码中的音频文件，以便它们同时播放？
CSS:
CSS：
.animation:hover {
cursor: pointer;
background: url('my_animation.gif'), url('Background.jpg');
**ADD some code here to trigger my_sound.mp3**
}
HTML:
HTML：
<audio autoplay>
<source src="my_sound.mp3" type="audio/mp3" />
</audio>
