H5音樂播放器（包含原始碼與示例）
基于Angular+ionic的H5音樂播放器，原始碼：https://gitee.com/CrimsonHu/h5-music-player
示例地址
建議使用原版chrome或edge訪問：http://intelyes.club:5300/
功能
- 實時歌詞顯示
- 支持歌詞注音與翻譯顯示（本代碼以日語假名為例）
- 點擊歌詞能實時跳轉至相應時間
- 音頻可視化
運行方法
安裝nodejs，以及angular-cli（npm install -g @angular/cli）與ionic-cli（npm install -g @ionic/cli）
npm install，然后npm start，瀏覽器訪問http://localhost:5300/
代碼說明
講解下主要代碼位置：紅框中分別為音頻可視化實作、H5提供的兩種播放器實作、音樂播放頁面
上圖是歌詞檔案，按照我的格式可以自己添加新的歌曲和歌詞，因為要顯示假名注音、讀音、翻譯等各種內容，所以我就沒有按照標準lrc來寫，麻煩的就是要手動對下每句歌詞的時間，
有些歌曲因為沒有時間整理歌詞，我就在串列里面注釋了，
打包部署
可直接打包成web，也可以打包成apk或ios應用
安卓與ios的打包方法詳見ionic官方檔案，package.json已寫好相應的打包命令
截圖示例
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/275505.html
標籤：其他