Ausführliche Erläuterung zur Verwendung des Volumenattributs in HTML5

Audioobjekt Attribut : Lautstärkebeschreibung: Lautstärke von Audio festlegen oder zurückgeben, Wertebereich (0-1)

Das Folgende ist die Musik, die ich gemacht habe Code dafür, wie der Player die Audiolautstärke anpasst:

//增加切换音量事件
(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;
        }
    });
})();

Die Hauptidee oben: Deklarieren Sie die Höhenvariable, um zunächst die Höhe des Schiebereglers zum Anpassen der Lautstärke zu erhalten (auf 80 Pixel eingestellt),

zum Schieben Der Schieberegler auf der Leiste ist an das Mousedown-Ereignis gebunden und bricht sein Standardereignis e.preventDefault();

deklariert downHeight ab, um die Höhe des Lautstärkereglers zu erhalten, wenn er nicht gleitet, und deklariert downY, um den Y-Richtungsabstand (von der Klickposition bis zum oberen Rand des Fensters) zu erhalten. var downY = e.clientY;

Mausbewegungsereignis zum gesamten Dom hinzufügen, Standardereignis abbrechen e.preventDefault( );

Deklarieren Sie moveY, um den Positionsabstand des Cursors zum Fenster zu erhalten. Den oberen Y-Abstand (vertikal) var moveY = e.clientY;

Geben Sie nowHeight an, um die Höhe des Volumens zu erhalten Schieberegler nach der Anpassung var nowHeight = downY-moveY+downHeight;

Aufgrund des Schiebereglers beträgt die Höhe 80 Pixel, daher habe ich unten eine Beurteilung vorgenommen

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

Weisen Sie die angepasste Höhe des Volumens zu

Aufgrund der Lautstärke vojume Der Wertebereich (0-1) lässt nowHeight/Height den Prozentsatz der angepassten Höhe ermitteln Gesamthöhe, der Wert ist (0-1)

Zuletzt weisen Sie diesen Wert audio.volume=nowHeight/height zu;

Wenn die Anpassung abgeschlossen ist, lassen Sie die Maus los, um das Mouseup hinzuzufügen Ereignis und löschen Sie sowohl Mousemove- als auch Mouseup-Ereignisse

Das obige ist der detaillierte Inhalt vonAusführliche Erläuterung zur Verwendung des Volumenattributs in HTML5. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!