Question

我使用Mediaelement Player播放音频。在玩家的下方，我想提供一个章节列表。如果用户点击章节，则播放器应使用setCurrentTime()跳转到正确的时间。

这是嵌入音频元素的方式：

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

用于初始化Mediaelement Player的JavaScript

$('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默认控件的工作正常。我可以玩，暂停等。

Answer 1

也许你可以试试这个（这是一个WordPress实现）：

在HTML 中，更改data-chapter-time内容的格式。采用第二种格式而不是时间码格式

* e.g。

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

如何使用Mediaelement Player实现可点击的音频章节链接？

1 个答案: