播放、暂停、停止

<template>
  <div>
    <button @click="togglePlay">
      {{ isPlaying ? "暂停" : "播放" }}
    </button>
    <button @click="stopAudio">停止</button>
    <p>播放进度：{{ Math.round(progress) }}%</p>
  </div>
</template>

<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import audioSrc from "@/assets/mp3/stop.mp3";

// 音频对象
let audio = null;

// 播放状态
const isPlaying = ref(false);

// 播放进度（百分比）
const progress = ref(0);

// 初始化音频
onMounted(() => {
  audio = new Audio(audioSrc);

  // 监听播放进度
  audio.addEventListener("timeupdate", () => {
    progress.value = (audio.currentTime / audio.duration) * 100;
  });
});

// 切换播放/暂停
const togglePlay = () => {
  if (isPlaying.value) {
    audio.pause();
  } else {
    audio.play().catch(error => {
      console.error("播放被阻止：", error);
      // 处理自动播放策略限制（需用户交互后才能播放）
    });
  }
  isPlaying.value = !isPlaying.value;
};

// 停止播放
const stopAudio = () => {
  audio.pause();
  audio.currentTime = 0;
  progress.value = 0;
};

// 组件卸载时清理资源
onBeforeUnmount(() => {
  audio.pause();
  audio.removeEventListener("timeupdate");
});
</script>

有时间轴

<template>
  <div>
    <audio ref="audioPlayer" controls>
      <source :src="safeAudioUrl.mp3" type="audio/mpeg" />
    </audio>
    <button @click="togglePlay">{{ isPlaying ? "暂停" : "播放" }}</button>
    <p v-if="error">{{ error }}</p>
  </div>
</template>

<script setup>
import { ref, computed } from "vue";
// 直接导入音频文件
import notificationSound from "@/assets/mp3/alarm.mp3";

const audioPlayer = ref(null);
const isPlaying = ref(false);
const error = ref(null);

const safeAudioUrl = computed(() => ({
  mp3: notificationSound
}));

const togglePlay = () => {
  if (!audioPlayer.value) return;

  if (isPlaying.value) {
    audioPlayer.value.pause();
  } else {
    audioPlayer.value.play().catch(err => {
      error.value = `播放失败: ${err.message}`;
    });
  }
  isPlaying.value = !isPlaying.value;
};

audioPlayer.value?.addEventListener("error", e => {
  console.log("1111111111e: ", e);
  const errors = {
    1: "MEDIA_ERR_ABORTED - 用户中止",
    2: "MEDIA_ERR_NETWORK - 网络错误",
    3: "MEDIA_ERR_DECODE - 解码错误",
    4: "MEDIA_ERR_SRC_NOT_SUPPORTED - 格式不支持"
  };
  error.value = errors[audioPlayer.value.error?.code] || "未知错误";
});
</script>