一、实现原理

Vue 的声明性渲染模型抽象了大部分对 DOM 的直接操作，当我们有需要直接访问底层 DOM 元素的需求，就可以使用特殊的 ref attribute，对DOM 元素实现直接引用，从而实现原生audio播放器的更改和控制。

所需知识点：

1. audio标签，以及相关属性操作
2. ref attribute的使用
3. script setup下函数封装调用等

二、技术实现方案

1. HTML部分代码

<div @click="clickAudio(word.voicEnPath)">英标按钮/div>
<div @click="clickAudio2(word.voicUsPath)">美标按钮</div>
<audio ref="audioElement" id="audio" :src="A_src" preload="auto" style="display: block;">
</audio>
<audio ref="audioElement2" id="audio" :src="A_src" preload="auto" style="display: block;">
</audio>

2. JS部分逻辑代码

<script setup>
//初始音频地址
const A_src = ref('');
//音频播放
// 音频播放处理
const handleAudioPlay = (audioRef, src) => {
  if (audioRef.value) {
    audioRef.value.pause(); // 停止当前播放的音频
    audioRef.value.currentTime = 0; // 重置播放时间
    audioRef.value.src = src; // 设置新的音频源
    audioRef.value.load(); // 加载新音频
    audioRef.value.onloadedmetadata = () => { // 确保音频元数据加载完毕
      audioRef.value.play().catch(error => {
        console.error("播放音频时出错:", error);
      });
    };
  }
};
//英标播放器
const audioElement = ref(null); 
const clickAudio = (data) => {
    console.log('url',data)
    handleAudioPlay(audioElement, data); 
};
//美标播放器
const audioElement2 = ref(null); 
const clickAudio2 = (data) => {
    console.log('url',data)
    handleAudioPlay(audioElement2, data);
};
</script>

注意事项

1. 确保在加载和播放新的音频文件之前，先停止当前播放的音频，并且重置 currentTime。
2. 连续播放多个音频文件，可以考虑使用 AudioContext 和相关的Web Audio API来更精细地控制音频的播放，或者使用多个 元素来分别控制不同的音频文件。
3. 监听音频的 ended 事件，在音频播放完毕后自动加载并播放下一个音频，从而避免冲突。

如觉的写的不错，欢迎评论讨论，本文为原创，如需转载请标明出处；