Menu

CODE

jquery(jPlayer)でaudioを自動再生、自動遷移させる、選択により遷移先を変更させる

2019/07/11 更新日:2020/05/04
デモページへ
仕様書

音声の自動再生とページの音声が終了した時に自動で任意ページに繊維させる方法のご紹介になります。

使用したプラグインはこちらjplayer

最低限の再生、停止機能を備えて、再生残り時間の表示のUIを備えています。 また選択画面ページでは選択リンクを用意してユーザーに分岐を選ばせるということも可能です。(この場合は自動繊維をOFFにすることも可能です。)

先ずはHTMLを設定します

先ずはid="jplayer_1"のセクレタにてjPlayerの動くセレクタを指定して、その中のでaudioタグにて素材のaudioのパスを通します。
またコントロール用のタグだったり、duration timeが入るタグなどを設置していきます。

<div id="jplayer_1" class="jp_jplayer_audio">
    <audio preload="metadata" src="audio/1.mp3"></audio>
</div>
<div id="jp_container_1" class="jp-audio" role="application" aria-label="media player">
    <div class="jp_audio_plyaer">
        <div class="jp_audio_interface">
            <div class="jp_audio_interface_flex">
                <div class="jp_audio_interface_block">
                    <div class="jp_controls">
                    <button class="jp-play" role="button" tabindex="0">play</button>
                    </div>
                </div>
            <div class="jp-seek-bar">
        <div style="overflow: auto;" class="jp-play-bar"></div>
        </div>
    </div>
        <div class="jp_time">
            <div class="jp-duration" role="timer" aria-label="duration">00:00</div>
            </div><!--time-->
        </div><!--interface-->
    </div>
</div>

次にJSでオプションの初期設定をしていきます。

先ずはHTML読み込み時点で設定したid="jplayer_1"で設定したaudioを読み込んで再生していきます。
またオプションのended: function(event) {document.location.href = '2.html';}, で次に読み込むHTMLを指定していきます。

$(function() {
    $('#jplayer_1')
        .jPlayer({
            ready: function() {
            $(this)
                .jPlayer('setMedia', {
                mp3: 'audio/1.mp3'
            })
            .jPlayer('play');
         },
        preload: 'auto',
        ended: function(event) {
            document.location.href = '2.html';
        },
        muted: false,
        useStateClassSkin: true,
        autoBlur: false,
        smoothPlayBar: value,
        keyEnabled: true,
        remainingDuration: true,
        wmode: 'window',
        volume: 0.5
    })
        .bind($.jPlayer.event.play, function() {
        $(this).jPlayer('pauseOthers');
    });
});

最後のページで止める

このページで再生を終了させる方法は上記で説明した部分を$(this).jPlayer('stop');に変更します

ended: function(event) {
    $(this).jPlayer('stop');
 },

選択を分岐させる

これは単純にHTMLによってリンク先を設定していきます。このページの部分のリンク先です

 <div class="reading-player__selcet">
      <a class="reading-player__selcet-item reading-player__selcet-item--1" href="3-1.html">選択肢1</a>
      <a class="reading-player__selcet-item reading-player__selcet-item--2" href="3-2.html">選択肢2</a>
</div>