forked from BRETT/BRETT
85 lines
2.6 KiB
Vue
85 lines
2.6 KiB
Vue
<script setup lang="ts">
|
|
import { useMediaControls } from '@vueuse/core'
|
|
|
|
defineProps<{
|
|
src: string
|
|
name: string
|
|
}>()
|
|
|
|
const audioRef = ref<HTMLAudioElement>()
|
|
const { playing, currentTime, duration, volume, muted } = useMediaControls(audioRef)
|
|
|
|
function toggle() {
|
|
playing.value = !playing.value
|
|
}
|
|
|
|
function seek(event: Event) {
|
|
currentTime.value = Number((event.target as HTMLInputElement).value)
|
|
}
|
|
|
|
function formatTime(sec: number) {
|
|
if (!Number.isFinite(sec)) return '0:00'
|
|
const m = Math.floor(sec / 60)
|
|
const s = Math.floor(sec % 60).toString().padStart(2, '0')
|
|
return `${m}:${s}`
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div
|
|
class="flex w-full max-w-md items-center gap-2.5 rounded-md border bg-muted/50 px-3 py-2"
|
|
@click.stop
|
|
>
|
|
<audio ref="audioRef" :src="src" preload="metadata" class="hidden" />
|
|
<button
|
|
type="button"
|
|
class="flex size-8 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-accent"
|
|
:aria-label="playing ? 'Pause' : 'Abspielen'"
|
|
@click="toggle"
|
|
>
|
|
<Icon name="ph:pause-fill" v-if="playing" class="size-4" />
|
|
<Icon name="ph:play-fill" v-else class="size-4" />
|
|
</button>
|
|
<span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ formatTime(currentTime) }}</span>
|
|
<input
|
|
type="range"
|
|
min="0"
|
|
:max="Number.isFinite(duration) ? duration : 0"
|
|
step="0.1"
|
|
:value="currentTime"
|
|
aria-label="Wiedergabeposition"
|
|
class="min-w-0 flex-1 cursor-pointer accent-primary"
|
|
@input="seek"
|
|
>
|
|
<span class="shrink-0 text-xs tabular-nums text-muted-foreground">{{ formatTime(duration) }}</span>
|
|
<button
|
|
type="button"
|
|
class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full transition-colors hover:bg-accent"
|
|
:aria-label="muted ? 'Ton an' : 'Stumm'"
|
|
@click="muted = !muted"
|
|
>
|
|
<Icon name="ph:speaker-x-fill" v-if="muted" class="size-3.5" />
|
|
<Icon name="ph:speaker-high-fill" v-else class="size-3.5" />
|
|
</button>
|
|
<input
|
|
v-model.number="volume"
|
|
type="range"
|
|
min="0"
|
|
max="1"
|
|
step="0.05"
|
|
aria-label="Lautstärke"
|
|
class="w-14 min-w-0 shrink-0 cursor-pointer accent-primary"
|
|
:class="muted && 'opacity-40'"
|
|
>
|
|
<a
|
|
:href="src"
|
|
:download="name"
|
|
class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded-full text-muted-foreground transition-colors hover:bg-accent hover:text-foreground"
|
|
aria-label="Herunterladen"
|
|
title="Herunterladen"
|
|
>
|
|
<Icon name="ph:download-fill" class="size-3.5" />
|
|
</a>
|
|
</div>
|
|
</template>
|