Code pour implémenter un lecteur de musique (html5 css3 jquery)_jquery

Regardez le rendu ci-dessous, il est superbe. Comment cela a-t-il été réalisé ? Maintenant, je vais partager avec vous certains de mes trésors, un épisode d'Angel Beats chanté par Lisa. Utilisez HTML5, CSS et jquery pour implémenter ce lecteur de musique.

Un trésor, l'interlude des rythmes angéliques chantés par Lisa

Enfin, avant de décrire brièvement comment écrire cette chose, je suis un homme de 24 ans, originaire de Shanghai. Je recherche une petite amie. Les exigences sont : une personnalité douce. . . (Omettre 500 mots)

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

La partie html est simplement ignorée. . . . En gros, je peux écrire. . .

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

Choisissez quelque chose d'intéressant pour la partie CSS

A propos de ces quelques animations CSS3. . . . Celui du dessus

Copier le code Le code est le suivant :

.MusicPlayProcess.rotate

{ animation : rotation linéaire infinie de 30 s ;}

Vous pouvez modifier ces 30 secondes pour la durée de la chanson et cela deviendra une barre de progression O~HOHOHOHO (Les paresseux ont toujours des manières paresseuses)

Infini, connaissez-vous la lecture illimitée ?

Copier le code Le code est le suivant :

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

Puis mettez l'animation en pause,,,,

La compatibilité est un défaut, mais rien d'autre

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

C'est la partie Jq

La lecture est sûre que l'état actuel est 1 en lecture 0 en pause

Copier le code Le code est le suivant :

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

Ce qui précède représente l’intégralité du contenu de cet article, j’espère que vous l’aimerez tous.