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已写好相应的打包命令
截图示例