HTML标签<audio>在不同浏览器中的出现

Posted 2023-02-25

【中文标题】HTML标签<audio>在不同浏览器中的出现

【英文标题】：The appearance of HTML tag <audio> in different browsers

【发布时间】：2015-09-23 20:29:58

【问题描述】：

我的 html5/JSF 页面中有一个标签，如下所示：

<audio controls="x"> 
            <source src="resources/audio/test.wav" type="audio/wav" /> 
</audio>

从 Firefox 和 Chrome 浏览器查看时，音频控件的外观为黑灰色 (audio2.png)。并且在 Eclipse 的“系统默认 Web 浏览器”（audio1.png）中查看时，音频控件的外观更亮（彩色）。

我更喜欢 audio1.png 的颜色。有没有办法在Firefox和Chrome中实现audio1.png的外观？

【参考方案1】：

不幸的是，没有简单的方法可以做到这一点。你can't actually style the audio tag itself，你只能创建自己的自定义控件，在所有浏览器中看起来都一样。

如另一个答案中所述，最好的解决方案可能是use an existing player。

【讨论】：

感谢您的链接，我将对此进行探索。实际上我不必使用完整的音频播放器。我真正想要的是页面上的一个小按钮，当我单击按钮时，它会播放音频。有没有办法可以改变我的 HTML5 来实现这一点？

如果这就是您所需要的，您应该可以只使用 javascript：new Audio('path_to_file.mp3').play();。有关更多信息，请参阅 here 和 here 以更好地了解您可以使用此 API 执行哪些其他操作。

我也可以在 Audio 构造函数中使用 .wav 代替 mp3 文件吗？

你可以，但是that wouldn't work on IE。 MP3 似乎仍然是唯一适用于所有主要浏览器的。