オプション 連続再生・リピート再生 | HTML5オーディオプレーヤー

今回はオプションの切り替えに関する、連続再生・リピート再生のコードです。

HTML側の実装

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

    <!-- 連続再生アイコンを格納 -->
    <li class='player-block-btn'>

        <!-- 連続再生アイコン -->
        <button class='player-auto player-color-off'> 
            <span class='glyphicon glyphicon-arrow-right'></span>
        </button>

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

    <!-- リピート再生アイコンを格納 -->
    <li class='player-block-btn'>

        <!-- リピート再生アイコン -->
        <button class='player-repeat player-color-off'> 
            <span class='glyphicon glyphicon-repeat'></span>
        </button>

        <!-- リピート再生アイコンのポップアップテキスト -->
        <span class='player-popup'>リピート再生</span>
    </li>

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

通常、アイコンは白色ですが、player-color-offのクラスを付与することで、灰色に変更しています。

/* CSS */
.player-color-off {
    color: grey !important;
}

プロパティの後ろに!importantを付けることで、プロパティの適用の順序に関して、優先的に扱われるようになります。

Javascript側の実装

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

    //連続再生アイコンのクリックイベント登録
    $('.player-auto').on('click', function() {
        player.changeOption(this, 'auto');
    });

    //リピート再生アイコンのクリックイベント登録
    $('.player-repeat').on('click', function() {
        player.changeOption(this, 'repeat');
    });

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

/* オプションの変更処理
 *  引数 element 該当オプションの要素
 *  引数 type オプション名の文字列
 */
changeOption: function(element, type) {

    //オプションの真偽の切り替え
    var bool = !this.option[type];
    this.option[type] = bool;

    //該当アイコンの色を切り替え
    $(element).toggleClass('player-color-off', !bool);
},

アイコンがクリックされる毎に、オプションの真偽を切り替え、それに合わせてクラスの付与・除去により、アイコンの色を変更します。this.optionは、オプションの真偽を格納したオブジェクトで、現在のところ、消音を含めて3種類実装しています。

//オプションの初期値
option: {
    auto: false,
    repeat: false,
    mute: false,
},

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

コメントを残す

メールアドレスが公開されることはありません。