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

    回覆刪除

張貼留言

為了避免垃圾廣告留言過多,開始測試「留言管理」機制,讓我可以更容易回應讀者留言,並更簡單過濾掉廣告,但只要不是廣告留言都會通過審核。

這個網誌中的熱門文章

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

微軟 Bing AI 繪圖工具 Image Creator 免費開放,30秒輕鬆生成圖片

Arc 瀏覽器 windows 版測試心得,用四大介面改造升級專注工作流

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

個人知識管理的時間平衡心法,忙碌中我如何維持高效率輸入輸出

5 條「這時候,不要做」清單打破無意識行動模式的低效率循環

Google 表單的 10 個專業問卷調查設計秘密教學

如何用 ChatGPT 加速生成一份有圖有文的簡報,實戰案例教學

ChatGPT DALL-E 3 的7個特殊 AI 繪圖應用教學,勝過 Midjourney