H5 music player (including source code and examples)
H5 music player based on Angular+ionic, source code: https://gitee.com/CrimsonHu/h5-music-player
Example address
It is recommended to use original chrome or edge to access: http://intelyes.club:5300/
Function
- Real-time lyrics display
- Supports lyrics phonetic notation and translation display (this code uses Japanese kana as an example)
- Click on the lyrics to jump to the corresponding time in real time
- audio visualization
Run method
Install nodejs, as well as angular-cli (npm install -g @angular/cli) and ionic-cli (npm install -g @ionic/cli) npm install, then
npm start, and visit http://localhost:5300/ with the browser
Code description
Let me explain the main code locations: the red boxes are the audio visualization implementation, the two player implementations provided by H5, and the music playback page. The picture
above is the lyrics file. You can add new songs and lyrics according to my format. Because I need to display various contents such as kana phonetic notation, pronunciation, and translation, I did not write it according to the standard lrc. The trouble is to manually check the time of each lyric.
Some songs I just annotated in the list because I didn’t have time to sort out the lyrics.
Package deployment
It can be packaged directly into web, or it can be packaged into apk or ios application.
For details on the packaging methods for Android and ios, please refer to ionic official documentation. The corresponding packaging command has been written in package.json.
Screenshot example
