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,還支援哪些格式檔案?

    回覆刪除

張貼留言

相關文章:

這個網誌中的熱門文章

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

Google Maps 我的地圖完全教學!規劃自助旅行攻略

Messenger Lite 臉書即時通輕量版台灣下載開放,比較看看我該用哪一款?

To the Moon 繁中版登陸手機,經典說故事型 RPG 無劇透評析

Smallpdf 線上 PDF 轉檔 Word 與編輯免費全能工具,支援中文

五款免費中文 OCR 文字辨識軟體下載,建立強大無紙化辦公室

我所養成的 10 個最有生產力習慣,以及我如何養成這些習慣

Notion 把文件、任務、知識庫「無縫重組」的全新專案整理工具

YouTube 簡約黑色劇院介面正式推出,立即啟動不需改程式碼

SleepTown 遊戲化養成早起習慣,來自 Forest 台灣團隊開發