利用基本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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com 標誌

您的留言將使用 WordPress.com 帳號。 登出 /  變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 /  變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 /  變更 )

連結到 %s