archy/neode-ui/src/composables/useAudioPlayer.ts

import { ref, computed } from 'vue'

const audio = ref<HTMLAudioElement | null>(null)
const currentSrc = ref<string | null>(null)
const currentName = ref('')
const playing = ref(false)
const currentTime = ref(0)
const duration = ref(0)
const error = ref<string | null>(null)
let initialized = false

/** Create the Audio element and attach listeners once */
function init() {
  if (initialized) return
  initialized = true
  audio.value = new Audio()
  audio.value.addEventListener('timeupdate', () => {
    currentTime.value = audio.value?.currentTime ?? 0
  })
  audio.value.addEventListener('loadedmetadata', () => {
    duration.value = audio.value?.duration ?? 0
    error.value = null
  })
  audio.value.addEventListener('ended', () => {
    playing.value = false
  })
  audio.value.addEventListener('pause', () => {
    playing.value = false
  })
  audio.value.addEventListener('play', () => {
    playing.value = true
    error.value = null
  })
  audio.value.addEventListener('error', () => {
    playing.value = false
    error.value = 'Could not play audio. File Browser may not be running.'
  })
}

function play(src: string, name: string) {
  init()
  error.value = null

  if (currentSrc.value === src && playing.value) {
    audio.value!.pause()
    return
  }

  if (currentSrc.value !== src) {
    audio.value!.src = src
    currentSrc.value = src
    currentName.value = name
  }

  audio.value!.play()
}

function pause() {
  audio.value?.pause()
}

function seek(time: number) {
  if (audio.value) {
    audio.value.currentTime = time
  }
}

function stop() {
  if (audio.value) {
    audio.value.pause()
    audio.value.currentTime = 0
  }
  playing.value = false
  currentSrc.value = null
  currentName.value = ''
}

const progress = computed(() => {
  if (duration.value === 0) return 0
  return (currentTime.value / duration.value) * 100
})

export function useAudioPlayer() {
  return {
    play,
    pause,
    seek,
    stop,
    playing,
    currentName,
    currentTime,
    duration,
    progress,
    currentSrc,
    error,
  }
}