oxy-uni-ui 1.2.0 → 2.0.0

package/components/oxy-voice-player/oxy-voice-player.vue

@@ -0,0 +1,821 @@
+<template>
+  <view :class="rootClass" :style="customStyle">
+    <template v-if="viewMode === 'normal'">
+      <view class="oxy-voice-player__normal-mode-container">
+        <view
+          v-if="showCover"
+          class="oxy-voice-player__cover-section"
+          :class="{ 'is-hidden': isCoverHidden }"
+          @touchstart.stop="handleTouchStart"
+          @touchmove.stop="handleTouchMove"
+          @touchend.stop="handleTouchEnd"
+        >
+          <view class="oxy-voice-player__cover-container">
+            <view
+              class="oxy-voice-player__cover-disc"
+              :class="{ 'is-rotating': isPlaying && enableRotation, 'is-paused': !isPlaying && enableRotation }"
+            >
+              <image
+                class="oxy-voice-player__cover-image"
+                :src="currentSong.cover || computedDefaultCover"
+                mode="aspectFill"
+                @error="handleCoverError"
+              />
+              <view class="oxy-voice-player__cover-center"></view>
+            </view>
+          </view>
+        </view>
+
+        <view v-if="showInfo" class="oxy-voice-player__info" :class="{ 'is-hidden': isCoverHidden }">
+          <text class="oxy-voice-player__song-title">{{ currentSong.title || '未知歌曲' }}</text>
+          <text v-if="currentSong.artist" class="oxy-voice-player__song-artist">{{ currentSong.artist }}</text>
+          <text v-if="currentSong.album" class="oxy-voice-player__song-album">{{ currentSong.album }}</text>
+        </view>
+
+        <view
+          v-if="showLyrics && currentLyrics.length"
+          class="oxy-voice-player__lyrics"
+          :class="{ 'is-expanded': isCoverHidden }"
+          @touchstart.stop="handleTouchStart"
+          @touchmove.stop="handleTouchMove"
+          @touchend.stop="handleTouchEnd"
+        >
+          <scroll-view class="oxy-voice-player__lyrics-container" scroll-y :scroll-top="lyricsScrollTop" scroll-with-animation>
+            <view
+              v-for="(lyric, index) in currentLyrics"
+              :key="index"
+              class="oxy-voice-player__lyric-line"
+              :class="{ 'is-active': index === currentLyricIndex }"
+            >
+              <text class="oxy-voice-player__lyric-text">{{ lyric.text }}</text>
+              <text v-if="lyric.translation" class="oxy-voice-player__lyric-translation">{{ lyric.translation }}</text>
+            </view>
+          </scroll-view>
+        </view>
+
+        <view class="oxy-voice-player__progress-section">
+          <view class="oxy-voice-player__time-info">
+            <text class="oxy-voice-player__current-time">{{ formatTime(currentTime) }}</text>
+            <text class="oxy-voice-player__total-time">{{ formatTime(duration) }}</text>
+          </view>
+          <view class="oxy-voice-player__slider-wrapper">
+            <view class="oxy-voice-player__progress-buffered" :style="{ width: bufferedPercent + '%' }"></view>
+            <oxy-slider
+              :model-value="progressPercent"
+              :min="0"
+              :max="100"
+              :step="0.1"
+              hide-label
+              hide-min-max
+              inactive-color="#e5e5e533"
+              active-color="#e5e5e5"
+              @dragstart="handleDragstart"
+              @dragmove="handleDragmove"
+              @dragend="handleDragend"
+            />
+          </view>
+        </view>
+
+        <view class="oxy-voice-player__controls-section">
+          <view class="oxy-voice-player__main-controls">
+            <button v-if="showPrevNext" class="oxy-voice-player__control-btn" @click="handlePrev">
+              <oxy-icon name="chevron-left" custom-class="oxy-voice-player__control-icon" />
+            </button>
+            <button class="oxy-voice-player__control-btn oxy-voice-player--play-btn" @click="handleTogglePlay">
+              <oxy-icon :name="isPlaying ? 'pause' : 'play'" custom-class="oxy-voice-player__btn-icon" />
+            </button>
+            <button v-if="showPrevNext" class="oxy-voice-player__control-btn" @click="handleNext">
+              <oxy-icon name="chevron-right" custom-class="oxy-voice-player__control-icon" />
+            </button>
+          </view>
+
+          <view v-if="extraControls.length > 0" class="oxy-voice-player__extra-controls">
+            <button v-if="extraControls.includes('playMode')" class="oxy-voice-player__extra-btn" @click="handleTogglePlayMode">
+              <oxy-icon :name="playModeIcon" custom-class="oxy-voice-player__extra-btn-icon" />
+            </button>
+            <button
+              v-if="extraControls.includes('favorite')"
+              class="oxy-voice-player__extra-btn oxy-voice-player--favorite-btn"
+              @click="handleToggleFavorite"
+            >
+              <oxy-icon name="heart" custom-class="oxy-voice-player__extra-btn-icon" :class="{ 'is-favorited': isFavorited }" />
+            </button>
+            <button v-if="extraControls.includes('mini')" class="oxy-voice-player__extra-btn" @click="handleToggleViewMode">
+              <oxy-icon name="arrow-down" custom-class="oxy-voice-player__extra-btn-icon" />
+            </button>
+            <button v-if="extraControls.includes('volume')" class="oxy-voice-player__extra-btn" @click="showVolumePanel = !showVolumePanel">
+              <oxy-icon name="sound" custom-class="oxy-voice-player__extra-btn-icon" />
+            </button>
+          </view>
+        </view>
+
+        <view v-if="showVolumePanel" class="oxy-voice-player__volume-panel">
+          <view class="oxy-voice-player__volume-slider-wrapper">
+            <oxy-slider v-model="volumePercent" :min="0" :max="100" :step="1" hide-label hide-min-max />
+          </view>
+          <text class="oxy-voice-player__volume-text">{{ Math.round(volumePercent) }}%</text>
+        </view>
+      </view>
+    </template>
+
+    <template v-if="viewMode === 'mini'">
+      <view class="oxy-voice-player__mini-player">
+        <view class="oxy-voice-player__mini-cover">
+          <view
+            class="oxy-voice-player__mini-cover-disc"
+            :class="{ 'is-rotating': isPlaying && enableRotation, 'is-paused': !isPlaying && enableRotation }"
+          >
+            <image
+              class="oxy-voice-player__mini-cover-image"
+              :src="currentSong.cover || computedDefaultCover"
+              mode="aspectFill"
+              @error="handleCoverError"
+            />
+            <view class="oxy-voice-player__mini-cover-center"></view>
+          </view>
+        </view>
+
+        <view class="oxy-voice-player__mini-info">
+          <text class="oxy-voice-player__mini-title">{{ currentSong.title || '未知歌曲' }}</text>
+          <text v-if="currentSong.artist" class="oxy-voice-player__mini-artist">{{ currentSong.artist }}</text>
+        </view>
+
+        <view class="oxy-voice-player__mini-controls">
+          <button v-if="showPrevNext" class="oxy-voice-player__mini-control-btn" @click="handlePrev">
+            <oxy-icon name="chevron-left" custom-class="oxy-voice-player__mini-btn-icon" />
+          </button>
+          <button class="oxy-voice-player__mini-control-btn oxy-voice-player——play-btn" @click="handleTogglePlay">
+            <oxy-icon :name="isPlaying ? 'pause' : 'play'" custom-class="oxy-voice-player__mini-btn-icon" />
+          </button>
+          <button v-if="showPrevNext" class="oxy-voice-player__mini-control-btn" @click="handleNext">
+            <oxy-icon name="chevron-right" custom-class="oxy-voice-player__mini-btn-icon" />
+          </button>
+          <button class="oxy-voice-player__mini-control-btn" @click="handleToggleViewMode">
+            <oxy-icon name="arrow-up" custom-class="oxy-voice-player__mini-btn-icon" />
+          </button>
+        </view>
+
+        <view class="oxy-voice-player__mini-progress">
+          <view class="oxy-voice-player__mini-progress-bar" :style="{ width: progressPercent + '%' }"></view>
+        </view>
+      </view>
+    </template>
+
+    <template v-if="viewMode === 'simple'">
+      <view class="oxy-voice-player__simple-player">
+        <view class="oxy-voice-player__simple-time-info">
+          <text class="oxy-voice-player__simple-current-time">{{ formatTime(currentTime) }}</text>
+          <text class="oxy-voice-player__simple-total-time">{{ formatTime(duration) }}</text>
+        </view>
+        <view class="oxy-voice-player__simple-progress-section">
+          <view class="oxy-voice-player__simple-slider-wrapper">
+            <oxy-slider
+              v-model="progressPercent"
+              :min="0"
+              :max="100"
+              :step="0.1"
+              hide-label
+              hide-min-max
+              @dragstart="handleDragstart"
+              @dragmove="handleDragmove"
+              @dragend="handleDragend"
+            />
+          </view>
+        </view>
+      </view>
+    </template>
+
+    <template v-if="viewMode === 'hideView'"></template>
+  </view>
+</template>
+
+<script lang="ts">
+export default {
+  name: 'oxy-voice-player',
+  options: {
+    addGlobalClass: true,
+    virtualHost: true,
+    styleIsolation: 'shared'
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import OxyIcon from '../oxy-icon/oxy-icon.vue'
+import { computed, onMounted, onUnmounted, ref, watch, nextTick } from 'vue'
+import dayjs from '../../dayjs'
+import {
+  voicePlayerProps,
+  type VoicePlayerEmits,
+  type VoicePlayerExpose,
+  type VoicePlayerSongInfo,
+  type VoicePlayerLyricLine,
+  type InnerAudioContext,
+  type TouchEvent,
+  type TouchPoint
+} from './types'
+const props = defineProps(voicePlayerProps)
+const emit = defineEmits<VoicePlayerEmits>()
+
+const isPlaying = ref(false)
+const currentTime = ref(0)
+const duration = ref(0)
+const buffered = ref(0)
+const currentVolume = ref(1)
+const isSliderTouching = ref(false)
+
+const internalCurrentIndex = ref(0)
+const internalPlaylist = ref<VoicePlayerSongInfo[]>([])
+const internalPlayMode = ref<'list' | 'single' | 'random'>('list')
+
+const showVolumePanel = ref(false)
+const currentLyricIndex = ref(-1)
+const lyricsScrollTop = ref(0)
+const isCoverHidden = ref(false)
+
+const isFavorited = ref(false)
+
+const audioContext = ref<InnerAudioContext | null>(null)
+const progressTimer = ref<ReturnType<typeof setInterval> | null>(null)
+const isChangingProgress = ref(false)
+const isInitialized = ref(false)
+
+const touchStartX = ref(0)
+const touchStartY = ref(0)
+const touchMoveX = ref(0)
+const touchMoveY = ref(0)
+const isTouching = ref(false)
+
+function calculatePercent(current: number, total: number): number {
+  if (!total || total <= 0) return 0
+  return Math.min(100, Math.max(0, (current / total) * 100))
+}
+
+const progressPercent = computed(() => calculatePercent(currentTime.value, duration.value))
+
+const bufferedPercent = computed(() => calculatePercent(buffered.value, duration.value))
+
+const volumePercent = computed({
+  get: () => currentVolume.value * 100,
+  set: (value: number) => {
+    const vol = Math.min(1, Math.max(0, value / 100))
+    currentVolume.value = vol
+    if (audioContext.value) {
+      audioContext.value.volume = vol
+    }
+    emit('volume-change', vol)
+  }
+})
+
+const currentSong = computed((): VoicePlayerSongInfo => {
+  if (internalPlaylist.value.length > 0 && internalCurrentIndex.value >= 0 && internalCurrentIndex.value < internalPlaylist.value.length) {
+    return internalPlaylist.value[internalCurrentIndex.value]
+  }
+  return {
+    src: props.src,
+    title: props.title,
+    artist: props.artist,
+    album: props.album,
+    cover: props.cover,
+    lyrics: props.lyrics
+  }
+})
+
+const currentLyrics = computed((): VoicePlayerLyricLine[] => {
+  return currentSong.value.lyrics || props.lyrics || []
+})
+
+const rootClass = computed(() => {
+  const classes = ['oxy-voice-player', 'is-theme-' + props.theme, 'is-mode-' + props.viewMode, isPlaying.value ? 'is-playing' : '', props.customClass]
+  return classes.filter(Boolean).join(' ')
+})
+
+const playModeIcon = computed(() => {
+  switch (internalPlayMode.value) {
+    case 'single':
+      return 'refresh'
+    case 'random':
+      return 'swap'
+    default:
+      return 'refresh1'
+  }
+})
+
+const computedDefaultCover = computed(() => {
+  return props.defaultCover
+})
+
+watch(
+  () => props.playlist,
+  (newVal: VoicePlayerSongInfo[]) => {
+    internalPlaylist.value = Array.isArray(newVal) ? [...newVal] : []
+    validateCurrentIndex()
+  },
+  { immediate: true, deep: true }
+)
+
+watch(
+  () => props.playMode,
+  (newVal: 'list' | 'single' | 'random') => {
+    if (['list', 'single', 'random'].includes(newVal)) {
+      internalPlayMode.value = newVal
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.volume,
+  (newVal: string | number) => {
+    const normalizedVolume = typeof newVal === 'number' ? newVal : Number(newVal)
+    if (Number.isFinite(normalizedVolume) && normalizedVolume >= 0 && normalizedVolume <= 1) {
+      currentVolume.value = normalizedVolume
+      if (audioContext.value) {
+        audioContext.value.volume = normalizedVolume
+      }
+    }
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.src,
+  () => {
+    nextTick(() => {
+      initializeAudio()
+      if (isPlaying.value) {
+        play()
+      }
+    })
+  }
+)
+
+watch(currentTime, (newTime: number) => {
+  if (props.showLyrics) {
+    updateCurrentLyric(newTime)
+  }
+})
+
+watch(currentLyricIndex, () => {
+  if (props.showLyrics) {
+    scrollToCurrentLyric()
+  }
+})
+
+function validateCurrentIndex() {
+  if (internalPlaylist.value.length === 0) {
+    internalCurrentIndex.value = 0
+    return
+  }
+  if (internalCurrentIndex.value < 0) {
+    internalCurrentIndex.value = 0
+  } else if (internalCurrentIndex.value >= internalPlaylist.value.length) {
+    internalCurrentIndex.value = internalPlaylist.value.length - 1
+  }
+}
+
+function getBufferedTime(context: InnerAudioContext): number {
+  const bufferedValue = (context as InnerAudioContext & { buffered?: unknown }).buffered
+  if (typeof bufferedValue === 'number') {
+    return bufferedValue
+  }
+  if (bufferedValue && typeof bufferedValue === 'object') {
+    const timeRangeLike = bufferedValue as { length?: number; end?: (index: number) => number }
+    if (typeof timeRangeLike.length === 'number' && timeRangeLike.length > 0 && typeof timeRangeLike.end === 'function') {
+      const lastBufferedTime = timeRangeLike.end(timeRangeLike.length - 1)
+      return Number.isFinite(lastBufferedTime) ? lastBufferedTime : 0
+    }
+  }
+  return 0
+}
+
+function initializeAudio() {
+  try {
+    cleanup()
+    currentTime.value = 0
+
+    try {
+      audioContext.value = uni.createInnerAudioContext() as unknown as InnerAudioContext
+    } catch (e) {
+      console.warn('音频上下文创建失败，尝试备用方案:', e)
+    }
+
+    if (!audioContext.value) {
+      throw new Error('无法创建音频上下文')
+    }
+
+    audioContext.value.src = currentSong.value.src || props.src
+    audioContext.value.autoPlay = false
+    audioContext.value.loop = false
+    audioContext.value.volume = currentVolume.value
+
+    audioContext.value.onCanplay(() => {
+      const context = audioContext.value
+      if (!context) return
+      duration.value = context.duration || 0
+      emit('canplay', {
+        duration: duration.value
+      })
+    })
+
+    audioContext.value.onPlay(() => {
+      isPlaying.value = true
+      startProgressTimer()
+      emit('play')
+    })
+
+    audioContext.value.onPause(() => {
+      isPlaying.value = false
+      stopProgressTimer()
+      emit('pause')
+    })
+
+    audioContext.value.onStop(() => {
+      isPlaying.value = false
+      stopProgressTimer()
+      emit('stop')
+    })
+
+    audioContext.value.onEnded(() => {
+      isPlaying.value = false
+      stopProgressTimer()
+      emit('ended')
+      handleAutoNext()
+    })
+
+    audioContext.value.onTimeUpdate(() => {
+      onTimeUpdate()
+    })
+
+    audioContext.value.onError((error: { errMsg: string; errCode: number }) => {
+      handleError('音频播放错误', error)
+      emit('error', { message: '音频播放错误', error })
+    })
+
+    isInitialized.value = true
+  } catch (error) {
+    handleError('初始化音频失败', error)
+  }
+}
+const onTimeUpdate = () => {
+  const context = audioContext.value
+  if (!context || isChangingProgress.value) return
+
+  currentTime.value = context.currentTime || 0
+  duration.value = context.duration || 0
+
+  // #ifdef H5 || APP
+  try {
+    buffered.value = getBufferedTime(context)
+  } catch (e) {
+    buffered.value = 0
+  }
+  // #endif
+
+  emit('timeupdate', {
+    currentTime: currentTime.value,
+    duration: duration.value
+  })
+}
+function play() {
+  if (!audioContext.value) {
+    initializeAudio()
+  }
+  if (audioContext.value) {
+    try {
+      audioContext.value.play()
+    } catch (error) {
+      handleError('播放失败', error)
+    }
+  }
+}
+
+function pause() {
+  if (audioContext.value) {
+    try {
+      audioContext.value.pause()
+    } catch (error) {
+      handleError('暂停失败', error)
+    }
+  }
+}
+
+function stop() {
+  if (audioContext.value) {
+    try {
+      audioContext.value.stop()
+      currentTime.value = 0
+    } catch (error) {
+      handleError('停止失败', error)
+    }
+  }
+}
+
+function seek(time: number) {
+  if (audioContext.value && time >= 0 && time <= duration.value) {
+    try {
+      audioContext.value.seek(time)
+
+      // #ifdef mp-weixin
+      if (!isPlaying.value) {
+        onTimeUpdate()
+      }
+      // #endif
+      // currentTime.value = time
+    } catch (error) {
+      handleError('跳转失败', error)
+    }
+  }
+}
+
+function setVolume(volume: number) {
+  const vol = Math.min(1, Math.max(0, volume))
+  currentVolume.value = vol
+  if (audioContext.value) {
+    audioContext.value.volume = vol
+  }
+  emit('volume-change', vol)
+}
+
+function handleTogglePlay() {
+  if (isPlaying.value) {
+    pause()
+  } else {
+    play()
+  }
+}
+
+function handlePrev() {
+  switchSong(
+    internalPlaylist.value.length === 0 ? -1 : internalCurrentIndex.value > 0 ? internalCurrentIndex.value - 1 : internalPlaylist.value.length - 1,
+    'prev'
+  )
+}
+
+function handleNext() {
+  switchSong(internalPlaylist.value.length === 0 ? -1 : (internalCurrentIndex.value + 1) % internalPlaylist.value.length, 'next')
+}
+
+function switchSong(index: number, eventType?: string) {
+  if (index < 0 || index >= internalPlaylist.value.length) {
+    if (eventType) {
+      emit(eventType as any, null)
+    }
+    return
+  }
+
+  const wasPlaying = isPlaying.value
+  internalCurrentIndex.value = index
+  currentTime.value = 0
+  duration.value = 0
+
+  const songChangeEvent = { index, song: internalPlaylist.value[index] }
+
+  if (eventType) {
+    emit(eventType as any, songChangeEvent)
+  }
+  emit('song-change', songChangeEvent)
+
+  nextTick(() => {
+    initializeAudio()
+    if (wasPlaying) {
+      play()
+    }
+  })
+}
+
+function handleAutoNext() {
+  switch (internalPlayMode.value) {
+    case 'single':
+      seek(0)
+      play()
+      break
+    case 'random':
+      if (internalPlaylist.value.length > 1) {
+        let randomIndex = Math.floor(Math.random() * internalPlaylist.value.length)
+        while (randomIndex === internalCurrentIndex.value) {
+          randomIndex = Math.floor(Math.random() * internalPlaylist.value.length)
+        }
+        switchSong(randomIndex)
+      } else {
+        seek(0)
+        play()
+      }
+      break
+    default:
+      handleNext()
+  }
+}
+
+function handleTogglePlayMode() {
+  const modes: Array<'list' | 'single' | 'random'> = ['list', 'single', 'random']
+  const currentIndex = modes.indexOf(internalPlayMode.value)
+  const nextMode = modes[(currentIndex + 1) % modes.length]
+  internalPlayMode.value = nextMode
+  emit('play-mode-change', nextMode)
+}
+
+function handleToggleFavorite() {
+  isFavorited.value = !isFavorited.value
+  emit('favorite-change', isFavorited.value, currentSong.value)
+}
+
+function handleToggleViewMode() {
+  const newMode = props.viewMode === 'normal' ? 'mini' : 'normal'
+  emit('mode-change', newMode)
+}
+
+function handleDragstart() {
+  isSliderTouching.value = true
+  isChangingProgress.value = true
+}
+
+function handleDragmove(event: { value: number | number[] }) {
+  const value = event.value as number
+  currentTime.value = (value / 100) * duration.value
+}
+
+function handleDragend(event: { value: number | number[] }) {
+  isSliderTouching.value = false
+  isChangingProgress.value = false
+  const value = event.value as number
+  const time = Number(((value / 100) * duration.value).toFixed(1))
+  seek(time)
+}
+
+function getTouchPoint(e: TouchEvent): TouchPoint | null {
+  const touch = (
+    e.touches && e.touches.length > 0 ? e.touches[0] : e.changedTouches && e.changedTouches.length > 0 ? e.changedTouches[0] : null
+  ) as TouchPoint | null
+  return touch
+}
+
+function getTouchCoordinate(touch: TouchPoint | null, axis: 'x' | 'y'): number {
+  if (!touch) return 0
+  if (axis === 'x') {
+    return touch.clientX || touch.pageX || touch.x || 0
+  }
+  return touch.clientY || touch.pageY || touch.y || 0
+}
+
+function handleTouchStart(e: TouchEvent) {
+  if (props.viewMode === 'mini' || props.viewMode === 'hideView') return
+  isTouching.value = true
+
+  const touch = getTouchPoint(e)
+  if (touch) {
+    touchStartX.value = getTouchCoordinate(touch, 'x')
+    touchStartY.value = getTouchCoordinate(touch, 'y')
+    touchMoveX.value = touchStartX.value
+    touchMoveY.value = touchStartY.value
+  }
+}
+
+function handleTouchMove(e: TouchEvent) {
+  if (!isTouching.value || props.viewMode === 'mini' || props.viewMode === 'hideView') return
+
+  const touch = getTouchPoint(e)
+  if (touch) {
+    touchMoveX.value = getTouchCoordinate(touch, 'x')
+    touchMoveY.value = getTouchCoordinate(touch, 'y')
+  }
+}
+
+function handleTouchEnd(e: TouchEvent) {
+  if (!isTouching.value || props.viewMode === 'mini' || props.viewMode === 'hideView') {
+    isTouching.value = false
+    return
+  }
+
+  const touch = getTouchPoint(e)
+  if (!touch) {
+    isTouching.value = false
+    return
+  }
+
+  const endX = getTouchCoordinate(touch, 'x')
+  const endY = getTouchCoordinate(touch, 'y')
+
+  const deltaX = endX - touchStartX.value
+  const deltaY = Math.abs(endY - touchStartY.value)
+  const minSwipeDistance = 80
+
+  if (Math.abs(deltaX) > deltaY * 1.5 && Math.abs(deltaX) > minSwipeDistance) {
+    if (deltaX < 0 && !isCoverHidden.value) {
+      isCoverHidden.value = true
+    } else if (deltaX > 0 && isCoverHidden.value) {
+      isCoverHidden.value = false
+    }
+  }
+
+  isTouching.value = false
+  touchStartX.value = 0
+  touchStartY.value = 0
+  touchMoveX.value = 0
+  touchMoveY.value = 0
+}
+
+function handleCoverError() {
+  isCoverHidden.value = false
+}
+
+function updateCurrentLyric(time: number) {
+  if (!currentLyrics.value.length) return
+
+  for (let i = currentLyrics.value.length - 1; i >= 0; i--) {
+    if (time >= currentLyrics.value[i].time) {
+      if (currentLyricIndex.value !== i) {
+        currentLyricIndex.value = i
+      }
+      break
+    }
+  }
+}
+
+function scrollToCurrentLyric() {
+  if (currentLyricIndex.value >= 0) {
+    lyricsScrollTop.value = currentLyricIndex.value * 60
+  }
+}
+
+function formatTime(time: number): string {
+  if (isNaN(time) || time < 0) return '00:00'
+  return dayjs(time * 1000).format('mm:ss')
+}
+
+function startProgressTimer() {
+  stopProgressTimer()
+  progressTimer.value = setInterval(() => {
+    const context = audioContext.value
+    if (context && isPlaying.value && !isChangingProgress.value) {
+      currentTime.value = context.currentTime || 0
+      duration.value = context.duration || 0
+      // #ifdef H5 || APP
+      try {
+        buffered.value = getBufferedTime(context)
+      } catch (e) {
+        buffered.value = 0
+      }
+      // #endif
+    }
+  }, 200)
+}
+
+function stopProgressTimer() {
+  if (progressTimer.value) {
+    clearInterval(progressTimer.value)
+    progressTimer.value = null
+  }
+}
+
+function handleError(message: string, error: any) {
+  console.error(`[oxy-voice-player] ${message}:`, error)
+  emit('error', { message, error })
+}
+
+function cleanup() {
+  try {
+    stopProgressTimer()
+    if (audioContext.value) {
+      audioContext.value.destroy()
+      audioContext.value = null
+    }
+    isInitialized.value = false
+  } catch (error) {
+    console.error('清理资源失败:', error)
+  }
+}
+
+onMounted(() => {
+  if (props.src || (props.playlist && props.playlist.length > 0)) {
+    initializeAudio()
+    if (isPlaying.value) {
+      play()
+    }
+  }
+})
+
+onUnmounted(() => {
+  cleanup()
+})
+
+defineExpose<VoicePlayerExpose>({
+  play,
+  pause,
+  stop,
+  seek,
+  setVolume,
+  prev: handlePrev,
+  next: handleNext,
+  switchToSong: switchSong,
+  getPlayState: () => ({
+    isPlaying: isPlaying.value,
+    currentTime: currentTime.value,
+    duration: duration.value,
+    currentSong: currentSong.value
+  })
+})
+</script>
+<style lang="scss" scoped>
+@import './index.scss';
+</style>