在前端开发中， 元素常用于播放音频。有时候我们需要在用户交互或某些条件满足时更改 元素的 src 属性以切换音频资源，这时可以使用 JavaScript 来实现。
基本方法
更改 元素的 src 属性，可以通过操作其 DOM 对象来实现。首先，可以使用 document.getElementById() 方法获取 元素的引用，然后修改其 src 属性即可。下面是示例代码：
------ ------------- --------- ------- ------------------------ ------------------ -------- ------- ------------------------------------- -------- -------- ------------- - --- ----- - ------------------------------------ --------- - ---------------- - ---------
在上述代码中，我们首先定义了一个带有 id 属性的 元素，并通过 controls 属性开启了默认的音频控制条。为了方便，还添加了一个按钮，当点击该按钮时会触发 changeAudio() 函数。该函数通过 document.getElementById() 获取到 元素的引用，并将其 src 属性更改为新的音频资源的 URL。
需要注意的是，如果更改的音频资源与原始资源具有相同的文件类型和编码格式，则可以不必更改 type 属性。如果更改的音频资源与原始资源类型不同，则需要相应地修改 type 属性值。
进阶技巧
在实际开发中，更改 元素的 src 属性还可以通过一些高级技巧来实现更加灵活和可控的效果。
检测音频已加载完成
当更改 元素的 src 属性时，新的音频资源需要加载并解码后才能播放。如果在更改 src 后立即调用播放函数，则可能会导致无法播放或者播放异常。为了避免这种情况，我们可以使用 canplaythrough 事件来检测音频是否已经加载完成，如下所示：
------ ------------- ---------
------- ------------------------ ------------------
--------
------- -------------------------------------
--------
-------- ------------- -
--- ----- - ------------------------------------
--------- - ----------------
---------------------------------------- ---------- -
-------------
---
-
---------在上述代码中，当点击按钮触发 changeAudio() 函数时，首先将 元素的 src 属性更改为新的音频资源的 URL。然后，通过 addEventListener() 方法添加 canplaythrough 事件监听器。当音频已经加载并解码完毕时，该事件会被触发，此时我们调用 audio.play() 方法来播放音频。
支持多个音频资源
有时候我们需要实现一个功能，可以在多个音频资源之间切换播放。为了实现这个功能，我们可以将多个音频 URL 存储在一个数组中，在用户交互或某些条件满足时更改 元素的 src 属性。
------ ------------- ---------
------- ------------------------ ------------------
--------
------- ----------------------------------
--------
--- --------- - -
------------------
------------------
-----------------
--
--- ------------ - --
--- ----- - ------------------------------------
-------- ----------- -
---------------
-- ------------- -- ----------------- -
------------ -
- ----------------------------------------------------------- --------
---------------------------------------------------------------------------------------