Code to implement music player (html5 css3 jquery)_jquery

Look at the rendering below, it looks great. How was it achieved? Now I will share with you some of my treasures, an episode of angel beats sung by Lisa. Use html5, css, and jquery to implement this music player.

A treasure, the interlude of angel beats sung by Lisa

Finally, before briefly describing how to write this thing, I am a 24-year-old male, originally from Shanghai. I am looking for a girlfriend. The requirements are: a gentle personality. . . (Omit 500 words)

<div class="Music">
 <div class="MusicPlaySound"> 
 <img class="MusicPlayBg" src="image/music/zsy.png" /> 
 <img class="MusicPlayProcess rotate" src="image/music/yyjd.png" />
 <div class="MusicPlayBox">
  <h3 class="title">一番の宝物</h3>
  <p class="name">Lisa(Yui final ver)</p>
  <div class="MusicPic"> <img class="MusicPicName PicNameRotate" src="image/music/yifan.jpg" /> <img class="MusicPicButton" src="image/music/pause.png" /> </div>
  <div class="Share icon">分享</div>
  <div class="Next icon">切歌</div>
 </div>
 </div>
 <audio src="music/Yuiki.mp3" autoplay=""></audio>
</div>

The html part is just skipped. . . . Basically I can 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)}
}

Choose something interesting for the css part

About these few css3 animations. . . . The one above

Copy code The code is as follows:

.MusicPlayProcess.rotate

{ animation: rotate 30s infinite linear;}

You can change this 30s to the length of the song and it will become a progress bar O~HOHOHOHO (Lazy people always have lazy ways)

Infinite, do you know unlimited playback?

Copy code The code is as follows:

.MusicPicName.pause{animation-play-state:paused;
-webkit-animation-play-state:paused;}

Then pause the animation,,,,

Compatibility is a flaw, but nothing else

$(function(){
 var play=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 part

Play is sure the current status is 1 playing 0 paused

Copy code The code is as follows:

$("audio").get(0).play();
$("audio").get(0).pause();

The above is the entire content of this article, I hope you all like it.