vue3动态设置audio播放语速

在Vue 3中，动态设置audio元素的播放语速可以通过操作DOM元素的`playbackRate`属性来实现。`playbackRate`属性可以控制音频或视频的播放速度，值为1时是正常速度，小于1时会减速播放，大于1时则加速播放。

在Vue组件中，你可以使用`ref`来获取对应的audio DOM元素，并通过watch来监听数据变化，从而实现动态设置播放速度。以下是一个简单的例子：

<template>
  <div>
    <audio ref="audioElement" src="your-audio-url.mp3"></audio>
    <button @click="changeSpeed">加速播放</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';

export default {
  setup() {
    const audioElement = ref(null);

    onMounted(() => {
      // 在组件挂载后设置初始播放速度
      audioElement.value.playbackRate = 1.0;
    });

    const changeSpeed = () => {
      // 切换播放速度，例如加速到1.5倍
      audioElement.value.playbackRate = 1.5;
      // 播放音频
      audioElement.value.play();
    };

    return {
      audioElement,
      changeSpeed
    };
  }
};
</script>

在上面的代码中，我们首先通过`ref`声明了一个audio元素的引用`audioElement`。在组件挂载完毕后，我们通过`onMounted`生命周期钩子设置了初始的播放速度。通过点击按钮时调用`changeSpeed`方法，我们可以改变播放速度并播放音频。