Online music listening code written in HTML, CSS, JS is shared by author Nguyen Anh Nhan on Github. You can download and edit the interface and 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 Online Music Listening Code using HTML and CSS is quite simple so it doesn't need much explanation. One thing you need to pay attention to on the HTML page is the Meta Tag: viewport. Why? Because without this Meta tag, display on mobile devices will have problems.
If you don't know HTML and CSS, you can Download the course for free shared by AnonyViet.
Link Source: MusicPlayer Repository (Github)
Demo: Demo Player
CODE EXPLANATION
To edit the playlist of Online Music Listening Code, just edit variable songs. songs(Array) in the following form:
Regarding Javascript, there are the following Functions:
- shuffle.shuffle
- playPause
- showHover
- playFromClickedPos
- checkBuffering
- selectTrack
- initPlayer
Shuffle function:
This function will mix the order of items in the array in random order. For those who want to listen to music out of order, the songs will be played randomly.
playPause function:
This function Handle event click on the Play/Pause button. Stop music/resume playback from last stop.
showHover function:
Here this function will be responsible for the click event on the slider displaying the % duration of the song played. Click to play from where you just clicked.
When clicked, an argument is passed which is information about the event. This Event includes the mouse click position (Event.clientX is the mouse position calculated horizontally across the web (The purpose is to find out where the mouse moves to calculate the time)). seekT is the distance from the starting point of the display bar to the mouse point. 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:
Mouse moving away from the slider will call this event. The purpose is to reset the strip displaying 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.
function updateCurrTime:
Call to set the time. If it's 100% (all cards are gone), change the cards and set the time to start.
checkBuffering function:
Check if the music has finished loading.
selectTrack function:
Change tracks (forward/backward). Essentially, it's just increasing or decreasing the currIndex variable and setting the values according to currIndex.
initPlayer function:
Start the player and sequentially assign events.
Player is edited/developed from the interface source of: CodePen
According to: Nguyen Anh Nhan
