Comment modifier le style de la balise en HTML

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. comment changer ce style ? En fait, son principe est relativement simple, c'est-à-dire ne pas utiliser l'attribut CONTROLS lors de l'écriture audio, masquer l'audio natif, puis utiliser des balises telles que p pour définir un style CSS pour l'embellir à afficher l'effet du lecteur. , et enfin utiliser js pour capturer les événements audio, qui sont essentiellement le chemin src, la pause, le chargement et la lecture. Voici quelques API associées à la balise audio :

Description de la fonction de la fonction de contrôle

load() : chargez des logiciels audio et vidéo, généralement pas besoin d'appeler, sauf si il s'agit d'un élément généré dynamiquement, utilisé pour précharger avant la lecture

play() : charger et lire des fichiers audio et vidéo À moins que le fichier n'ait été mis en pause à d'autres emplacements, la lecture redémarrera par défaut

. pause() : mettre en pause les fichiers audio et vidéo en cours de lecture

valeur de la propriété audio scriptable :

src : chemin du fichier audio.

lecture automatique : définissez si l'audio est lu automatiquement (la propriété par défaut est de lire automatiquement les fichiers multimédias chargés), ou vérifiez s'il a été défini sur lecture automatique

tampon automatique : Définissez s'il faut automatiquement mettre en mémoire tampon l'audio lors du chargement de la page. Si la lecture automatique est définie, cette fonctionnalité sera ignorée

boucle : définissez si l'audio doit être lu en boucle. , ou demander s'il a été défini sur loop

currentTime : renvoie le temps écoulé depuis le début de la lecture jusqu'au présent en s. Vous pouvez également définir la valeur de currentTime pour passer à une position spécifique

.

contrôles : affichez ou masquez l'interface de contrôle utilisateur (propriétés permettant d'ajouter des commandes de lecture, de pause et de volume.)

volume : définissez la valeur du volume entre 0,0 et 1,0, ou interrogez la valeur actuelle du volume

muet : définissez s'il faut couper le son

Attribut en lecture seule Description de l'attribut

durée : obtenez la durée de lecture du fichier multimédia, en s, s'il ne le peut pas être obtenu, il sera NaN

paused : Renvoie true si le fichier multimédia est en pause, sinon renvoie false

ended : Renvoie true si la lecture du fichier multimédia a fini de jouer

startTime : renvoie l'heure de début de lecture, généralement 0,0, sauf s'il s'agit d'un fichier multimédia mis en mémoire tampon et qu'une partie du contenu n'est plus dans le tampon

erreur : le code d'erreur renvoyé après qu'une erreur se produit

currentSrc : sous forme de chaîne Le formulaire renvoie le fichier en cours de lecture ou de chargement, correspondant au fichier sélectionné par le navigateur dans l'élément source

Pour ces attributs, les navigateurs grand public le prennent en charge. Mais ne pensez pas qu'il n'y a pas de compatibilité. Dans les flux de lecture audio, il existe deux camps. Firefox et Opera prennent en charge l'audio ogg, Safari et IE prennent en charge le mp3. Heureusement, Chrome de Google le prend en charge.

<p class="btn-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></p>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/1.10.0/jquery.min.js"></script>

body{
    background:#2b2938;
}
.btn-audio{
    margin: 90px auto;
    width: 186px;
    height: 186px;
    background:url(images/voice_stop.png) no-repeat center bottom;
    background-size:cover;
}

<script type="text/javascript">
    $(function(){
        //播放完毕
        $(&#39;#mp3Btn&#39;).on(&#39;ended&#39;, function() {
            console.log("音频已播放完成");
            $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
        })
        //播放器控制
        var audio = document.getElementById(&#39;mp3Btn&#39;);
        audio.volume = .3;
        $(&#39;.btn-audio&#39;).click(function() {
            event.stopPropagation();//防止冒泡
            if(audio.paused){ //如果当前是暂停状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_play.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.play(); //播放
                return;
            }else{//当前是播放状态
                $(&#39;.btn-audio&#39;).css({&#39;background&#39;:&#39;url(images/voice_stop.png) no-repeat center bottom&#39;,&#39;background-size&#39;:&#39;cover&#39;});
                audio.pause(); //暂停
            }
        });
    })
</script>

En tant qu'implémentation technique, son principe est relativement simple, qui consiste à masquer l'audio natif, puis à utiliser p pour afficher l'effet du lecteur, puis à appeler son événement click pour déclencher la lecture et l'arrêt, 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 l'attribut de durée sur la balise audio pour stocker la durée. , si le composant ne peut pas l'obtenir, il obtiendra cette valeur.

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

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!