今天要來做聲音操控版，點按圖中的每個按鈕，就會播放音檔，而當我同時又點了別的按鈕，就會暫停原本的音檔，播放別的音檔，蠻有趣的 ヽ(✿ﾟ▽ﾟ)ノ 程式碼其實不多，不過很吃JS的基本觀念，那我們直接開始吧

事前準備

1. 找3-5個mp3音檔，這裡用的是Pixabay 免費音樂，若想要看看其他平台，可以點此

運用知識點羅列

• HTML

• CSS

• JS

流程講解

• HTML

    <audio id="monday" src="音訊位址">Monday</audio>
    <audio id="tuesday" src="音訊位址">Tuesday</audio>
    <audio id="wednesday" src="音訊位址">Wednesday</audio>
    <audio id="Thursday" src="音訊位址">Thursday</audio>
    <audio id="friday" src="音訊位址">Friday</audio>
    
    <div id="buttons"></div>

這裡不需要在<audio>標籤內放入<source>標籤，因為我們要靠javaScript去操控
所以下面會先放上javaScript的程式碼，最後才是css

• JS
  將<audio>標籤中的id值放入陣列中

let sounds = ["monday", "tuesday", "wednesday", "thursday", "friday"];

播放和暫停功能

sounds.forEach((sound) => {
  let btn = document.createElement("button");
  btn.classList.add("btn");
  btn.innerText = sound;
  btn.addEventListener("click", () => {
    stopSounds();
    document.getElementById(sound).play();
    //上面的sound不需用字串符號包起來，因為它本身是一個變數，代表audio標籤內的id
  });
  document.getElementById("buttons").appendChild(btn);
});

function stopSounds() {
  sounds.forEach((sound) => {
    let song = document.getElementById(sound);
    song.pause();
    song.currentTime = 0;
  });
}

這裡有幾個重要的知識點提要:

1. createElement => 我們利用它建立一個<button>標籤
2. classList.add("class的值") => 為前述建立的<button>標籤加入class屬性
3. play()和pause()是HTML5新增的API，不用傳入任何參數，我們利用它來控制音訊播放
4. currentTime 屬性設置為0，代表每個音檔會從0秒的地方開始播放起

若想看以上知識點的詳細可以點選大約文章一開始處的【運用知識點羅列】

• CSS
  大局配置

* {
  box-sizing: border-box;
}

body {
  background-color: rgb(214, 181, 214);
  color: white;
  margin: 0;
  padding: 0;
  display: flex; /*讓內容垂直置中*/
  flex-wrap: wrap;  //寬度不夠時自動換行
  justify-content: center;
  align-items: center;
  height: 100vh;
  overflow: hidden;
  text-align: center;
}

與javaScript配合的部分

.btn {
  border-radius: 5px;
  border: 0; /*或none*/
  margin: 10px;
  padding: 10px;
  font-size: 18px;
  cursor: pointer;
}
.btn:hover {
  opacity: 0.8;
}
.btn:focus {
  outline: 0; /*或none*/
}

附上codepen連結 https://codepen.io/hangineer/pen/ExLZJvX

補充

1. Border & outline- 金魚都能懂的CSS必學屬性
2. removeChild()
3. replaceChild()
4. childNodes

summary 總結

你可以試著為這個project做點變化，除了可以透過click去操控聲音面板，那要如果今天想要鍵盤友善，透過鍵盤事件要怎麼做呢? 到時候再把答案放在留言區ヽ(✿ﾟ▽ﾟ)ノ

所學不精，若有解說不夠詳盡或是錯誤歡迎指教，感激不盡!那明天見囉 BYE BYE~

參考資料

50 Projects In 50 Days - HTML, CSS & JavaScript
audio tag