Mediaelement Playerでクリック可能なオーディオチャプターリンクを実装する方法は？

Question

私は、Mediaelement Playerを使ってオーディオを再生します。プレーヤーの真下で、私は章のリストを提供したいと思います。ユーザーがチャプターをクリックすると、プレーヤーはsetCurrentTime()で正しい時刻にジャンプする必要があります。

これはaudio要素が埋め込まれている方法です。

<audio src="file.mp3" preload="none"></audio> 

のJavaScriptのMediaElementプレーヤー

$('audio').mediaelementplayer({ 
    audioWidth: '100%' 
}); 

を初期化するために、各章のためのHTMLは次のようになります。

<ul class="podcast-links-list"> 
    <li data-chapter-time="00:00:00.000"><a href="#" class="btn btn-success btn-sm">00:00:00</a> <span class="podcast-link-cite">Intro</span></li> 
    <li data-chapter-time="00:02:26.375"><a href="#" class="btn btn-success btn-sm">00:02:26</a> <span class="podcast-link-cite">Wie funktioniert Minecraft?</span></li> 
    <li data-chapter-time="00:05:29.310"><a href="#" class="btn btn-success btn-sm">00:05:29</a> <span class="podcast-link-cite">Crafting</span></li> 
</ul> 

あなたが見ることができるように、ジャンプする正確な時間は、data-chapter-time="00:05:29.310"としてに追加されます要素。

<script type="text/javascript"> 
(function($) { 
    // call the functions if the user clicks on the li 
    $('ul.podcast-links-list li').each(function(){ 
     $(this).click(function(){ 
      // fetch the player object 
      var player = $('audio').mediaelementplayer({     
       success: function (me) { 
        alert($(this).data('chapter-time')); 
        // jump to the correct time, which is stored in data-chapter-time 
        player.setCurrentTime($(this).data('chapter-time')); 
        player.play(); 
       } 
      }); 
     }); 
    }); 
})(jQuery); 
</script> 

私は章をクリックすると、今私は常にJavaScriptエラーを取得：

TypeError: $('audio').mediaelementplayer is not a function. (In '$('audio').mediaelementplayer', '$('audio').mediaelementplayer' is undefined) 

私は本当に知らない

私はJavaScriptの章のクリックに反応するが、これは1でありますなぜこれが起こるのか？誰も助けることができますか？

MediaElement Playerのデフォルトコントロールは、うまく動作します。 data-chapter-timeコンテンツのフォーマットを変更する、HTMLで

：私はたぶん、あなたがこれを（これはWordPressの実装です）試みることができるなど、一時停止、

Answer 1

を再生することができます。タイムコード形式の代わりに秒の形式を使用してください。

*

data-chapter-time="6.375" *の代わりに、data-chapter-time="00:00:06.375"

JS：

settings.success = function (mejs) { 
    $('ul.podcast-links-list li').on("click", function(e){ 
    e.preventDefault(); 
    mejs.setCurrentTime($(this).data('chapter-time')); 
    mejs.play(); 
    }); 
} 

$('.wp-audio-shortcode, .wp-video-shortcode').mediaelementplayer(settings);