タイトル ・アイコンの変更 | HTML5オーディオプレーヤー

タイトルをプレーヤーに表示するgetTitle()と、再生と一時停止アイコンを切り替えるswitchIcon()のコードです。

HTML側の実装

タイトルを格納する要素のコードです。

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

    <!-- タイトルを格納 -->
    <li class='player-block-title'>

        <!-- タイトル -->
        <span class='player-title'>---</span>
    </li>

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

下記は以前に掲載したコードですが、参照の為に再掲します。

<!--音声ファイルを格納-->
<div class='btn player-audio-btn' data-id='0'>
    
    <!--音声ファイルのソース-->
    <audio preload='auto'>
        <source src='music/town.mp3' type='audio/mp3'>
    </audio>

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

    <!--曲のタイトル-->
    <span class='player-audio-title'>街</span>
</div>

Javascript側の実装

以下は、タイトル変更の処理です。

//タイトル表示の処理
getTitle: function() {

    //タイトルを格納している親要素の指定
    var element = '.player-audio-btn[data-id="' + this.id + '"]';

    //タイトルを抽出
    var title = $(element).children('.player-audio-title').text();

    //曲の番号
    var numCur = this.id + 1;

    //曲の総数
    var numTotal = this.list.length;

    //曲の総数が10以上であれば一桁の曲番号の頭に0を付与
    if (numTotal >= 10 && numCur < 10) numCur = '0' + numCur;

    //曲の番号とタイトルを表示
    $('.player-title').text(numCur + ' / ' + numTotal + ' ' + title);
},

data属性に関しては、以前の記事で扱っています。曲のidは、配列の添字に合わせて0から始まるので、プレーヤーの表示用に値を修正します。

次は、再生・一時停止アイコンの切り替え処理です。

//アイコンの変更
switchIcon: function() {

    //アイコンを格納している親要素の指定
    var element = '.player-audio-btn[data-id="' + this.id + '"]';

    //アイコンの要素を抽出
    var $icon = $(element).children('.glyphicon');

    //再生と一時停止アイコンの切り替え
    $icon.toggleClass('glyphicon-play');
    $icon.toggleClass('glyphicon-pause');

    //プレーヤー側のアイコンを格納している親要素を抽出
    $play = $('.player-play').parent();
    $pause = $('.player-pause').parent();

    //曲の停止の有無により要素の表示を切り替え
    if (this.track.paused) {
        $pause.hide();
        $play.show();
    } else {
        $play.hide();
        $pause.show();
    }
},

長くなるので割愛していますが、player-playplayer-pauseの要素は、こちらに掲載しています。
この処理を適用するアイコンの箇所は、曲の一覧表示部分とプレーヤー部分とで2か所あり、前者はクラスを変更することで切り替えますが、後者は要素の表示を切り替えることで対応しています。hide()を適用すると、その要素が非表示になり、逆に要素を表示させたい場合はshow()を適用します。

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

コメントを残す

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