【组件开发】基于elementplus组件开发的audio音频播放器

<template>
  <div class="my-audio">
    <!-- 音频播放器，使用timeupdate事件更新播放进度 -->
    <audio @timeupdate="updateProgress" controls ref="audioRef">
      <source :src="audioUrl" type="audio/mpeg" />
      您的浏览器不支持音频播放
    </audio>
    <!-- 音频控制区域 -->
    <div class="audio-container">
      <!-- 快退、播放/暂停、快进按钮 -->
      <div class="audio-controls">
        <el-button :disabled="!disabled" circle size="small" link @click="beforeTen">
          <svg-icon :size="20" name="fast-recording-before" />
        </el-button>
        <!-- 播放/暂停按钮，根据audioIsPlay动态改变图标 -->
        <el-button :disabled="!disabled" link @click="playAudio" circle class="play-button">
          <svg-icon :size="35" :name="audioIsPlay ? 'fast-recording-videopause' : 'fast-recording-circle'" />
        </el-button>
        <el-button :disabled="!disabled" circle size="small" link @click="afterTen" style="margin-left: 0">
          <svg-icon :size="20" name="fast-recording-after" />
        </el-button>
      </div>
      <!-- 播放进度条 -->
      <div class="slider-box">
        <span>{{ audioStart }}</span>
        <el-slider class="slider" v-model="currentProgress" :show-tooltip="false" @input="handleProgressChange" />
        <span>{{ durationTime }}</span>
      </div>
      <!-- 音量控制 -->
      <div class="volume" @mouseenter="audioHubs = true" @mouseleave="audioHubs = false">
        <div class="volume-progress" v-show="audioHubs">
          <el-slider
            vertical
            height="100px"
            class="volume-bar"
            v-model="audioVolume"
            :show-tooltip="false"
            @change="handleAudioVolume" />
        </div>
        <svg-icon :size="30" class="volume-icon" name="fast-recording-sound"></svg-icon>
      </div>
      <!-- 下载按钮 -->
      <el-popover placement="top" :width="120" trigger="hover">
        <template #reference>
          <svg-icon name="fast-recording-more"></svg-icon>
        </template>
        <div style="text-align: center">
          <el-button link @click="downloadFullAudio">下载录音</el-button>
        </div>
      </el-popover>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  audioUrl: String, // 音频的URL
  flashName: String, // 用于下载音频时的文件名
})

// 是否正在播放
const audioIsPlay = ref(false)
// 音频开始时间显示
const audioStart = ref('0:00')
// 音频总时长显示
const durationTime = ref('0:00')
// 音频总时长
const duration = ref(0)
// 音量控制
const audioVolume = ref(80)
// 是否显示音量控制滑块
const audioHubs = ref(false)
// 音频元素引用
const audioRef = ref(null)
// 当前播放进度
const currentProgress = ref(0)

// 是否禁用控制按钮
const disabled = ref(false)
// 监听音频总时长变化，禁用快进和快退按钮
watch(
  () => duration.value,
  (newVal) => {
    if (newVal) {
      disabled.value = true
    }
  }
)
// 监听音频URL变化，重新计算音频时长
watch(
  () => props.audioUrl,
  (newVal) => {
    calculateDuration()
  }
)

// 异步获取音频时长
const getAudioDuration = async (blobUrl) => {
  const audioContext = new (window.AudioContext || window.webkitAudioContext)()
  try {
    const response = await fetch(blobUrl)
    const blob = await response.blob()
    const arrayBuffer = await new Response(blob).arrayBuffer()
    const audioBuffer = await audioContext.decodeAudioData(arrayBuffer)
    return Number(audioBuffer.duration.toFixed(0))
  } catch (error) {
    console.error('获取音频时长时发生错误:', error)
  }
}

// 计算并设置音频的总时长
const calculateDuration = async () => {
  let myVid = audioRef.value
  myVid.loop = false

  // 监听音频播放结束事件
  myVid.addEventListener('ended', function () {
    audioIsPlay.value = false
    currentProgress.value = 0
    audioStart.value = transTime(0)
  })

  if (myVid !== null) {
    myVid.src = props.audioUrl
    duration.value = await getAudioDuration(props.audioUrl)
    durationTime.value = transTime(duration.value)
    myVid.volume = 0.8 // 设置默认音量为80%
  }
}

// 将秒转换为分钟:秒的格式
const transTime = (duration) => {
  const minutes = Math.floor(duration / 60)
  const seconds = Math.floor(duration % 60)
  const formattedMinutes = String(minutes).padStart(2, '0')
  const formattedSeconds = String(seconds).padStart(2, '0')
  return `${formattedMinutes}:${formattedSeconds}`
}

// 播放或暂停音频
const playAudio = () => {
  if (!audioIsPlay.value) {
    audioRef.value.play()
    audioIsPlay.value = true
  } else {
    audioRef.value.pause()
    audioIsPlay.value = false
  }
}

// 更新播放进度
const updateProgress = (e) => {
  let value = e.target.currentTime / duration.value
  if (audioRef.value.play) {
    currentProgress.value = value * 100
    audioStart.value = transTime(audioRef.value.currentTime)
  }
}

// 调整播放进度
const handleProgressChange = (val) => {
  if (!val) {
    return
  }
  audioRef.value.currentTime = duration.value * (val / 100)
}

// 调整音量
const handleAudioVolume = (val) => {
  audioRef.value.volume = val / 100
}

// 快退10秒
const beforeTen = () => {
  audioRef.value.currentTime -= 10
}

// 快进10秒
const afterTen = () => {
  audioRef.value.currentTime += 10
}

// 下载音频
const downloadFullAudio = () => {
  const link = document.createElement('a')
  link.href = props.audioUrl
  link.download = `${props.flashName}.wav`
  link.click()
}
</script>

<style lang="scss" scoped>
.my-audio {
  audio {
    display: none;
  }
  .audio-container {
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    box-sizing: border-box;
    position: relative;
    .audio-controls {
      display: flex;
      margin-right: 16px;
      .play-button {
        margin: 0 8px;
      }
    }
    .slider-box {
      flex: 1;
      display: flex;
      align-items: center;
      span {
        font-size: 12px;
        color: #49505c;
        line-height: 18px;
      }
      .slider {
        margin: 0 20px;
      }
      :deep(.elp-slider__bar) {
        background: transparent linear-gradient(to right, #8d00ff, #005fff);
      }
      :deep(.elp-slider__button) {
        border: 3px solid #8d00ff;
      }
    }
  }
  .volume {
    position: relative;
    width: 30px;
    height: 30px;
    margin: 0 24px;
    display: flex;
    align-items: center;
    .volume-progress {
      width: 32px;
      height: 140px;
      position: absolute;
      top: -142px;
      right: 10%;
    }
    .volume-bar {
      background: #ffffff;
      box-shadow: 0 2px 14px 0 rgba(0, 0, 0, 0.12);
      border-radius: 8px;
      :deep(.elp-slider__bar) {
        background-color: #13d6e5;
      }
    }
    .volume-icon {
      padding: 5px;
      cursor: pointer;
    }
  }
}
</style>

其中svg-icon是icon组件，可以直接使用element组件中的icon图标