xiaozhi-esp32-server/main/manager-web/src/components/AudioPlayer.vue

<template>
  <div class="audio-container">
    <audio
      ref="audioRef"
      :src="audioUrl"
      @timeupdate="updateProgress"
      @loadedmetadata="updateDuration"
      style="display: none"
    ></audio>

    <div class="custom-controls">
      <!-- 播放/暂停按钮 -->
      <button class="play-btn" @click="togglePlay">
        <svg width="20" height="20" viewBox="0 0 20 20">
          <path
            fill="#4362b3"
            :d="isPlaying
              ? 'M6 3h3v14H6zm5 0h3v14h-3z'
              : 'M5 3l12 7-12 7z'"
          />
        </svg>
      </button>

      <!-- 时间显示 -->
      <span class="time-display">{{ formattedCurrentTime }}/{{ formattedDuration }}</span>

      <!-- 进度条 -->
      <div class="progress-container">
        <div class="progress-bar" @click="handleProgressClick">
          <div
            class="progress-track"
            :style="{ width: progress + '%' }"
          ></div>
          <div
            class="progress-thumb"
            :style="{ left: progress + '%' }"
            @mousedown="startDrag"
          ></div>
        </div>
      </div>

      <!-- 音量控制 -->
      <div class="volume-control" ref="volumeControl">
        <button
          @click="toggleMute"
          @mouseenter="handleVolumeMouseEnter"
          @mouseleave="startVolumeSliderHideTimer"
          ref="volumeButton"
          class="volume-button"
        >
          <svg width="20" height="20" viewBox="0 0 24 24">
            <path fill="currentColor" :d="volumeIconPath"/>
          </svg>
        </button>
        <div
          v-show="showVolumeSlider"
          class="volume-slider-container"
          @mouseenter="cancelVolumeSliderHideTimer"
          @mouseleave="startVolumeSliderHideTimer"
          ref="volumeSlider"
        >
          <div class="volume-slider-track">
            <input
              type="range"
              v-model="volume"
              min="0"
              max="1"
              step="0.1"
              class="volume-slider"
              @input="handleVolumeChange"
              orient="vertical"
            >
            <div class="volume-slider-thumb" :style="{ bottom: volume * 100 + '%' }"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

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

const props = defineProps({
  audioUrl: String
})

// 音频元素引用
const audioRef = ref(null)
const volumeButton = ref(null)
const volumeSlider = ref(null)

// 播放状态
const isPlaying = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const progress = ref(0)

// 音量状态
const volume = ref(0.7)
const isMuted = ref(false)
const showVolumeSlider = ref(false)
let volumeSliderHideTimer = null

// 格式化时间为 MM:SS
const formatTime = (seconds) => {
  const sec = Math.floor(seconds || 0)
  return `${Math.floor(sec / 60)}:${(sec % 60).toString().padStart(2, '0')}`
}

const formattedCurrentTime = computed(() => formatTime(currentTime.value))
const formattedDuration = computed(() => formatTime(duration.value))

// 根据音量状态返回对应的图标路径
const volumeIconPath = computed(() => {
  if (isMuted.value || volume.value === 0) {
    return 'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z'
  }
  return 'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z'
})

// 播放控制
const togglePlay = () => {
  if (isPlaying.value) {
    audioRef.value.pause()
  } else {
    audioRef.value.play()
  }
  isPlaying.value = !isPlaying.value
}

const updateDuration = () => {
  if (audioRef.value) {
    duration.value = audioRef.value.duration
  }
}

const updateProgress = () => {
  if (audioRef.value?.duration) {
    currentTime.value = audioRef.value.currentTime
    progress.value = (currentTime.value / duration.value) * 100
  }
}

const handleProgressClick = (e) => {
  const rect = e.currentTarget.getBoundingClientRect()
  const percentage = ((e.clientX - rect.left) / rect.width) * 100
  seekToPercentage(percentage)
}

// 音量控制
const toggleMute = () => {
  isMuted.value = !isMuted.value
  audioRef.value.muted = isMuted.value

  // 如果取消静音且音量为0，则恢复默认音量
  if (!isMuted.value && volume.value === 0) {
    volume.value = 0.5
    audioRef.value.volume = 0.5
  }
}

