Use js to teach you how to easily create html music players, and use js to easily create

Use js to teach you how to easily create html music players, and use js to easily create

I made a music player with HTML, which can be played cyclically, select a song, and play the next song automatically. I used js and json knowledge. below is the source code. If you are interested, try it.

:

Source code: html

<Span style = "color: #999999;"> <! DOCTYPE html> 


The following is the js Code:

$ (Document ). ready (function () {// required by the music player, the player Object player, and the music object. Use play to play the Music object. // create a music object to save the music attribute function Music () {} Music. prototype. src = ""; Music. prototype. img = ""; Music. prototype. num = ""; Music. prototype. musicName = ""; Music. prototype. name = ""; // create the player Object function Player () {} Player. prototype. audio = document. getElementById ("audio"); // The number of songs currently played by the Player. prototype. playIndex = 0; Player. prototype. ispl Ay = false; // defines the Player method Player. prototype. rangUpdate = function () {// this. audio. ontimeupdate = function () music player listens when playing music // combines the progress bar with the length of time of the music // every second the music is played. the total length of the duration music. this. audio. ontimeupdate = function () {// set the total length of the progress bar to the total length of music $ (". range "). attr ("max", this. duration); // set the progress bar value to the playing time $ (". range "). val (this. currentTime); // if (this. currentTime = this. duration) {player. nextMusic () ;}}; Player. prototype. playMusic = function () {// Add the music path to the player $ (this. audio ). attr ("src", musicModels [this. playIndex]. src); this. audio. play (); // change music image $ (". pic "). attr ("src", musicModels [this. playIndex]. img); // wave to make its status this. isplay = true ;}; Player. prototype. nextMusic = function () {// if (this. playIndex> = musicModels. length-1) {this. playIndex = 0;} else {this. playIndex = this. playIndex + 1;} // Change the style of the corresponding item of the music table this. playMusic (); $ (". music "). eq (this. playIndex ). addClass ("musicPlay "). siblings (). removeClass ("musicPlay") ;}; Player. prototype. preMusic = function () {if (this. playIndex <= 0) {this. playIndex = musicModels. length-1;} else {this. playIndex = this. playIndex-1;} // change the style of the corresponding item of the music table this. playMusic (); $ (". music "). eq (this. playIndex ). addClass ("musicPlay "). siblings (). removeClass ("mus IcPlay ") ;}; Player. prototype. playOrPause = function () {if (this. isplay) {this. audio. pause (); $ (". play "). attr ("src", "music player resources/img/stop.png");} else {this. audio. play (); $ (". play "). attr ("src", "music player resources/img/play.png");} this. isplay =! This. isplay;}; // js file from now on // create music array var musicModels = []; // create music player object var Player = new player (); /* Ajax aims to implement asynchronous operations in js * JS is single-threaded, simulating java oc multithreading in a single thread to develop asynchronous tasks, and the browser engine performs one-step operations, * In essence, it is not to open up a subthread, but to create an asynchronous task * advantages: * 1. the user does not need to wait for the server * after the xmlHTTPRequest request is asynchronously distributed, immediately revoking the control right and then return to the blank browser page * without a whiteboard. After the background server receives the request, then execute the completion method and enter the code of the interface data in the Method * 2. you do not need to load the entire page. You only need to update local data to save traffic and reduce server pressure. ** set a callback function for xmlHTTPRequest to trigger the function when server data arrives, when sending a request, a small number of parameters * can be included to implement data de-processing on demand * $. ajax () is the most basic function of jQuery's ajax encapsulation. Through this function, you can implement the asynchronous communication function var configObj = {// method: data submission method get OR post URL: request URL async: asynchronous or not. Default Value: true data: the parameter dataType of the post request: type returned by the server, xml string json success: callback method error after successful request: method after request failure} $. ajax (configObj); Complete asynchronous request 2. $ post () can only take post request 3, $ get () 4, $ getJSON (url, complete callback ); you can request content in the local path *****/$. getJSON ("pbl. json ", function (data) {// console. log (data); for (var I = 0; I <data. length; I ++) {var music = new Music (); music. src = "music player resources/" + data [I]. src; music. img = "music player resources/" + data [I]. img; music. musicName = data [I]. musicName; music. name = data [I]. name; music. num = data [I]. num; musicModels. push (music) ;}// play music isertData (); player. playMusic (); player. rangUpdate (); $ (". music "). eq (player. playIndex ). addClass ("musicPlay "). siblings (). removeClass ("musicPlay") ;}); function isertData () {// first, you need to traverse the data source array./* A data-* method is added to html5. use the data-prefix to customize attributes and add them to the custom attribute names, such a structure can store a small amount of data **/for (var I = 0; I <musicModels. length; I ++) {// create a DIV element representation, a row in the music, add a music style to this div // and bind the custom property index to record the div as the row var $ musicDiv = ("<div class = 'music' data- index = "+ I +"> </div> "); // Add this div to musicBox $ (". musicBox "). append ($ musicDiv); // design the child element in musicdiv. The child element has two types of elements, one being a picture of a song, song information // create an img display song image var $ img = ("
The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.