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

Player.play()の詳細

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

    /* 再生時の処理
     *  引数 track クリックイベントで指定されたaudio要素   
     *  引数 id 曲別に付与された数値
     */    
    play: function(track, id) {

        //audio要素を取得できなければ処理を中断
        if (!track) return;

        //曲が再生中であれば一時停止
        if (!track.paused) {

            //曲の一時停止
            track.pause();
        } else {

            //既にプレーヤーで再生している曲があれば一時停止
            if (this.track && !this.track.paused) {

                //曲の一時停止
                this.track.pause();

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

            //プレーヤーで設定した音量を代入
            track.volume = this.volumeSaved;

            //消音オプションの真偽を代入
            track.muted = this.option.mute;

            //曲の再生
            track.play();

            //プレーヤーにaudio要素と曲のidを格納
            this.track = track;
            this.id = id;

            //再生リストの番号と曲のタイトルを表示
            this.getTitle();
        }

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

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

paused属性は、曲が一時停止かどうかを、真偽の値で返します。これを用いて、引数から受け取った、audio要素であるtrackが再生中であれば、pause()メソッドで、曲を一時停止します。trackが再生中でない場合、プレーヤーで既に再生している曲があるかどうか調べます。this.trackの値が存在し、尚且つ再生中であれば、それを一時停止し、this.switchIcon()で、一時停止アイコンから再生アイコンに切り替えます。audio要素のvolume属性は、0.0から1.0の値を取り、this.volumeSavedで、プレーヤーに設定した値を代入します。muted属性は、真偽の値をとり、オプションとして設定したthis.option.muteの値を代入します。play()メソッドで曲を再生した後、this.getTitle()で、曲の番号とタイトルをプレーヤーに表示し、引数であるtrackidを、playerオブジェクトのプロパティとして格納します。最後に、trackが再生中であったなら、一時停止アイコンから再生アイコンに、停止中であったなら、再生アイコンから一時停止アイコンに切り替えます。

※11月19日

this.getTitle()のコードの順序を修正

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

コメントを残す

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