HTML5 提供了一种方便的方式来嵌入音频文件，即使用 <audio> 标签。它允许您在网页上直接播放音频，而无需任何插件或外部软件。但是，有时一个音频文件可能以不同的格式存在，因此您可能需要在一个 <audio> 标签中添加多个源。
添加多个源
要向 <audio> 标签添加多个源，您可以使用 <source> 标签。<source> 标签使您能够指定音频文件的不同格式和来源。当浏览器无法播放第一个源时，它将尝试播放下一个源，直到找到可用的源为止。以下是一个示例：
------ ---------
------- --------------- ------------------
------- --------------- -----------------
--------在这个示例中，我们向 <audio> 标签添加了两个源：一个 MP3 文件和一个 OGG 文件。如果浏览器支持 MP3，则它将播放 MP3 文件。否则，它将尝试播放 OGG 文件。
通过 JavaScript 动态添加源
有时，您可能希望通过编程方式向 <audio> 标签添加多个源。在这种情况下，您可以使用 JavaScript。以下是一个示例：
------ ------------ ---------
--------
--------
--- ----- - -----------------------------------
--- ------- - ---------------------------------
----------- - ------------
------------ - -------------
---------------------------
--- ------- - ---------------------------------
----------- - ------------
------------ - ------------
---------------------------
---------在这个示例中，我们先创建了一个空的 <audio> 标签，并为其添加了一个 ID（myAudio）。然后，我们使用 JavaScript 获取该标签并使用 createElement() 方法创建两个 <source> 标签。每个标签都被分配一个源文件和 MIME 类型，并使用 appendChild() 方法将它们添加到 <audio> 标签中。
指导意义
通过编程方式向 <audio> 标签添加多个源是一项非常有用的技术。它可以确保您的音频文件在尽可能多的浏览器中播放，并提高用户体验。此外，它还可以使您的代码更加动态和可维护。
要注意的是，虽然您可以添加任意数量的源，但最好不要添加太多。如果您添加太多的源，页面加载时间可能会变慢，并且可能会影响用户体验。建议只添加两到三个源。
结论
HTML5 的 <audio> 标签允许您在网页上嵌入音频文件。通过添加多个源，您可以确保您的音频文件在尽可能多的浏览器中播放。通过 JavaScript，您可以轻松地向 <audio> 标签添加多个源并使代码更加动态和可维护。记住不要添加太多的源，并尽可能提高用户体验。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/28090