📅 我們繼續 50 個小項目挑戰！—— SoundBoard 組件
-
倉庫地址：https://github.com/SunACong/50-vue-projects
-
項目預覽地址：https://50-vue-projects.vercel.app/
🎯 組件目標
-
實現一個響應式按鈕面板，點擊某一按鈕即可播放對應音頻。
-
點擊新按鈕時自動停止其他音效，確保每次只有一個音頻在播放。
-
利用 Vue3 組合式 API + 原生 DOM 控制，打造高效小巧的功能組件。
🛠? 技術實現點
-
使用
Vue3<script setup>編寫邏輯，簡潔明了。 -
利用
ref存儲音頻列表數據，支持動態遍歷。 -
使用
document.getElementById原生API獲取音頻DOM元素，控制播放行為。 -
Tailwind CSS控制按鈕樣式及懸停動畫，增強交互感。
🧱 組件實現源碼（含注釋）
<template><div class="flex h-screen items-center gap-10 justify-center text-black"><!-- 遍歷音效列表，渲染按鈕，每個按鈕對應一個 <audio> 元素 --><divclass="rounded-lg border-2 bg-gray-300 px-8 py-4 hover:scale-105 hover:bg-gray-400"v-for="(item, index) in soundList":key="item.id"@click="handlePlayAudio(index)">{{ item.name }}<audio :id="item.id" :src="item.src"></audio></div></div>
</template><script setup>
import { ref } from 'vue'// 音效播放控制函數
const handlePlayAudio = (index) => {// 暫停所有音效，重置播放進度soundList.value.forEach((sound) => {const audio = document.getElementById(sound.id)audio.pause()audio.currentTime = 0})// 播放當前選中的音效const selectedAudio = document.getElementById(soundList.value[index].id)selectedAudio.play()
}// 音效列表：可以根據需求拓展為動態加載或遠程配置
const soundList = ref([{ id: 1, name: 'applause 👏', src: '/src/assets/sounds/applause.mp3' },{ id: 2, name: 'boo 😒', src: '/src/assets/sounds/boo.mp3' },{ id: 3, name: 'gasp 😲', src: '/src/assets/sounds/gasp.mp3' },{ id: 4, name: 'tada 🎉', src: '/src/assets/sounds/tada.mp3' },{ id: 5, name: 'victory 🏆', src: '/src/assets/sounds/victory.mp3' },{ id: 6, name: 'wrong ?', src: '/src/assets/sounds/wrong.mp3' },
])
</script>
💡 樣式與邏輯講解
- 樣式部分
| 類名 | 功能描述 |
|---|---|
flex h-screen items-center justify-center | 垂直居中音效按鈕面板 |
gap-10 | 按鈕之間間距 |
rounded-lg border-2 px-8 py-4 | 按鈕基礎樣式 |
hover:scale-105 hover:bg-gray-400 | 鼠標懸停時的放大 + 背景變化動畫 |
text-black | 文字顏色 |
- 邏輯部分
| 函數 | 功能 |
|---|---|
handlePlayAudio(index) | 播放第 index 個音效，并停止其他音頻 |
soundList | 音效數據源，每個元素包含 id、name、src 三個字段 |
document.getElementById() | 獲取原生 DOM 元素，用于控制 標簽 |
🧾 常量定義 + 組件路由建議
constants/index.js 添加組件預覽常量：
export const projectList = [
{id: 9,title: 'Sound Board',image: 'https://50projects50days.com/img/projects-img/9-sound-board.png',link: 'SoundBoard',},
]
router/index.js 中添加路由選項：
{path: '/SoundBoard',name: 'SoundBoard',component: () => import('@/projects/SoundBoard.vue'),},
🧾 總結
本組件展示了如何在 Vue3 中結合 DOM 操作與響應式數據，實現一個輕量級、趣味性十足的音效選擇器,非常適合作為日常 UI 組件庫的娛樂增強模塊。
👉 下一篇，我們將完成 Dad Jokes組件，一個利用公共的API獲取數據隨機生成笑話的組件！🚀
