Explication détaillée sur l'utilisation de l'attribut volume en HTML5

Objet audio attribut  : description du volume : définir ou renvoyer le volume de audio , plage de valeurs (0-1)

Voici la musique que j'ai créée Code permettant au lecteur de régler le volume audio :

//增加切换音量事件
(function(){
    var height = $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar").height();
    $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar .scroll-btn").on("mousedown",function(e){
        e.preventDefault();
        var downHeight = $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar").height();
        var downY = e.clientY;
        document.onmousemove = function(e){
            e.preventDefault();
            var moveY = e.clientY;
            var nowHeight = downY-moveY+downHeight;
            if(nowHeight<=0){
                nowHeight =0;
            }else if(nowHeight >= height){
                nowHeight = height;
            }
            $("#myAudio ul.control li.volume .alert-box .volume-wrap .bar .scroll-bar").height(nowHeight);
            var precent = nowHeight/height;
            audio.volume = precent;
        }
 
        document.onmouseup = function(){
            document.onmousemove = null;
            document.onmouseup = null;
        }
    });
})();

L'idée principale ci-dessus : déclarer la variable height pour obtenir d'abord la hauteur du curseur de réglage du volume (réglé sur 80px),

to slide Le curseur sur la barre est lié à l'événement mousedown et annule son événement par défaut e.preventDefault();

déclare downHeight pour obtenir la hauteur du curseur de volume lorsqu'il ne glisse pas, et déclare downY pour obtenir la distance de direction y (de la position de clic vers le haut de la fenêtre) Vertical) var downY = e.clientY;

Ajouter l'événement mousemove à l'ensemble du dom, annuler son événement par défaut e.preventDefault( );

Déclarez moveY pour obtenir la distance de position du curseur à la fenêtre La distance supérieure y (verticale) var moveY = e.clientY;

State nowHeight pour obtenir la hauteur du volume slider après ajustement var nowHeight = downY-moveY+downHeight;

À cause du curseur, la hauteur est de 80px, j'ai donc porté un jugement ci-dessous

if(nowHeight <=0){
nowHeight=0;//最小值为0（对应volume静音）
}else if(nowHeight>=height){
nowHeight=height;//最大值为80px(对应volume最大值1)
}

Attribuez la hauteur ajustée du volume. barre à la barre coulissante, de sorte que la barre coulissante change de hauteur de manière synchrone pendant le réglage ;

En raison du volume vojume La plage de valeurs (0-1), laissez maintenantHauteur/hauteur obtenir le pourcentage de la hauteur ajustée par rapport à la barre coulissante. hauteur totale, la valeur est (0-1)

Enfin, attribuez cette valeur à audio.volume=nowHeight/height;

Lorsque l'ajustement est terminé, relâchez la souris pour ajouter le mouseup événement et effacez les événements mousemove et mouseup

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!