如何使用Mediaelement Player實現可點擊的音頻章節鏈接？

我使用Mediaelement Player播放音頻。在玩家的正下方，我想提供一個章節列表。如果用戶點擊章節，玩家應該跳到setCurrentTime()的正確時間。如何使用Mediaelement Player實現可點擊的音頻章節鏈接？

這是音頻元素是如何嵌入：

<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>元素。

我的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的默認控件工作得很好。我可以播放，暫停等

來源

2016-07-25 funkenstrahlen

也許你可以試試這個（這是一個WordPress實現）：

在HTML，改變data-chapter-time內容的格式。採用第二種格式代替時間碼格式

*例如， *代替

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

來源

2016-08-19 09:20:58 Maxim

如何使用Mediaelement Player實現可點擊的音頻章節鏈接？

回答

相關問題