html5のvolume属性の使い方を詳しく解説

Audio オブジェクトProperties: volume description: 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;
        }
    });
})();

上記の主なアイデア: 高さ変数を宣言し、最初にボリュームを調整するスライダーの高さ (80px に設定) を取得します。

マウスダウン イベントをスライダー上のスライダーにバインドし、そのデフォルト イベント e.preventDefault をキャンセルします。 ();

Declare downHeight スライドしていないときのボリューム スライダーの高さを取得します。 var downY = e.clientY;

クリック位置からウィンドウの上部までの y (垂直) 距離を取得します。 dom全体にmousemoveイベントを追加し、そのデフォルトイベントe.preventDefault( );

moveYを宣言して、カーソルがウィンドウの上部に移動する位置からのy（垂直）距離を取得します。 var moveY = e.clientY ;

nowHeightを宣言して調整後のボリュームスライダーの高さを取得します var nowHeight = downY-moveY+downHeight;

スライダーバーの高さが80pxなので以下のように判断しました

rree

調整後の高さを代入しますボリューム バーをスライダー バーに変更し、調整中にスライダー バーの高さが同期して変更されるようにします。

ボリューム ボリュームの値の範囲 (0 ～ 1) により、nowHeight/height で全体に対する調整された高さのパーセンテージを取得します。高さ、値は(0-1)です

最後に、この値をaudio.volume=nowHeight/height;に割り当てます

調整が完了したら、マウスアップイベントをマウスに追加し、mousemoveイベントとmouseupイベントの両方をクリアします

以上がhtml5のvolume属性の使い方を詳しく解説の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。