今天要來做聲音操控版,點按圖中的每個按鈕,就會播放音檔,而當我同時又點了別的按鈕,就會暫停原本的音檔,播放別的音檔,蠻有趣的 ヽ(✿゚▽゚)ノ 程式碼其實不多,不過很吃JS的基本觀念,那我們直接開始吧
知識點 | 使用說明 |
---|---|
audio tag | 存放音檔,一般會搭配<source> 使用(此project無) |
知識點 | 使用說明 |
---|---|
border | 設定按鈕不要有任何邊框樣式 |
outline | 設定按鈕:focus時的輪廓 |
知識點 | 使用說明 |
---|---|
Document.createElement( ) | 建立 HTML 元素(此為button標籤) |
classList.add( ) | 新增class="btn"去控制DOM |
forEach( ) | 迭代每個音檔元素 |
Node.appendChild( ) | 附加一個節點(元素)作為元素的最後一個子元素 |
HTMLMediaElement.play() | 播放音檔 |
HTMLMediaElement.pause( ) | 暫停音檔 |
HTMLMediaElement.currentTime | 回傳音檔播放的當前位置(以秒為單位) |
<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
<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;
});
}
這裡有幾個重要的知識點提要:
<button>
標籤<button>
標籤加入class屬性play()
和pause()
是HTML5新增的API,不用傳入任何參數,我們利用它來控制音訊播放若想看以上知識點的詳細可以點選大約文章一開始處的【運用知識點羅列】
* {
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
你可以試著為這個project做點變化,除了可以透過click去操控聲音面板,那要如果今天想要鍵盤友善,透過鍵盤事件要怎麼做呢? 到時候再把答案放在留言區ヽ(✿゚▽゚)ノ
所學不精,若有解說不夠詳盡或是錯誤歡迎指教,感激不盡!那明天見囉 BYE BYE~
50 Projects In 50 Days - HTML, CSS & JavaScript
audio tag
let sounds = ["monday", "tuesday", "wednesday", "thursday", "friday"]; //<audio> tag's id
sounds.forEach((sound, idx) => {
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-5去播放第一首~第五首歌
window.addEventListener("keyup", (e) => {
// console.log(e);
if (e.code == `Numpad${idx + 1}`) {
stopSounds();
document.getElementById(sound).play();
}
});
});