html5のvolume属性の使い方を詳しく解説-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-07-17 14:15:56

オリジナル

3177 人が閲覧しました

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;に割り当てます