Admin 元件
Audio Player
音訊播放器（vidstack）。播放、快進快退、音量、播放速度、時間顯示。
安裝
Terminal
pnpm dlx shadcn-vue add @admin/audio-playerimport { AdminAudioPlayer, AdminAudioPlayerControls, AdminAudioPlayerProgress, AdminAudioPlayerSettings, AdminAudioPlayerTime, AdminAudioPlayerToolbar, AdminAudioPlayerVolume} from '@/components/admin/audio-player'vidstack 是一組 web components（<media-player> / <media-provider> / …），需要告訴 Vue 編譯器把它們當成 native custom element，否則 dev console 會出現 [Vue warn]: Failed to resolve component: media-* 警告。
Nuxt 3 / 4
nuxt.config.ts
export default defineNuxtConfig({ vue: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('media-') } }})Vue 3 + Vite
vite.config.ts
import vue from '@vitejs/plugin-vue'import { defineConfig } from 'vite'export default defineConfig({ plugins: [ vue({ template: { compilerOptions: { isCustomElement: (tag) => tag.startsWith('media-') } } }) ]})用法
傳入 src 即可播放音檔，預設組裝包含進度條、時間顯示、播放控制（播放、快退 10 秒、快進 10 秒）、設定（播放速度）與音量。
<script setup lang="ts">import { AdminAudioPlayer } from '@/components/admin/audio-player'</script><template> <admin-audio-player src="https://files.vidstack.io/sprite-fight/audio.mp3" /></template>API 參考
組成
<template> <admin-audio-player> <admin-audio-player-progress /> <admin-audio-player-toolbar> <admin-audio-player-time /> <admin-audio-player-controls /> <admin-audio-player-settings /> <admin-audio-player-volume /> </admin-audio-player-toolbar> </admin-audio-player></template>admin-audio-player
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
src* | MediaSrc | — | 音訊來源（vidstack `MediaSrc` 格式） |
class | ClassValue | — | 根元素之自訂 class |
* 代表必填
Events
| 名稱 | Payload | 說明 |
|---|---|---|
ended | — | 播放結束時觸發 |
error | Error | 載入或播放發生錯誤時觸發 |
pause | — | 暫停播放時觸發 |
play | — | 開始播放時觸發 |
timeUpdate | number | 播放進度更新時觸發，payload 為當前秒數 |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-audio-player-controls
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
admin-audio-player-progress
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
admin-audio-player-settings
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
admin-audio-player-time
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
admin-audio-player-toolbar
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
Slots
| 名稱 | Bindings | 說明 |
|---|---|---|
default | {} | — |
admin-audio-player-volume
Props
| 名稱 | 型別 | 預設值 | 說明 |
|---|---|---|---|
class | ClassValue | — | 根元素之自訂 class |
注意事項
- 必須加
isCustomElement設定：未加上vue.compilerOptions.isCustomElement規則時，dev console 會對每個<media-*>元素噴Failed to resolve component警告。詳細寫法見上方「安裝」章節。 - 不支援 SSR：vidstack 為 browser-only；元件殼不含
<ClientOnly>（engine 仍以defineAsyncComponent拆 chunk）。Nuxt 請自行以<ClientOnly>包覆；純 CSR 不需處理。見 安裝 · SSR。 - 音量設定跨實例共享：所有
<AdminAudioPlayer>與<AdminVideoPlayer>實例共用同一組localStoragekey（admin:player:volume/admin:player:muted）；多個分頁同時開啟時不會即時同步，避免使用者剛調整的音量被其他分頁覆蓋掉。 - 播放速度不記憶：每次元件 mount 都重設為
1；如需專案級記憶請消費端自行包裝。