Audio Player

Copy<script setup lang="ts">
import {
AudioPlayerButton,
AudioPlayerDuration,
AudioPlayerProgress,
AudioPlayer,
AudioPlayerSpeed,
AudioPlayerSpeedButtonGroup,
AudioPlayerTime,
useAudioPlayer,
useAudioPlayerTime
} from "@/components/elevenlabs-ui/audio-player"
</script>

Copy<template>
  <AudioPlayer>
    <div class="flex items-center gap-4">
      <AudioPlayerButton />
      <AudioPlayerProgress class="flex-1" />
      <AudioPlayerTime />
      <span>/</span>
      <AudioPlayerDuration />
    </div>
  </AudioPlayer>
</template>

Copy<script setup lang="ts">
const track = {
  id: "track-1",
  src: "/audio/song.mp3",
  data: { title: "My Song", artist: "Artist Name" }
}
</script>

<template>
  <AudioPlayer>
   <AudioPlayerButton :item="track" />
   <AudioPlayerProgress />
 </AudioPlayer>
</template>

Copy<script setup lang="ts">
const tracks = [
  { id: "1", src: "/audio/track1.mp3", data: { title: "Track 1" } },
  { id: "2", src: "/audio/track2.mp3", data: { title: "Track 2" } },
  { id: "3", src: "/audio/track3.mp3", data: { title: "Track 3" } },
]
</script>

<template>
  <AudioPlayer>
    <div class="space-y-4">
      <div v-for="track in tracks"
        :key="track.id"
        class="flex items-center gap-4"
      >
        <AudioPlayerButton :item="track" />
        <span class="text-sm">{{ track.data.title }}</span>
      </div>
    
      <AudioPlayerProgress class="w-full" />
  
      <div class="flex gap-2 text-sm">
        <AudioPlayerTime />
        <span>/</span>
        <AudioPlayerDuration />
      </div>
    </div>
  </AudioPlayer>
</template>

Copy<AudioPlayer>
  <slot />
</AudioPlayer>

Copyinterface AudioPlayerItem<TData = unknown> {
 id: string | number
 src: string
 data?: TData
}

Copy<AudioPlayerSpeed variant="ghost" size="icon" />

Copy<AudioPlayerSpeedButtonGroup :speeds="[0.5, 0.75, 1, 1.5, 2]" />

Copyconst {
  ref, // RefObject<HTMLAudioElement>
  activeItem, // Current playing item
  duration, // Track duration in seconds
  error, // MediaError if any
  isPlaying, // Playing state
  isBuffering, // Buffering state
  playbackRate, // Current playback speed
  isItemActive, // Check if an item is active
  setActiveItem, // Set the active item
  play, // Play audio
  pause, // Pause audio
  seek, // Seek to time
  setPlaybackRate, // Change playback speed
} = useAudioPlayer<TData>()

Copy<script setup lang="ts">
const { play, activeItem } = useAudioPlayer()

function handlePlayNext() {
const nextTrack = getNextTrack(activeItem.value?.id)
  if (nextTrack) {
    play(nextTrack)
}
}
</script>

<template>
  <button @click="handlePlayNext">
    Next Track
  </button>
</template>

Copyconst time = useAudioPlayerTime() // Current time in seconds

Copy<script setup lang="ts">
import { computed } from 'vue'

const time = useAudioPlayerTime()
const { duration } = useAudioPlayer()

const progressPercentage = computed(() => {
 return duration.value
    ? (time.value / duration.value) * 100
    : 0
})
</script>

<template>
 <div>
   Progress: {{ progressPercentage.toFixed(1) }}%
 </div>
</template>

Copy<template>
  <AudioPlayer>
    <div class="flex items-center gap-4">
      <AudioPlayerButton />
      <AudioPlayerTime />
      <AudioPlayerProgress class="flex-1" />
      <AudioPlayerDuration />
      <AudioPlayerSpeed />
    </div>
  </AudioPlayer>
</template>

Copy<script setup lang="ts">
const {play, pause, isPlaying, seek, duration, setPlaybackRate } = 
  useAudioPlayer()
</script>

<template>
  <div class="space-y-4">
    <button @click="isPlaying ? pause() : play()">
      {{ isPlaying ? 'Pause' : 'Play' }}
    </button>

    <button @click="seek(0)">
      Restart
    </button>

    <button @click="duration && seek(duration * 0.5)">
      Jump to 50%
    </button>

    <button @click="setPlaybackRate(1.5)">
      Speed 1.5x
    </button>
  </div>
</template>

Copy<script setup lang="ts">
const { error, activeItem } = useAudioPlayer()
</script>

<template>
  <div v-if="error" class="text-red-500">
    Failed to load: {{ activeItem?.src }}
    <br />
    Error: {{ error.message }}
  </div>

  <AudioPlayerButton v-else />
</template>