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

Player.playSelfの詳細

プレーヤーの再生アイコンから曲を再生する場合は、player.playSelf()を用います。

HTML側の実装

再生アイコンと一時停止アイコンを切り替える為に、両者を併記します。

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

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

        <!-- 再生アイコン -->
        <button class='player-play'> 
            <span class='glyphicon glyphicon-play'></span>
        </button>

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

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

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

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

CSSのクラスplayer-blockでアイコン全体を、player-block-btnで個々の調整を行います。span要素のクラスplayer-popupは、マウスでアイコンをホバーした時に表示するテキストを調整します。一時停止アイコンは、あらかじめCSSのdisplay: noneで非表示にしておきます。

Javascript側の実装

以下は、playerオブジェクトのメソッドで、記述を省略しています。

再生アイコンと一時停止アイコンのクリックイベントについて、

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

    //プレーヤーの再生と一時停止アイコンのクリックイベント登録
    $('.player-play, .player-pause')
        .on('click', this.playSelf.bind(this));

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

setEvent()は一連のイベントを登録します。複数の要素にまとめてイベント登録をするには、CSSと同様に,で区切って併記します。on()のコールバック関数に関してですが、呼び出された関数内のthisは、セレクタで指定された要素を指すので、これをplayerオブジェクトに向けるために、bind関数を用いています。第一引数の指定によって関数内のthisを束縛します。また、このbind関数の対応ブラウザを広げるために、MDNによるPolyfillを用いています。

続けて、イベントから呼び出された関数について、

//プレーヤーのアイコンからの再生処理
playSelf: function() {

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

    //曲が停止していれば再生し、再生中であれば一時停止
    this.track.paused ? this.track.play() : this.track.pause();

    //再生アイコンと一時停止アイコンの切り替え
    this.switchIcon();
},

プレーヤーが立ち上がるのは、前記事player.click()によるので、this.trackには既に曲が格納されていることを想定してます。この曲の状態によって、再生と一時停止をアイコンと共に切り替えます。

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

コメントを残す

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