利用基本HTML/CSS/JS手刻一個簡單的音樂撥放器吧!(30 Days challenge-18)

前言

這次一樣是個利用HTML/CSS/JS的基礎專案練習~!很久以前我在接觸JS30時就曾經刻過一個音樂撥放器，當時的作法相當的簡單，這次則是在動畫上稍微下了一點功夫，audio tag真的有很多我以前沒有把完過的屬性，還算是挺有趣的~! 雖然有時候會困惑自己到底做這樣的挑戰、寫這些簡單的專案、花時間打成文章是為了什麼，不過~就好玩嘛~!

專案介紹

這是一個利用基礎三元素打造的音樂撥放器，主要重點在於利用js去操作audio的各種屬性與事件

• 藉由event.srcElement內的duration&currentTime去讀取目前撥放的進度與總時長
• 透過audio.play() & audio.pause()去控制音樂撥放
• 監聽audio中的ended事件達成自動切換歌曲的效果

專案預覽

專案連結

github
demo