Using JS to teach you easy to make HTML music player _javascript skills

Use HTML to do a music player, you can loop, select songs, as well as automatically play the next one, the use of JS and JSON knowledge, the following is the effect map and source code, interested can try Oh

Effect Chart:

Source: HTML

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

Here is the JS code:

 $ (document). Ready (function () {///music player needs, player object player, music object, play to musical objects///Create music objects, properties for the store 
 } music.prototype.src= ""; 
 Music.prototype.img = ""; 
 Music.prototype.num= ""; 
 Music.prototype.musicname= ""; 
 Music.prototype.name= ""; 
Create player object function player () {} Player.prototype.audio = document.getElementById ("audio"); 
 Currently play the first few songs player.prototype.playindex=0; 
Player.prototype.isplay = false; To define the player's method Player.prototype.rangUpdate = function () {//this.audio.ontimeupdate =function () Music player listening on//moving progress bar and music The length of time combined//music every second, read the bar will advance a unit this.duration total length of music this.audio.ontimeupdate =function () {//The total length of the progress bar is set to the total length of the music $ ( 
   
  ". Range"). attr ("Max", this.duration); 
  Sets the value of the progress bar to play time $ (". Range"). val (this.currenttime); 
  When a song is finished play the next if (this. currenttime = = this.duration) {player.nextmusic (); 
 } 
   
   
   
  } 
  
 }; Player.prototype.playMusic =function () {//Add music path to Player $ (this.audio). attr ("src", mUsicmodels[this. playindex].src); 
  this. Audio.play (); 
  Change Music picture $ (". Pic"). attr ("src", musicmodels[this.playindex].img); 
  
 Wave let its state this. isplay= true; 
 }; Player.prototype.nextMusic = function () {//Cross-border problem if (this. Playindex >= musicmodels.length-1) {this.pl 
   
  Ayindex = 0; 
  }else{This.playindex = this. Playindex + 1; 
  //change the style of the corresponding item of the Music class 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 class table This.playmusic (); 
 $ (". Music"). EQ (this.playindex). addclass ("Musicplay"). Siblings (). Removeclass ("Musicplay"); 
 }; 
  Player.prototype.playOrPause = function () {if (This.isplay) {this.audio.pause (); 
  $ (". Play"). attr ("src", "Music player Resource/img/stop.png"); }else{this.Audio.play (); 
  $ (". Play"). attr ("src", "Music player Resource/img/play.png"); 
 } this.isplay =!this.isplay; 
}; 
 JS file from this down//create music array var musicmodels = []; 
 Create a music player object Var player= new player (); /*ajax purpose is to implement asynchronous operation in JS * js is single-threaded, in a single thread simulation Java OC multi-threaded Open asynchronous task, browser engine to do one step, * is not to open up a child thread, but to create an asynchronous task * Advantages: * 1. Require the user to wait for the server * after the asynchronous distribution of XMLHttpRequest request, immediately the control is returned to the browser empty page * Interface will not appear whiteboard, waiting for the backend server to get the request, then to perform the completion method, in the method to fill in the Interface data code * 2. Do not need to load The entire page only needs to update local data, save traffic, reduce server pressure * * For XMLHttpRequest set a callback function, server data when the trigger function, send a request can take a small number of parameters * to achieve on-demand data * $.AJAX (), this is J Query the most basic function of Ajax encapsulation, through which asynchronous communication functions can be implemented VAR configobj= {//method: Data submission Way get OR post URL: Requested URL async: asynchronous, default Tru e Data:post requested parameter dataType: server-returned type, XML string JSON success: Callback method error After successful request: Method after request failed $.ajax (confi Gobj) Complete asynchronous request two, $post () can only take POST request three, $get () Four, $getJSON (URL, complete callback); You can request the contents of the local Path * * * * * $.getjson ("PBL.J 
  Son ", 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 to traverse data source array/* HTML5 add a data-* way to customize a property is added to a custom attribute name with a data-prefix, so that a structure can store a small amount of data */for (Var i=0;i<musicmodels.length;i++) {/////Create a DIV element representation, a line in the music, add the musical style//and binding custom attribute index to this div to record this div is the first of the list 
Row var $musicDiv = $ ("<div class = ' music ' Data-index =" + i + "></div>"); 
Add this div to MusicBox $ (". MusicBox"). Append ($musicDiv); Design Musicdiv in the child element, the child element has two, one is the song picture, the song information//Create an IMG display song picture var $img = (" 

  above is the entire content of this article, I hope to help you learn, but also hope that we support the cloud-dwelling community.