vue3，监听audio,暂停和播放

在 Vue3 中，你可以使用 JavaScript 的原生事件处理加上自定义的组件属性或方法来监听音频元素 (Audio) 的暂停和播放操作。以下是基本步骤：

1. 首先，在模板 (`template`) 或者 `setup` 函数中创建一个 Audio 组件实例，并将其绑定到数据属性上，比如 `audioRef`：

<template>
  <div>
    <button @click="play">播放</button>
    <button @click="pause">暂停</button>
    <audio ref="audio" :src="audioSrc"></audio>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const audioSrc = '/path/to/audio.mp3';
const audioRef = ref(new Audio(audioSrc));
</script>

2. 然后，在 `methods` 区块里添加 `play` 和 `pause` 方法，分别用于控制音频播放和暂停：

<script setup>
// ... 上面的代码 ...

function play() {
  if (!audioRef.value.paused) {
    audioRef.value.pause();
  } else {
    audioRef.value.play();
  }
}

function pause() {
  audioRef.value.pause();
}
</script>

3. 当你想监听音频的暂停和播放状态变化时，可以使用 `addEventListener` 方法给音频元素添加事件监听器：

<script setup>
// ... 上面的代码 ...

const isPlaying = computed(() => !audioRef.value.paused);

audioRef.value.addEventListener('pause', () => {
  // 音频暂停时执行的操作
});

audioRef.value.addEventListener('play', () => {
  // 音频开始播放时执行的操作
});
</script>

现在，当你点击按钮，音频就会按照指令播放或暂停，同时可以根据需要响应音频的状态改变。