Mobile Music player Development

<doctype html>

<title> Mobile Music player </title>

<style>

*{margin:0;padding:0;}

body{

Background: #000000;

/* Performance Optimization: An excellent development engineer must be for the server, CPU considerations (Increase the load efficiency of the Code website Open efficiency) */

}

#music {

position:relative;

width:322px;

height:635px;

background:red;

margin:50px Auto;

}

. m_top{

width:100%;

height:42px;

Background:url ("Images/phone_top.png");

}

. m_info{

width:100%;

height:20px;

Background:url ("Image/top.jpg")

}

. m_title{

width:320px;

height:40px;

Color: #fff;

Text-align:center;

line-height:40px;

font-size:24px;

Background: #000;

border:1px solid white;

Border-top:0;/*0/none are not IE only recognize 0*/

border-bottom:0;

}

. m_song{

width:320px;

height:490px;

Background:url ("Images/psb.jpg") no-repeat;

Background-position:center;

background-size:cover;//equal magnification can also be written 100% 100% because the picture is too big.

border:1px solid #fff;

border-top:0;

border-bottom:0;

}

#m_song p{

Color: #fff;

Text-align:center;

line-light:20px;

}

. m_footer{

width:100%;

height:47px;

Background:url ("Images/phone-bottom.png");

}

. btn{

Position:absolute;

left:136px;/* distance from the left side of the reference */

Bottom

width:50px;

height:50px;

Background:url ("Images/normalmusic.svg");

background-size:cover;//picture is too big

}

</style>

<body>

<div id= "Music" >

<div class= "M_top" >//js Be sure to use _

</div>

<div class= "M_info" >

</div>

<div class= "M_title" > accompanying Tanzhou </div>

<div class= "M_song" >

</div>

<div class= "M_footer" ></div>

<div class= "BTN" ></div>

</div>

<textarea style= "Display:none;" id= "Text" >

[05:56:12] I'm here.

[06:00:00] I can do it.

</textarea>

<audio src= "Music/10.mp3" ></audio>

<script>

Find Click button to bind a point click event

Get elements through classname under document documents

var btn=document.getelementbyclassname ("btn") [0];

Find the Music tab

var Music=document.getelementbyid ("#music");

var Txt=document.getelementbyid ("txt");

var M_song=document.getelementbyid ("M_song");

var mark=true;//make a mark to save the state of music playback

Bind a click event and click Play Music

Btn.onclick=function () {//Click to implement Playback function

if (Mark)

{

Music.play ();

Mark=false;

}else{

Music.stop ();

Mark=true;

}

}//Click Play, click Pause

Console.log (Txt.value);

var lrc=txt.value;//get lyrics

var lrcarr=lrc.split ("[");//Remove the inside [

Console.log (Lrcarr);

var html= ""; Save lyrics

for (Var i=0;i<lrcarr.length;i++)

{

var arr=lrcarr[i].split ("]");

Console.log ("arr[1]");

var times=arr[0].split (".");

var time=times[0].split (":");

Convert the time into seconds

var ms=time[0]*60+time[1]*1;

if (Arr[1])

{

html+= "<p id=" +ms+ ">+arr[1]+</p>";//Use a variable to save all the lyrics

}

m_song.innerhtml=html;//is displayed in the Wakako box.

}

Lyrics Sync monitor hear time update

var op=document.getelementsbytagname ("P");

Music.addeventlister ("Timeupdate", function () {

var cutime=parseint (this.currenttime);//get Current playback time

if (document.getElementById (cutime))//If present, let him change color.

{

for (Var i=0;i<op.length;i++)

{

Op[i].style.color= "#fff";

}

document.getElementById (cutime). style.color= "#f00";

}

});

</script>

</body>

Mobile Music player Development