home page

The main page is an imitation of other web music players, and the effect is as shown in figure:?

There is a navigation bar above to switch to other function pages, and there is a footer below. Click it to switch to the playing interface.

Play the page?

The playback mode (single loop, random play and loop play), previous song, next song, play/pause and the presentation of music playlist are realized.

Search page

Search for songs to get the corresponding song list, and click to start playing.

realize

The function of music playback mainly depends on H5 tag. It has the following more important attributes:

Src: audio source for playing; ?

Auto Play: "Auto Play" defines auto play; ?

Loop: "loop" defines loop playback; ?

Controls: Controls display playback controls.

In addition, audio has many event attributes, which can be used to realize the interactive effect of music player playing audio. For example:?

Media events include oncanplay events, onended events, onpause and onplay events. Please refer to the documentation on W3C for details.

Implementation of the main interface?

Mainly use hidden audio tags; ?

Monitor the mousemove event in the window, set the display of the navigation bar through the movement of the mouse, and monitor the mouseleave event in the navigation bar to set the hiding of the navigation bar; ?

Plug-in that encapsulates the picture conveyor belt; ?

Implementation of playlist (some music is initially stored in array); ?

Footer layout implementation.

There are two main things that need to be described in detail: the implementation of carousel plug-in and playlist. ?

JQuery plug-ins are mostly written in the following templates:?

If it is a global plug-in.

; (Function ($) {

$. Extension ({

Function name: function(){

//Some processing operations

}//This is a global plug-in, which can be called directly through jQeury. Function name.

});

})(jQuery)

If it is an object plug-in:

; (Function ($) {

$.fn.extend({

Function name: function(){

//Function implementation body

}

}); ? //As the name implies, an object plug-in is a method called by a specific object })(jQuery)

So, first of all, the effect of displaying carousel in the page is realized:?

Purpose: Change the transparency of the picture every once in a while, and change the effect of black spots and white spots on the upper layer of the picture;

var Url = " MusicPlayerImg/"； var LunboArr = ["Music.jpg "，" music3。 PNG "，" music2。 PNG "，" music4。 PNG "，" music5。 PNG "，" music6。 PNG "]； var I = 0；

$("#trueImg ")。 fadeTo( 1000，0.2)；

setInterval(function(){

$("#trueImg ")。 fadeTo( 1000， 1)；

$("#circles img ")。 Every (function (index, el) {

$ (this). Attr ('src',' music player img/ black dot. png’)； ?

});

$("#trueImg ")。 attr('src '，Url+LunboArr[(I+ 1)% 6])； var selector = " # circles img:eq("+((I+ 1)% 6)+")"；

$ (selector). Attr ('src',' music player img/ white dot. png’)； ?

i++；

$("#trueImg ")。 fadeTo( 1000，0.2)；

}, 2000);

Then encapsulate it into a div object plug-in:

; (Function ($) {

$.fn.extend({

lunbo: function(){

var Url = " MusicPlayerImg/"； var LunboArr = ["Music.jpg "，" music3。 PNG "，" music2。 PNG "，" music4。 PNG "，" music5。 PNG "，" music6。 PNG "]； var I = 0；

$("#trueImg ")。 fadeTo( 1000，0.2)；

setInterval(function(){

$("#trueImg ")。 fadeTo( 1000， 1)；

$("#circles img ")。 Every (function (index, el) {

$ (this). Attr ('src',' music player img/ black dot. png’)； ?

});

$("#trueImg ")。 attr('src '，Url+LunboArr[(I+ 1)% 6])； var selector = " # circles img:eq("+((I+ 1)% 6)+")"；

$ (selector). Attr ('src',' music player img/ white dot. png’)； ?

i++；

$("#trueImg ")。 fadeTo( 1000，0.2)；

}, 2000);

}

}); ?

})(jQuery)