vue3+ts 实现图标控制音乐播放

<template>
  <div class="audio-player">
    <audio ref="audio" :src="audioSrc" @ended="onEnded" controls></audio>
    <button @click="play">
      <img v-if="isPlaying" src="pause-icon.png" alt="Pause" />
      <img v-else src="play-icon.png" alt="Play" />
    </button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const audioSrc = 'your-audio-file.mp3';
    const isPlaying = ref(false);
    const audio = ref<HTMLAudioElement|null>(null);
 
    function play() {
      if (audio.value) {
        isPlaying.value = !isPlaying.value;
        if (isPlaying.value) {
          audio.value.play();
        } else {
          audio.value.pause();
        }
      }
    }
 
    function onEnded() {
      isPlaying.value = false;
    }
 
    return { audioSrc, isPlaying, audio, play, onEnded };
  }
});
</script>
 
<style>
.audio-player button {
  background-color: transparent;
  border: none;
  cursor: pointer;
}
 
.audio-player audio {
  display: none;
}
</style>

这个代码实例展示了如何在Vue 3和TypeScript中创建一个简单的音乐播放器，其中使用了一个audio元素和一个控制播放/暂停的按钮。按钮上的图标会根据播放状态变化。代码中的audioSrc变量应该替换为实际的音频文件路径。