VUE3开箱即用的音频播放组件（基于原生audio）

精选原创

牛掰666 2024-09-29 09:54:36 ©著作权

©著作权归作者所有：来自51CTO博客作者牛掰666的原创作品，请联系作者获取转载授权，否则将追究法律责任

在 Vue 3 中，创建一个开箱即用的音频播放组件可以让你的应用程序快速集成音频播放功能。这个组件将基于原生的 <audio> 元素，并提供基本的播放、暂停、停止、音量控制以及进度条等功能。下面是创建这样一个组件的基本步骤和示例代码。

1. 创建组件

首先，你需要创建一个 Vue 3 组件，该组件将包含 <audio> 标签以及其他必要的元素，如按钮和进度条。

`AudioPlayer.vue`

<template>
  <div class="audio-player">
    <audio :src="audioSrc" ref="audioRef" @timeupdate="handleTimeUpdate" @ended="handleEnded"></audio>
    <button @click="togglePlay">{{ playText }}</button>
    <input type="range" min="0" max="100" :value="volume * 100" @change="setVolume" />
    <progress :value="currentTime" :max="duration"></progress>
  </div>
</template>

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

const audioSrc = 'https://example.com/path/to/audio.mp3';
const audioRef = ref(null);
const currentTime = ref(0);
const duration = ref(0);
const volume = ref(1);
const isPlaying = ref(false);

const playText = computed(() => isPlaying.value ? 'Pause' : 'Play');

function togglePlay() {
  if (isPlaying.value) {
    audioRef.value.pause();
  } else {
    audioRef.value.play();
  }
  isPlaying.value = !isPlaying.value;
}

function setVolume(event) {
  const newVolume = event.target.value / 100;
  audioRef.value.volume = newVolume;
  volume.value = newVolume;
}

function handleTimeUpdate() {
  currentTime.value = audioRef.value.currentTime;
  if (audioRef.value.duration > 0) {
    duration.value = audioRef.value.duration;
  }
}

function handleEnded() {
  isPlaying.value = false;
  currentTime.value = 0;
}

onMounted(() => {
  audioRef.value.addEventListener('canplay', () => {
    duration.value = audioRef.value.duration;
  });
});
</script>

<style scoped>
.audio-player {
  display: flex;
  flex-direction: column;
  align-items: center;
}
progress[value] {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 20px;
  background-color: #ddd;
}
progress[value]::-webkit-progress-bar {
  background-color: #ddd;
}
progress[value]::-webkit-progress-value {
  background-color: blue;
}
</style>

2. 使用组件

接下来，你可以在你的应用程序中使用这个组件。例如，在一个页面中引入并使用这个组件：

`YourPage.vue`

<template>
  <div>
    <h1>Your Audio Player</h1>
    <AudioPlayer />
  </div>
</template>

<script setup>
import AudioPlayer from '@/components/AudioPlayer.vue';
</script>