interface Web
Tutoriel H5
Tutoriel graphique HTML5 sur la création d'un plug-in de lecteur audio sympa_html5 compétences du didacticiel
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
< ;div id="myAudio" style="margin:0 auto;">
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
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 lectureUne 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.
var myAudio = $(" #myAudio audio ")(0];
var $sourceList = $("#myAudio source");
var currentSrcIndex = 0;
var currentSr = "";
$(".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 < 0 && (currentSrcIndex = 0);
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 volumeEnsuite, 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.
$(".volume_control . diminuer") .click(function() {
var volume = myAudio.volume - 0.1;
volume < 0 && (volume = 0);
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.
$(".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 < 0 && (volume = 0);
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 < -7) && (curLeft = -7) ;
(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.
$(".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.
Outils d'IA chauds
Undresser.AI Undress
Application basée sur l'IA pour créer des photos de nu réalistes
AI Clothes Remover
Outil d'IA en ligne pour supprimer les vêtements des photos.
Undress AI Tool
Images de déshabillage gratuites
Clothoff.io
Dissolvant de vêtements AI
Video Face Swap
Échangez les visages dans n'importe quelle vidéo sans effort grâce à notre outil d'échange de visage AI entièrement gratuit !
Article chaud
Outils chauds
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Bordure de tableau en HTML
Sep 04, 2024 pm 04:49 PM
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Tableau imbriqué en HTML
Sep 04, 2024 pm 04:49 PM
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Marge gauche HTML
Sep 04, 2024 pm 04:48 PM
Guide de la marge HTML gauche. Nous discutons ici d'un bref aperçu de la marge gauche HTML et de ses exemples ainsi que de son implémentation de code.
Disposition du tableau HTML
Sep 04, 2024 pm 04:54 PM
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Espace réservé d'entrée HTML
Sep 04, 2024 pm 04:54 PM
Guide de l'espace réservé de saisie HTML. Nous discutons ici des exemples d'espace réservé d'entrée HTML ainsi que des codes et des sorties.
Déplacer du texte en HTML
Sep 04, 2024 pm 04:45 PM
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Liste ordonnée HTML
Sep 04, 2024 pm 04:43 PM
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Bouton HTML onclick
Sep 04, 2024 pm 04:49 PM
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
