How to make a simple Music player with JS+html5
This article mainly introduces "how to make a simple music player with JS+html5". In daily operation, I believe many people have doubts about how to make a simple music player with JS+html5. The editor consulted all kinds of materials and sorted out simple and easy-to-use methods of operation. I hope it will be helpful to answer the doubts about "how to make a simple music player with JS+html5". Next, please follow the editor to study!
1.HTML
Tags define sounds, such as music or other audio streams. Its main property is src: the URL,controls of the audio to be played: if this property appears, a control, such as a play button, is displayed to the user.
The main labels are as follows:
Li Yugang-I happened to meet you
Play pause the previous song and the next song
CSS style is not provided here, only functional description.
2.js
Var btn1 = document.getElementById ("btn-play"); btn1.onclick = function () {if (audio.paused) {audio.play ();}} var btn2 = document.getElementById ("btn-stop"); btn2.onclick = function () {if (audio.played) {audio.pause ();}} var music = new Array () Music = ["Li Yugang-happened to meet you", "Zhang Jie-Sansheng III", "Pushu-ordinary Road"]; / / Song list var num = 0; var name = document.getElementById ("name"); var btn3 = document.getElementById ("btn-pre"); btn3.onclick = function () {num = (num + 2)% 3; audio.src = "music/" + musicnum + ".mp3"; name [XSS _ clean] = music [num] Audio.play ();} var btn4 = document.getElementById ("btn-next"); btn4.onclick = function () {num = (num + 1)% 3; audio.src = "music/" + Music [num] + ".mp3"; name [XSS _ clean] = music [num]; audio.play ();}
This allows you to control the playback, pause, previous and next functions of the audio player.
At this point, the study on "how to make a simple music player with JS+html5" is over. I hope to be able to solve your doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!
