JQueryによるAudio再生 5 | HTML5オーディオプレーヤー

曲の停止

再生中の曲を停止する場合、player.stop()を用います。
HTML側の実装は前回と同様です。

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

    <!-- 停止アイコンとポップアップを格納 -->
    <li class='player-block-btn'>

        <!-- 停止アイコン -->
        <button class='player-stop'> 
            <span class='glyphicon glyphicon-stop'></span>
        </button>

        <!-- 停止アイコンのポップアップテキスト -->
        <span class='player-popup'>停止</span>
    </li>
    
    <!-- 他の要素は省略 -->
    ・・・
</ul>

イベント登録と、呼び出される関数について、

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

    //プレーヤーの停止アイコンのクリックイベント登録
    $('.player-stop').on('click', this.stop.bind(this));

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

//曲の停止処理
stop: function() {

    //プレーヤーに曲が格納されてなければ処理を中断
    if (!this.track) return;

    //曲が再生中であれば一時停止しアイコンを変更
    if (!this.track.paused) {
        this.track.pause();
        this.switchIcon();
    }

    //曲の再生位置を初期化
    this.track.currentTime = 0;
},

曲の再生位置を変更するには、currentTime属性を用います。単位は秒で、ここでは0を指定して、曲の頭に再生位置を戻しています。

再生完了時の処理

曲が最後まで再生された時、イベントのendedが発火するので、処理を適用する場合は、このイベントを利用します。

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

    //再生完了時のイベント登録
    $('audio').on('ended', this.ended.bind(this));

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

//再生完了時の処理
ended: function() {

    //オプションのリピート再生が真なら再び曲を再生
    if (this.option.repeat) {
        this.track.play();	
        return;
    }

    //曲を一時停止してアイコンを変更
    this.track.pause();
    this.switchIcon();

    //オプションの連続再生が真ならリストの次曲を再生
    if (this.option.auto) this.change(true, true);
},

this.option.repeatは、曲のリピート再生に関するオプションです。これが真なら、現在の曲を再び再生し、偽なら、曲を一時停止しアイコンも切り替えます。this.option.autoは連続再生に関するオプションで、真であれば、プレーヤーのリストに登録されている次曲を、this.change()により再生します。尚、モバイルのiOSでは、ユーザーの直接的な入力でないと、曲が再生されないので、これらのオプションはPCのみに表示しています。

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

コメントを残す

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