Tutoriel graphique HTML5 sur la création d'un plug-in de lecteur audio sympa_html5 compétences du didacticiel

L'image ci-dessus est le schéma de l'interface utilisateur de ce lecteur audio, qui cache également une liste de lecture de chansons. L'ensemble de l'interface utilisateur du lecteur est dessiné avec CSS et font-face, à l'exception du portrait d'arrière-plan et du nombre d'étoiles de la chanson, qui sont tous dessinés avec CSS et font-face. Les seuls domaines qui semblent difficiles sont la production de CD et. lecteurs de disque. Dans la chanson Le CD et le lecteur de disque ont tous deux des effets interactifs animés pendant la lecture, qui seront expliqués dans une section ultérieure. Cliquez sur le CD dans le lecteur pour ouvrir la playlist~

Comme ce tutoriel vise principalement à démontrer l'utilisation de la nouvelle balise

Fonctions principales :

1. Lecture, pause, chanson précédente, chanson suivante, augmentation ou diminution du volume

2. Cliquez sur CD pour ouvrir et fermer la playlist

3. Vous pouvez faire glisser des fichiers musicaux locaux vers le lecteur pour les lire

Structure HTML

Copier le code

Le code est le suivant :

< ;div id="myAudio" style="margin:0 auto;">

> ;

• 
  
• 
  
• 
  
• 
  
• 
  

a




b

e
c> ;
d

0:00



0:00

> ;

balise audio

Dans la structure ci-dessus, nous pouvons trouver la nouvelle balise audio en HTML5, qui possède un attribut de contrôle, comme son nom l'indique, il s'agit du contrôleur du lecteur. L'attribut de contrôle spécifie que le navigateur fournit des contrôles de lecture pour l'audio, tels que. comme dans le navigateur Chrome Si vous définissez cet attribut dans la balise audio sous

Le code est le suivant :

Cependant, en raison des différents effets de rendu des balises audio sous différents navigateurs, cette méthode simple ne convient pas à une utilisation sous plusieurs navigateurs et les fonctions fournies par le contrôle de lecteur par défaut du navigateur sont vraiment trop limitées. . Par conséquent, nous masquons généralement les commandes de lecture par défaut du navigateur en ne définissant pas cet attribut et ajoutons manuellement des balises et des styles supplémentaires pour personnaliser l'interface utilisateur du lecteur.

Contrôles de lecture

Une fois l'interface utilisateur du lecteur dessinée, la première chose que nous devons faire est d'ajouter les écouteurs d'événements correspondants pour les trois boutons de contrôle principaux : lecture, chanson précédente et chanson suivante.

Copier le code

Le code est le suivant :

