Online music player code written in HTML, CSS, JS shared by author Nguyen Anh Nhan on Github. You can download and edit the interface, song list to your liking. The author also includes detailed instructions for you to customize to your liking.
| Join the channel Telegram belong to AnonyViet 👉 Link 👈 |
Download Code Listen to Music Online
According to the author, the Code for Listening to Music Online uses HTML and CSS quite simply, so it doesn’t need much explanation. There is one thing you need to note in the HTML page that is the Meta Tag: viewport. Why? Without this Meta tag, display on mobile devices will be problematic.
If you do not know about HTML, CSS you can Free course download shared by AnonyViet.
Link Source: MusicPlayer Repository (Github)
Demo: Demo Player
EXPLAIN CODE
To edit the playlist of Code Listen to Music Online, just edit variable songs(Array) in the following form:
Regarding Javascript, here are the following Functions:
- shuffle
- playPause
- showHover
- playFromClickedPos
- checkBuffering
- selectTrack
- initPlayer
Shuffle function:
This function will shuffle the items in the array in random order. For those of you who want to listen to music out of order, the tracks will be played randomly.
The playPause function:
This function Handles the click event on the Play/Pause button. Stop music/resume from last stop.
showHover function:
Here this function will be responsible for the click event on the slider showing the duration % of the track played. Click to play from where you just clicked.
When clicked, an argument is passed that is the information of the event. This event includes the mouse click position (Event.clientX is the horizontal position of the mouse on the web (The purpose is to find out where the mouse moves and calculate the time)). seekT is the distance from the starting point of the display bar to the point of the mouse. seekLoc is the value in seconds.
This function will be CALLED CONTINUOUSLY when the mouse hovers over the slider. (The purpose is to set the value)
hideHover function:
The mouse going out of the slider will call this event. The purpose is to reset the display range of the selected mouse part (from the starting point to the mouse position) to the starting point (sHover.width = 0).
In addition, this event also sets the timer text to the starting point.
The updateCurrTime function:
Call to set the time, if 100% (out of cards) then switch and set the time to start.
CheckBuffering function:
Check if the music has finished loading.
The selectTrack function:
Move track (forward/backward). In essence, it’s just increasing and decreasing the currIndex variable and setting the values ​​according to currIndex.
initPlayer function:
Start the player and assign the events sequentially.
Player is modified/developed from interface source of: CodePen
By: Nguyen Anh Nhan
