html5의 볼륨 속성 사용에 대한 자세한 설명

Audio objectProperties: 볼륨 설명: audio의 볼륨 설정 또는 반환, 값 범위(0-1)

다음은 뮤직 플레이어의 오디오 볼륨을 조정하는 방법을 위해 만든 코드입니다.

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

위의 주요 아이디어: height 변수를 선언하고 먼저 볼륨을 조정하는 슬라이더의 높이(80px로 설정)를 가져옵니다.

mousedown 이벤트를 슬라이더의 슬라이더에 바인딩하고 기본 이벤트를 취소합니다. e.preventDefault ();

Declare downHeight 슬라이딩되지 않을 때 볼륨 슬라이더의 높이를 가져옵니다. 클릭 위치에서 창 상단까지의 y(세로) 거리를 가져옵니다. var downY = e.clientY;

전체 DOM에 mousemove 이벤트를 추가하고 기본 이벤트를 취소합니다. e.preventDefault( );

moveY를 선언하여 커서가 창 상단으로 이동하는 위치에서 y(세로) 거리를 가져옵니다. var moveY = e.clientY ;

조정 후 볼륨 슬라이더의 높이를 얻기 위해 지금 높이 선언 var nowHeight = downY-moveY+downHeight;

슬라이더 막대의 높이가 80px이므로 아래에서 판단했습니다

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

볼륨 막대를 슬라이더 막대로 조정하여 조정 중에 슬라이더 막대의 높이가 동시에 변경되도록 합니다.

볼륨 보쥬메의 값 범위(0-1)로 인해 이제 높이/높이가 전체 높이에 대한 조정된 높이의 백분율을 가져옵니다. height, 값은 (0-1)

마지막으로 이 값을 audio.volume=nowHeight/height;

에 할당합니다. 조정이 완료되면 마우스에 mouseup 이벤트를 추가하고 mousemove 및 mouseup 이벤트를 모두 지웁니다

위 내용은 html5의 볼륨 속성 사용에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!