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秒輕鬆生成圖片

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

3個 ChatGPT 輸入到輸出實驗,第二大腦筆記用 AI 生成文章報告

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

如何為筆記命名,建立搜尋規則?我的標題、分類、標籤命名法

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

Draw.io 中文線上製作流程圖首選!專業水準完全免費

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

Google 表單自動關閉回覆教學:時間人數到達就過期