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