HTML5 MP3 Player 免裝音樂播放器用瀏覽器聽硬碟裡的mp3音樂

html 5 mp3 player-00

創造力很強大的16歲程式高手,繼之前推出了「Drag2Up 直接拖曳檔案、圖片到社群論壇留言欄就能上傳分享!」、「Cloud Save 免上傳下載,線上圖片,檔案直接另存新檔到雲端硬碟」這兩款創新的網路工具後,現在又推出了一個新的網站:MP3 Player」,簡潔明瞭的名字,告訴用戶可以把這個網站直接當做電腦中的mp3音樂播放器軟體。

「MP3 Player」是一個「網站」,不過它的內容則是以HTML5規範製作出來的音樂播放web app,目前必須使用「Google Chrome」瀏覽器來操作,網站不需登入,操作起來也非常簡單,就像mp3音樂播放軟體一樣可以選取硬碟中的mp3檔案、規劃播放清單、隨機播放、調整音量等等。

當然mp3 player只是一個簡單的實驗性作品,但從「一個直接用瀏覽器播放硬碟音樂檔案」的簡單工具中,似乎也可以看到「未來瀏覽器作業系統」的可行性。

 

01.

使用Google Chrome瀏覽器進入「MP3 Player」網站,會看到網頁中央有一個〔選擇檔案〕的按鈕,請點擊下去。

html 5 mp3 player-01

 

02.

接著就會要你選擇硬碟中的mp3音樂檔案資料夾,它可以自動搜尋好幾層的子資料夾,所以你可以設定抓取儲存好幾張專輯的母資料夾,mp3 player就會把裡面所有的歌曲都找出來。

html 5 mp3 player-02

 

03.

找到的歌曲會先列出在左方的列表中,這時候你可以點擊左方列表中的幾首歌曲,將它們加入到「右方」的真正播放清單中。

html 5 mp3 player-03

 

04.

好啦!接著點擊右方播放清單裡的歌曲,就能開始聽歌了!而在網頁下方也可以看到一些播放控制工具,例如調整音量、播放進度,還可以點擊「Shuffle」隨機播放。

html 5 mp3 player-04

 

05.

做為一個單純網頁,MP3 Player讓我們直接用瀏覽器聽歌,不需要另外安裝或另外打開MP3音樂播放軟體,只佔用一個小小分頁的空間,非常的有趣,推薦大家可以玩玩看。

html 5 mp3 player-05

留言

  1. 貌似有些日文歌檔名會亂碼說有點可惜~
    話說火狐啥時能用勒(敲碗)

    回覆刪除
  2. 他的程式碼其實還算少的
    可以考慮來研究看看......

    至於樓上說的檔名,應該是網頁預設值是系統編碼
    嘗試將網頁編碼改成UTF-8看看能不能解決

    回覆刪除
  3. 清單有多些功能更好

    回覆刪除
  4. 有十足潛力

    如果能記憶播放清單 操作更順暢平滑

    可以取代大部分專門音樂播放軟體了...

    回覆刪除
  5. 他是不是會綁架首頁??

    回覆刪除
  6. 不會

    (你可能是用google瀏覽器,把它釘成應用程式分頁(固定分頁),結果下次打開時預設開啟這個網站?這是google瀏覽器的預設功能 )

    回覆刪除
  7. 中文歌名我都不能顯示耶

    回覆刪除
  8. 挺方便的,謝謝分享:D

    回覆刪除
  9. 只有GOOGLE遊覽器能用 蠻無言的...

    回覆刪除
  10. 點上方的 filter library
    可做 關鍵字過濾 方便尋找歌曲(不會對檔名過濾),
    過慮包含 歌曲名 專輯名 與 歌手 ,
    只要符合條件, 而也可以部份關鍵字搜尋!
    例:目前List 內有一首 My Love Song
    打 My ove 一樣會顯示出來!

    支援Ogg格式音樂檔!

    缺點:
    所有歌曲資訊只讀IDv3標籤資訊
    本身電腦與該音樂檔資訊
    在電腦內無法正常顯示則無法正常顯示
    (改編碼未必能正常顯示)

    回覆刪除
  11. 看來很讚
    可是我是火狐基本教義派
    火狐也出個元件吧Orz...

    回覆刪除
  12. 不能顯示中文曲名+1
    感覺設計初衷很好,
    希望對外國語言的支援度可以提升~

    回覆刪除
  13. 除了mp3,還支援哪些格式檔案?

    回覆刪除
  14. Chennai Trainings
    Chennai Trainings is one of the best training institute in Chennai which provides various modes of trainings like classroom training, online training and live trainings. We provide both weekdays training and Weekend Trainings with flexible timing.
    ETL Testing Training In Chennai
    Java Training In Chennai
    Python Training In Chennai
    R Programming Training In Chennai
    Salesforce Developer Training In Chennai
    SAP HANA Training In Chennai
    SAP MM Training In Chennai
    Selenium Training In Chennai
    Digital Marketing Training In Chennai
    Angular js Training In Chennai

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

全家沖印、 7-11 列印照片誰好用?立可得與 ibon教學+比較表

OpenShot 免費中文版影片剪輯軟體,何必用精簡版的威力導演

不需買印表機也免隨身碟, 7-11 全家雲端列印超方便教學

Android 11 七個新功能實用技巧教學,螢幕錄製、智慧桌面到對話管理

自動化圖片去背教學!只需 Word 或 PowerPoint 搞定

我如何安排每日行動清單的步驟拆解?2020 版 7 個關鍵 Tips

燃盡清單法 Burner List,規劃待辦清單的極簡專注格式

訪客掃描 QR Code 自動連上教室 WiFi,10秒列印精美 WiFi 圖卡

Weekly 簡潔提升專注的每週計畫清單,提供列印成一頁待辦清單