H5音乐播放器（包含源码与示例）

H5音乐播放器（包含源码与示例）

基于Angular+ionic的H5音乐播放器，源码：https://gitee.com/CrimsonHu/h5-music-player

示例地址

建议使用原版chrome或edge访问：http://intelyes.club:5300/

功能

1. 实时歌词显示
2. 支持歌词注音与翻译显示（本代码以日语假名为例）
3. 点击歌词能实时跳转至相应时间
4. 音频可视化

运行方法

安装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已写好相应的打包命令

截图示例