Modification des compétences du didacticiel _html5 du style de balise audio HTML5

Permettez-moi d'abord de vous présenter les nouvelles balises d'élément en HTML5
src : chemin du fichier audio.
autobuffer : définissez s'il faut automatiquement mettre en mémoire tampon l'audio lors du chargement de la page.
lecture automatique : définissez si l'audio est lu automatiquement.
boucle : définissez si l'audio doit être lu en boucle.
contrôles : attribut permettant d'ajouter des contrôles de lecture, de pause et de volume.
En raison de la popularité du HTML5, l'audio peut désormais être utilisé pour lire de l'audio pour la plupart des besoins sur les terminaux mobiles. Cependant, vous n'aurez peut-être besoin que d'un simple effet de lecture/arrêt, mais les styles audio sur les différents navigateurs ne sont donc pas satisfaisants. Je l'ai simplement encapsulé, et l'effet est le suivant :

En tant qu'implémentation technique, son principe est relativement simple, qui consiste à masquer l'audio natif, puis à utiliser div pour afficher l'effet du lecteur, puis à appeler son événement click pour déclencher la lecture et l'arrêter, puis la durée. Parfois, cette valeur peut être obtenue, mais parfois elle ne peut pas, ce qui est un peu délicat. Par conséquent, il est recommandé de personnaliser la durée de stockage de l'attribut de durée sur la balise audio à ce moment-là, si le composant ne peut pas l'obtenir. obtiendra cette valeur.

Copier le code

Le code est le suivant :

this.settings.target. on('loadedmetadata', function() {
_this.duration = _this.audio.duration;
if (_this.duration != "Infinity") {
_this.durationContent.html(Math.floor (_this. durée) 's');
} else {
var attr = $(_this.settings.target).attr('duration'); .durationContent. html($(_this.settings.target).attr('duration') "s");
}else{
_this.durationContent.html(''); >}
});



Le contenu ci-dessus vous présente la modification du style des balises audio HTML5. J'espère qu'il vous sera utile.