Exemple de production de lecteur de musique (html5)

Compétences connexes

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

Fonction implémentée

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

balise audio en utilisant

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

Code de lecture et de pause

_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('')
        }
    });
}

Code à barres de progression de la musique

_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(&#39;width&#39;, volume *100 +&#39;%&#39;);
            }
        }
    });
}

Code d'ajout de paroles

_Music.prototype.readyLyric = function(lyric){this.lyricBox.empty();var lyricLength = 0;var html = &#39;<div class="lyric-ani" data-height="20">&#39;;
    lyric.forEach(function(element,index) {var ele = element[1] === undefined ? &#39;^_^歌词错误^_^&#39; :  element[1];
        html += &#39;<p class="lyric-line" data-id="&#39;+index+&#39;" data-time="&#39; + element[0] + &#39;"> &#39; +  ele + &#39; </p>&#39;;
        lyricLength++;
    });
    html += &#39;</div>&#39;;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!