今回からは、PC向けに表示するplayer-blockのリストを取り扱います。以下は、消音と音量バーに関する処理です。

HTML側の実装

<!-- アイコンのリスト -->
<ul class='player-block'>

    <!-- 消音アイコンを格納 -->
    <li class='player-block-btn-volume'>

        <!-- 消音アイコン -->
        <button class='player-volume'> 
            <span class='glyphicon glyphicon-volume-up'></span>
        </button>

        <!-- 消音アイコンのポップアップテキスト -->
        <span class='player-popup'>消音</span>
    </li>

    <!-- 音量バーを格納 -->
    <li class='player-block-volume'>

        <!-- 音量バー -->
        <input class='player-volume-bar' type='range' value='1' min='0' max='1' step='0.1'>
    </li>

    <!-- 他の要素は省略 -->
    ・・・
</ul>

type="range"属性に関してはスライドバーの記事で取り上げています。また、audio要素のvolume属性の取る値が0.0から1.0なので、音量バーの方もそれに合わせています。

Javascript側の実装

//イベント登録
setEvent: function() {

    //消音アイコンのクリックイベント登録
    $('.player-volume').on('click', function() {
        player.mute(this);
    });

    //IEと他のブラウザでそれぞれ対応したイベントを適用
    var event = this.ie ? 'change' : 'input';

    //音量バーのイベント登録
    $('.player-volume-bar').on(event, function() {
        player.volume(this);
    });

    //他の処理は省略
    ・・・
},

IEの判定に関しては、こちらの記事で取り上げています。

下記は、消音アイコンのイベントから呼び出される関数です。

/* 消音アイコンの処理
 *  引数 element 消音アイコンの要素
 */
mute: function(element) {

    //音量が 0なら処理を中断
    if (!this.volumeSaved) return;

    //消音オプションの真偽を切り替え
    var mute = !this.option.mute;
    this.option.mute = mute;

    //曲が格納されていれば消音の真偽を代入
    if (this.track) this.track.muted = mute;

    //消音が真であれば 0を、偽であれば保存しておいた音量をバーに代入
    var volume = mute ? 0 : this.volumeSaved;
    $('.player-volume-bar').val(volume);

    //消音アイコンの要素を抽出
    var $icon = $(element).children('.glyphicon');
    
    //消音の真偽でアイコンを切り替え
    $icon.toggleClass('glyphicon-volume-up', !mute);
    $icon.toggleClass('glyphicon-volume-off', mute);
},

toggleClass()は、第一引数にクラスを指定します。第二引数を省略すると、要素に対してクラスの付与または削除の切り替えを行いますが、どちらか一方を明示する場合は、その真偽を第二引数に指定します。

最後に、音量バーのイベントから呼び出される関数です。

/* 音量バーの処理
 *  引数 element 音量バーの要素
 */
volume: function(element) {

    //音量バーから数値を抽出
    var volume = element.valueAsNumber;

    //プレーヤーに音量の値を保存
    this.volumeSaved = volume;

    //消音オプションに真偽を代入
    this.option.mute = !volume;

    //曲が格納されていれば音量と消音の有無を代入
    if (this.track) {
        this.track.volume = volume;
        this.track.muted = this.option.mute;
    }

    //消音アイコンの要素を抽出
    var $icon = $('.player-volume .glyphicon');

    //音量の有無でアイコンを切り替え
    $icon.toggleClass('glyphicon-volume-up', !!volume);
    $icon.toggleClass('glyphicon-volume-off', !volume);
},

toggleClass()に関して、第二引数に数値を直接代入しても問題ないと思いますが、念の為に!!などの指定で、数値を真偽に変換しています。

URL： ringil-music.com
ライブラリ： Bootstrap 3・JQuery 1.12.4