Code zum Implementieren des Musik-Players (html5 css3 jquery)_jquery

Sehen Sie sich das Rendering unten an, es sieht großartig aus. Wie wurde es erreicht? Jetzt werde ich einige meiner Schätze mit Ihnen teilen, eine Episode von Angel Beats, gesungen von Lisa. Verwenden Sie HTML5, CSS und JQuery, um diesen Musikplayer zu implementieren.

Ein Schatz, das Zwischenspiel der Engelsbeats, gesungen von Lisa

Bevor ich kurz beschreibe, wie man diese Sache schreibt, bin ich ein 24-jähriger Mann, der ursprünglich aus Shanghai kommt und eine Freundin sucht. Die Voraussetzungen sind: eine sanfte Persönlichkeit. . . (500 Wörter weglassen)

<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>

Der HTML-Teil wird einfach übersprungen. . . . Grundsätzlich kann ich schreiben. . .

.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)}
}

Wählen Sie etwas Interessantes für den CSS-Teil

Über diese wenigen CSS3-Animationen. . . . Das obige

Code kopieren Der Code lautet wie folgt:

.MusicPlayProcess.rotate

{Animation: 30 Sekunden unendlich linear drehen;}

Sie können diese 30 Sekunden auf die Länge des Songs ändern und es wird zu einem Fortschrittsbalken O~HOHOHOHO (Faule Leute haben immer faule Wege)

Unendlich, kennen Sie die unbegrenzte Wiedergabe?

Code kopieren Der Code lautet wie folgt:

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

Dann pausieren Sie die Animation,,,,

Kompatibilität ist ein Mangel, aber sonst nichts

$(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();
 }
 })
})

Das ist der Jq-Teil

Die Wiedergabe ist sicher, dass der aktuelle Status 1 wird abgespielt 0 pausiert ist

Code kopieren Der Code lautet wie folgt:

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

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, er gefällt Ihnen allen.