var myAudio = $(" #myAudio audio ")(0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";

Copier le code

Le code est le suivant :

$(".btn_play" ).click (function(){
if (myAudio.paused) {
myAudio.play();
} else {
myAudio.pause();
}
} );
$(".btn_next").click(function(){
currentSrcIndex > $sourceList.length - 1 && (currentSrcIndex = 0);
currentSrc = $("#myAudio source" ).eq (currentSrcIndex).prop("src");
myAudio.src = currentSrc;
myAudio.play();
});
$(".btn_previous").click (function( ){
--currentSrcIndex currentSrc = $("#myAudio source").eq(currentSrcIndex).prop("src");
monAudio.src = currentSrc;
monAudio.play();
});

Dans la surveillance des événements de clic sur le bouton ci-dessus, nous contrôlons la lecture et la pause de l'audio en appelant les méthodes play() et pause() de l'élément audio d'origine. De plus, l'élément audio fournit l'attribut currentSrc, qui représente la source du fichier en cours de lecture. Nous contrôlons la piste de la chanson en cours de lecture en définissant cet attribut.

Contrôle du volume

Ensuite, ajoutons la surveillance des événements aux deux petits haut-parleurs de chaque côté de la barre de volume, afin que le volume de la lecture en cours puisse être réduit et augmenté en cliquant sur les deux petits haut-parleurs à gauche et à droite. Pour régler le volume du lecteur, nous pouvons appeler l'attribut volume fourni dans l'élément audio. La valeur maximale du volume est 1 et la valeur minimale est 0. Ici, nous contrôlons le volume en augmentant ou en diminuant le volume de 0,1 à chaque fois que nous cliquons sur le haut-parleur. Bien entendu, vous pouvez également utiliser d’autres valeurs. Mais il convient de noter que le langage JavaScript ne peut pas fournir un contrôle précis sur les décimales, donc à chaque fois que le volume est réduit de 0,1, le volume réellement réduit est légèrement supérieur à 0,1, ce qui fait qu'il reste 0,09 lorsque le bouton de réduction de volume est cliqué 9 fois. d'affilée. volume xxxx, et vous découvrirez alors pourquoi le lecteur ne peut pas être mis en sourdine. . . Bien entendu, ce problème est facile à résoudre (illustré ci-dessous), juste un petit rappel.

Copier le code

Le code est le suivant :

$(".volume_control . diminuer") .click(function() {
var volume = myAudio.volume - 0.1;
volume myAudio.changeVolumeTo(volume);
} );
$(".volume_control .increase").click(function() {
var volume = myAudio.volume 0.1;
volume > 1 && (volume = 1);
myAudio .changeVolumeTo( volume);
});

De plus, nous devons également implémenter la fonction consistant à utiliser le curseur ou à cliquer sur une certaine position de la barre de volume pour contrôler le volume avec. la fondation ci-dessus, c'est facile à réaliser. Tout d'abord, jetons un coup d'œil à la fonction consistant à cliquer sur une certaine position de la barre de volume pour contrôler le volume : cliquez sur une certaine position de la barre de volume, calculez la valeur de longueur depuis le point de départ de la barre de volume jusqu'à cette position, puis divisez cette valeur par la longueur totale de la barre de volume. (Ici, c'est 100). Obtenez la valeur en pourcentage, puis multipliez la valeur en pourcentage par la valeur de volume maximale 1 pour obtenir la valeur de volume à laquelle vous souhaitez accéder, puis attribuez-la à. volume. La méthode de contrôle du volume via un curseur est similaire à celle-ci. L'essentiel est de savoir comment calculer la valeur de position du curseur sur la barre de volume. Je ne l'expliquerai pas en détail ici. Si vous avez des questions, veuillez laisser un message ci-dessous.

Copier le code

Le code est le suivant :

$(".volume_control .base_bar").mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var volume = (posX - targetLeft)/100;
volume > 1 && (volume = 1);
volume myAudio.changeVolumeTo(volume );
});
$(".volume_control .slider").mousedown(starDrag = function(ev) {
ev.preventDefault();
var origLeft = $(this). position().left; /*Position initiale du curseur*/
var origX = ev.clientX; /*Position initiale de la souris*/
var target = this;
var progress_bar = $(". volume_control .progress_bar")[0];
$(document).mousemove(doDrag = function(ev){
ev.preventDefault();
var moveX = ev.clientX - origX; /*Calculer mouse Moving distance*/
var curLeft = origLeft moveX; /*Utilisez la distance déplacée par la souris pour représenter la distance de déplacement du curseur*/
(curLeft (curLeft > 93) && (curLeft = 93);
target.style.left = curLeft "px";
progress_bar.style.width = curLeft 7 "%";
myAudio .changeVolumeTo(( curLeft 7)/100);
});
$(document).mouseup(stopDrag = function(){
$(document).unbind("mousemove",doDrag);
$ (document).unbind("mouseup",stopDrag);
});
});

Contrôle du temps

D'accord, maintenant le lecteur fonctionne essentiellement, mais nous voulons également pouvoir sauter directement une partie de l'audio à un moment précis. Alors comment y parvenir ? ? ! Les membres du comité qui formulent la norme ne sont pas des imbéciles. De telles fonctions couramment utilisées ne peuvent être omises. Parcourez donc rapidement l'API et vous constaterez que l'élément audio fournit un attribut appelé currentTime, qui est un nom très concis et facile à comprendre. (En fait, la plupart des attributs sont faciles à comprendre). La définition de cet attribut peut définir le moment de lecture actuel.

Ici, nous devons également utiliser un autre attribut audio, la durée, qui fait référence à la durée totale du fichier en cours de lecture. Ainsi, en fonction de la mise en œuvre du contrôle du volume, nous pouvons faire ceci :

1. Cliquez sur une certaine position de la barre de progression et calculez la valeur en pourcentage de la longueur depuis le point de départ de la barre de progression jusqu'à cette position jusqu'à la longueur totale de la barre de progression (par exemple, cliquez sur la position centrale de la barre de progression, alors la longueur depuis le point de départ de la barre de progression jusqu'à cette position sera la longueur de la position représentant 50 % de la longueur totale de la barre de progression), enregistrée sous forme de pourcentage.

2. Multipliez ensuite le pourcentage par la durée totale du fichier pour obtenir la valeur du point temporel auquel vous souhaitez accéder, puis attribuez la valeur à currentTime pour terminer la fonction à implémenter.

Copier le code

Le code est le suivant :

$(".time_line . base_bar") .mousedown(function(ev){
var posX = ev.clientX;
var targetLeft = $(this).offset().left;
var pourcentage = (posX - targetLeft)/ 140 * 100 ;
myAudio.currentTime = myAudio.duration * pourcentage / 100;
});

À ce stade, le lecteur a essentiellement pris forme. Il reste quelques implémentations insignifiantes d'interaction avec l'interface utilisateur (en fait, elles sont les plus importantes pour moi, haha). Si vous êtes intéressé, vous pouvez les consulter dans le code source. Si vous avez des questions, vous pouvez laisser un commentaire ci-dessous. J'espère que nous pourrons communiquer et en apprendre davantage.