Detailed explanation on the use of volume attribute in html5

Audio objectProperties: volume description: Set or return the volume of audio, value range (0-1)

The following is the music I made Code for how the player adjusts the audio volume:

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

The main idea above: declare the height variable to first obtain the height of the slider that adjusts the volume (set to 80px), and

add it to the slider. The slider binds the mousedown event and cancels its default event e.preventDefault();

Declare downHeight to get the height of the volume slider when it is not sliding, and declare downY to get the y (vertical) distance from the click position to the top of the window. Directional distance var downY = e.clientY;

Add mousemove event to the entire dom and cancel its default event e.preventDefault();

State moveY to get the distance between the position where the cursor moves and the top of the window y (vertical) distance var moveY = e.clientY;

State nowHeight to get the height of the volume slider after adjustment var nowHeight = downY-moveY+downHeight;

Because the height of the slider is 80px, so I made a judgment below

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

Assign the adjusted height of the volume bar to the slide bar, so that the slide bar changes height synchronously during adjustment;

Due to the value range of the volume vojume ( 0-1), let nowHeight/height get the percentage of the adjusted height to the overall height, the value is (0-1)

Finally, assign this value to audio.volume=nowHeight/height;

When the adjustment is completed, release the mouse to add the mouseup event, and clear both mousemove and mouseup events

The above is the detailed content of Detailed explanation on the use of volume attribute in html5. For more information, please follow other related articles on the PHP Chinese website!