Html5+css3+jquery implements a simple music player

。。。 Recently, it's hot, it feels like pancakes ... Then the other people in the sister's time, only our hard-pressed programmers over there to masturbate code ... Oh, my day!

And then today I was working on a player I wrote earlier ... Does it look like it's a sensation? A treasure, Lisa sings in the episode of Angel Beats

Finally in a brief description of how to write this thing, I male, 24 years old, native Shanghai, recruit a girlfriend, request: Character docile ... (Omit 500 words)

<Divclass= "Music">  <Divclass= "Musicplaysound">   <imgclass= "MUSICPLAYBG"src= "Image/music/zsy.png" />   <imgclass= "Musicplayprocess rotate"src= "Image/music/yyjd.png" />    <Divclass= "Musicplaybox">      <H3class= "title">A treasure</H3>      <Pclass= "Name">Lisa (Yui final ver)</P>      <Divclass= "Musicpic"> <imgclass= "Musicpicname picnamerotate"src= "Image/music/yifan.jpg" /> <imgclass= "Musicpicbutton"src= "Image/music/pause.png" /> </Div>      <Divclass= "Share icon">Share</Div>      <Divclass= "Next icon">Cut the song</Div>    </Div>  </Div>  <Audiosrc= "Music/yuiki.mp3"AutoPlay=""></Audio></Div>

The HTML section just skipped over .... Basic will write ...

. Musicplayprocess.rotate{Animation:rotate 30s Infinite linear;}. Musicplayprocess.pause{animation-play-state:paused;-webkit-animation-play-state:paused;}. Musicpicname.picnamerotate{Animation:rotate 4s infinite linear;}. Musicpicname.pause{animation-play-state:paused;-webkit-animation-play-state:paused;}@keyframes Rotate{from{Transform:Rotate (0deg)} to{Transform:Rotate (360deg)}}

CSS part of the main pick something interesting

How about so many CSS3 animations .... The one above . musicplayprocess.rotate{Animation:rotate 30s infinite linear;}

You can change this 30s to a song. The length of time becomes the progress bar O~hohohoho (lazy people always have lazy ways)

Infinite Do you know how to play infinity?

. musicpicname.pause{animation-play-state:paused;  -webkit-animation-play-state:paused;}   
Then pause the animation 、、、、

Compatibility is a mishap, and nothing else.

$(function(){    varPlay=1; $(". Musicpicbutton "). Click (function(){        if(play==0){            $( This). attr ("src", "image/music/pause.png")            $(". Musicplayprocess "). Removeclass (" Pause ")            $(". Musicpicname "). Removeclass (" Pause ")                $("Audio"). Get (0). Play (); Play=1; }Else{            $( This). attr ("src", "image/music/play.png")            $(". Musicplayprocess "). AddClass (" Pause ")            $(". Musicpicname "). AddClass (" Pause ") Play=0; $("Audio"). Get (0). Pause (); }            })    })

This is the JQ section.

Play? Determine current status 1 play 0 pause

$ ("audio"). Get (0). Play ();

$ ("audio"). Get (0). Pause ();

Play... Time out...

Last Demo

Http://xiaobai.52nhw.com/music.html

Then the emphasis came, I faced unemployment t_t, kneeling for the easy pit. Target salary 1w+ is OK, 3 years front-end development experience, 2 years HTML5 mobile development experience, will play phonegap, can be good code. Personality optimistic upward, willing to learn new things (see which fun to engage in that, is now doing the game!) ）

Html5+css3+jquery implements a simple music player