feat: 增加语音播放速度

src/components/AudioPlayer/index.vue

@@ -14,6 +14,14 @@ const props = defineProps({
   }
 })
 
+const speedList = [
+  { label: '3 x', value: 3 },
+  { label: '2 x', value: 2 },
+  { label: '1.5 x', value: 1.5 },
+  { label: '1（正常）', value: 1 },
+  { label: '0.5 x', value: 0.5 },
+]
+
 const audioUrl = import.meta.env.VITE_AUDIO_BASE_URL;
 
 const isDisabled = ref(true);
@@ -114,6 +122,10 @@ const calculateDuration = () => {
   }
 }
 
+const handleCommand = (speed) => {
+  audioRef.value && (audioRef.value.playbackRate = speed);
+}
+
 onMounted(() => {
   calculateDuration()
 })
@@ -146,6 +158,14 @@ defineExpose({
           :disabled="isDisabled"
         />
         <span class="timestamp">{{ durationTime }}</span>
+        <el-dropdown placement="top" @command="handleCommand" popper-class="custom-popper-speed">
+          <el-icon><MoreFilled /></el-icon>
+          <template #dropdown>
+            <el-dropdown-menu>
+              <el-dropdown-item :command="item.value" v-for="item in speedList" :key="item.key">{{ item.label }}</el-dropdown-item>
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </div>
     </div>
   </div>
@@ -225,4 +245,10 @@ defineExpose({
   }
 }
 
+</style>
+
+<style lang="scss">
+  .custom-popper-speed {
+    width: 100px;
+  }
 </style>