This tutorial is mainly to show the new additions to HTML5
The above picture is the UI interface of this audio player, which also hides a playlist of songs. Except for the portrait image on the big background and the star rating of the song, the entire player's UI uses the picture and is drawn by CSS and font-face. The only things that seem difficult are the production of CDs and discs. When the song is played, both CDs and discs have an animation interaction effect. This will be explained in the later part. Click on the player's CD to open the playlist ~
Because this tutorial is mainly to show the use of the Dom API of the new <audio> tag and audio element added to Html5, the draw of the player UI will not be explained in detail here. If you have any questions, you can view the comments of the CSS file of the case yourself or leave a message below.
Main functions:1. Play, pause, previous song, next song, volume increase and decrease
2. Click on the CD to open and close the playlist
3. You can drag the local music file to the player for playback.
Html structure
Copy the code