Как реализовать интерактивные ссылки главы аудио с Mediaelement Player?

Question

Я использую плеер Mediaelement для воспроизведения звука. Прямо под игроком я хочу предоставить список глав. Если пользователь нажимает на главу, игрок должен прыгать в нужное время с setCurrentTime().

Это как встраивается звуковой элемент:

<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" в <li> элемент.

My JavaScript, чтобы реагировать на щелчки по главам это одна:

<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) 

Я действительно не знаю, почему это происходит. Может ли кто-нибудь помочь?

Элементы управления MediaElement Player по умолчанию отлично работают. Я могу играть, пауза и т.д.

Answer 1

Может быть, вы можете попробовать это (это WordPress реализация):

В HTML измените формат data-chapter-time контента. Принять формат второго, а не временного кода

* например.

data-chapter-time="6.375" * вместо data-chapter-time="00:00:06.375"

ЯШ:

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);