const handleVolumeChange = (e) => {
  const newVolume = parseFloat(e.target.value)
  audioRef.value.volume = newVolume
  isMuted.value = newVolume === 0
}

// 进度条拖拽功能
let isDragging = false

const startDrag = (e) => {
  isDragging = true
  document.addEventListener('mousemove', handleDrag)
  document.addEventListener('mouseup', stopDrag)
  e.preventDefault()
}

const handleDrag = (e) => {
  if (!isDragging) return

  const rect = document.querySelector('.progress-bar').getBoundingClientRect()
  const percentage = ((e.clientX - rect.left) / rect.width) * 100
  seekToPercentage(percentage)
}

const stopDrag = () => {
  isDragging = false
  document.removeEventListener('mousemove', handleDrag)
  document.removeEventListener('mouseup', stopDrag)
}

const seekToPercentage = (percentage) => {
  const clampedPercentage = Math.min(Math.max(percentage, 0), 100)
  progress.value = clampedPercentage
  audioRef.value.currentTime = (clampedPercentage / 100) * duration.value
}

// 音量滑块显示/隐藏控制
const startVolumeSliderHideTimer = () => {
  volumeSliderHideTimer = setTimeout(() => {
    showVolumeSlider.value = false
  }, 300)
}

const cancelVolumeSliderHideTimer = () => {
  clearTimeout(volumeSliderHideTimer)
}

// 音量滑块定位
const updateSliderPosition = () => {
  nextTick(() => {
    if (!volumeButton.value || !volumeSlider.value) return

    const buttonRect = volumeButton.value.getBoundingClientRect()
    const slider = volumeSlider.value

    // 计算相对于视口的位置
    const left = buttonRect.left + window.scrollX
    const top = buttonRect.top + window.scrollY

    // 定位到按钮正中间，垂直居中
    slider.style.left = `${left + 5}px`
    slider.style.top = `${top - 85}px`
  })
}

const handleVolumeMouseEnter = () => {
  showVolumeSlider.value = true
  updateSliderPosition()
}

// 初始化
onMounted(() => {
  if (audioRef.value) {
    audioRef.value.volume = volume.value
  }
  window.addEventListener('resize', updateSliderPosition)
})

onUnmounted(() => {
  window.removeEventListener('resize', updateSliderPosition)
})
</script>

<style scoped>
.audio-container {
  background: #eef0fd;
  padding: 8px;
  height: 40px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}

.custom-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.play-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
}

.time-display {
  font-size: 12px;
  color: #5f7ba7;
  min-width: 40px;
  text-align: center;
}

.progress-container {
  flex: 1;
  padding: 0 10px;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}

.progress-container:hover {
  opacity: 1;
}

.progress-bar {
  height: 2px;
  background: #bfcadb;
  position: relative;
  cursor: pointer;
}

.progress-track {
  position: absolute;
  height: 100%;
  background: #4167ed;
}

.progress-thumb {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #4167ed;
  border: 2px solid #d6dcfc;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer;
  z-index: 2;
}

.volume-control {
  position: relative;
}

.volume-button {
  background: none;
  border: none;
  padding: 0;
  color: #8f95cd;
  cursor: pointer;
}

.volume-slider-container {
  position: fixed;
  padding: 10px 4px;
  background: #eef0fd;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  height: 75px;
}

.volume-slider-track {
  position: relative;
  height: 55px;
  width: 2px;
  background: #bfcadb;
  margin: 1px;
}

.volume-slider-thumb {
  position: absolute;
  left: 1px;
  width: 9px;
  height: 9px;
  background: #4167ed;
  border: 2px solid #d6dcfc;
  border-radius: 50%;
  transform: translateX(-50%);
  pointer-events: none;
}

.volume-slider {
  position: absolute;
  left: -14px;
  width: 30px;
  height: 60px;
  writing-mode: vertical-lr;
  direction: rtl;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}

.volume-slider-track::after {
  content: '';
  position: absolute;
  left: 0;
  bottom: 0;
  width: 2px;
  height: calc(100% * v-bind(volume));
  background: #4167ed;
}
</style>