3

当我的页面使用 CSS 加载时，如何播放音乐？

我需要音乐自动播放并对其进行控制。

4

5 回答 5

6

音乐就是内容。CSS 是展示，而不是内容。

您可以在 HTML 中嵌入音频：

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

不过，这是最小的，因此它在 Firefox 中不起作用，因为它不支持 MP3。有这方面的教程。

于 2012-08-24T01:32:50.517 回答
4

您可以使用取自此处的 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 及以下版本，请考虑在不支持 html5 音频时使用具有 flash 回退功能的jplayer 。

于 2012-08-24T01:38:40.303 回答
2

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

  1. 并非所有浏览器都完全支持 HTML5，并且会导致您的页面/站点没有不一致的体验 - 这是您不想要的。

  2. Javascript 可能是您最好的选择，因为它在大多数情况下是跨浏览器，除了纯文本浏览器或非常精简的浏览器（您可能会在一些早期的手机上找到）。

  3. 小程序本身就是一个单独的蠕虫罐，因为您将不得不处理另一种编程语言（及其所有细微差别），以及用户每次访问或刷新页面时都必须激活小程序这一令人讨厌的事情。

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

因此，我的建议是：

  1. Javascript - 特别是 Jquery。

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

  3. Flash / SilverLight 等技术。

  4. 小程序

对于如何做到这一点的可能方法的大杂烩，您可以访问此链接：一个不错的集合开始是这个：http: //iapdesign.com/webdev/25-awesome-html5-and-jquery-plugin-music -玩家/

于 2012-08-24T01:48:49.627 回答
2

我有一个使用 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>
于 2019-08-27T20:44:31.253 回答
1

我认为没有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>

于 2015-08-31T13:32:54.363 回答