Wie man anklickbare Audio Kapitellinks mit Mediaelement Player implementiert?

Question

Ich benutze den Mediaelement Player um Audio abzuspielen. Direkt unter dem Player möchte ich eine Liste von Kapiteln bereitstellen. Klickt der Benutzer auf das Kapitel, sollte der Spieler mit setCurrentTime() zur richtigen Zeit springen.

Dies ist, wie das Audio-Element eingebettet ist:

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

Der JavaScript, um den Media Spieler

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

Der HTML-Code für die Kapitel wie folgt aussieht zu initialisieren:

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

Wie Sie sehen können, wird die genaue Zeit zum Springen als data-chapter-time="00:05:29.310" zurhinzugefügtElement.

Mein JavaScript, die Klicks auf den Kapiteln zu reagieren ist diese:

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

Wenn ich auf ein Kapitel klicken Sie jetzt immer ich einen JavaScript-Fehler angezeigt:

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

Ich weiß nicht wirklich warum das passiert. Kann jemand helfen?

Die MediaElement Player-Standardsteuerelemente funktionieren übrigens ganz gut. Ich kann spielen, Pause usw.

Answer 1

Vielleicht können Sie versuchen, diese (dies ist eine Wordpress-Implementierung):

Im HTML, das Format des data-chapter-time Inhalts ändern. Übernehmen Sie das zweite Format anstelle des Timecode-Formats

* z.

data-chapter-time="6.375" * statt 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);