Maison > Article > interface Web > Exemple de production de lecteur de musique (html5)
HTML5+CSS3
(implémenter la mise en page et les effets dynamiques)
Iconfont
(utiliser la bibliothèque d'icônes vectorielles pour ajouter lire les icônes liées à l'appareil)
LESS
(écriture CSS dynamique)
jQuery
(écrire rapidement des scripts js)
gulp+webpack
(Outil de construction automatisé pour compiler et compresser du code pour LESS, CSS, JS, etc.)
Jouer en pause (cliquez pour changer l'état de lecture)
Chanson suivante (passer à la chanson suivante)
Lecture aléatoire (actuelle chanson Jouer automatiquement la chanson suivante après la lecture)
Boucle unique (cliquez sur l'icône de lecture aléatoire pour passer à la boucle unique)
Réglage du volume ( Déplacez la souris et faites glisser pour régler le volume)
Barre de progression de la chanson (vous pouvez cliquer pour changer la progression pour sauter directement, ou vous pouvez cliquer sur le petit point et faire glisser pour changer le progression)
Paroles en temps réel (cliquez sur le mot, changez l'interface des paroles, faites défiler automatiquement les paroles en fonction de la progression en temps réel)
J'aime (cliquez pour ajouter un effet actif)
Partagez (vous pouvez le partager directement sur Sina Weibo)
autoplay
lecture automatique
loop
Lecture en boucle
volume
Volume paramètre
currentTime
Position de lecture actuelle
duration
Durée audio
pause
Pause
play
Lecture
ended
Indique si l'audio est terminé
_Music.prototype.playMusic = function(){var _this = this;this.play.on('click', function(){if (_this.audio.paused) { _this.audio.play(); $(this).html(''); } else { _this.audio.pause(); $(this).html('') } }); }
_Music.prototype.volumeDrag = function(){var _this = this;this.btn.on('mousedown', function(){ _this.clicking = true; _this.audio.pause(); })this.btn.on('mouseup', function(){ _this.clicking = false; _this.audio.play(); })this.progress.on('mousemove click', function(e){if(_this.clicking || e.type === 'click'){var len = $(this).width(), left = e.pageX - $(this).offset().left, volume = left / len;if(volume <= 1 || volume >= 0){ _this.audio.currentTime = volume * _this.audio.duration; _this.progressLine.css('width', volume *100 +'%'); } } }); }
_Music.prototype.readyLyric = function(lyric){this.lyricBox.empty();var lyricLength = 0;var html = '<div class="lyric-ani" data-height="20">'; lyric.forEach(function(element,index) {var ele = element[1] === undefined ? '^_^歌词错误^_^' : element[1]; html += '<p class="lyric-line" data-id="'+index+'" data-time="' + element[0] + '"> ' + ele + ' </p>'; lyricLength++; }); html += '</div>';this.lyricBox.append(html);this.onTimeUpdate(lyricLength); }
Il existe de nombreux codes, je ne les ajouterai donc pas un par un. Si vous pensez que c'est bien, vous pouvez l'aimer (vous pouvez également lui donner une étoile sur mon GitHub). Votre Like et votre Star sont ma motivation pour continuer à créer, merci beaucoup ! ! ! Groupe de code source
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!