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

Javascript側の実装

イベント登録について、

//クリックイベントの登録
$('.player-audio-btn').on('click', function() {
    player.click($(this));
});		

.player-audio-btnの要素をクリックした時、下記にあるplayer.click()を呼び出します。on()のコールバック関数内のthisはセレクタで指定した要素そのもので、jQueryの関数を適用するために、あらかじめ$()で囲んで引数に渡します。

Playerオブジェクト

クリックイベントにより呼び出された、playerオブジェクトのメソッドについて、

//オーディオプレイヤーのオブジェクト
var player = {

    //曲をクリックした時の処理
    click: function($element) {

        //audio要素の取得
        var audio = $element.children('audio')[0];

        //data属性の取得
        var id = $element.attr('data-id');

        //初回起動時にプレイヤーの初期化
        if (this.on === undefined) this.init();

        //自身のメソッドによる曲の再生
        this.play(audio, Number(id));
    },

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

引数から渡された要素の、直下の子要素を取得するには、children()を用います。得られた要素は、0で始まる添字で格納されているので、数値の指定によって目的の要素を取り出します。data属性の取得に関しては前記事のとおりです。また、こちらのthisplayerオブジェクトを指し、自身のメソッドやプロパティを呼び出します。this.onは、プレイヤーの表示状態で、真偽の値を取ります。初期値はundefinedなので、訪問者が初回クリックした時に、プレイヤーの初期化を行うようにします。this.play()の引数にはaudio要素と、曲のidを渡します。attr()の戻り値は文字列なので、Number()によって数値に変換しています。

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

コメントを残す

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