1

我正在制作一个简单的 HTML5 音频播放列表 (audio.js)，它会更改为 Wordpress<article ul li>帖子中的下一首歌曲。所以我在遍历多个<article>标签并检索<ul li>每个 on.next()和.prev(). 我开始认为使用这些选择器不是最好的解决方案。

<script>
  $(function() { 
    // Setup the player to autoplay the next track
    var a = audiojs.createAll({
      trackEnded: function() {
        var next = $('article ul li').next();
        var title = $('img', this).attr("title");
            $("a.songtitle").text(title);
        if (!next.length) next = $('article ul li').first();
        audio.load($('a', next).attr('data-src'));
        audio.play();
      }
    });

    // Load in the first track
    var audio = a[0];
        first = $('article ul a').attr('data-src');
    $('article ul li').first();
    audio.load(first);

    // Load in a track on click
    $('article ul li').click(function(e) {
      e.preventDefault();
      var title = $('img', this).attr("title");
        $("a.songtitle").text(title);
      audio.load($('a', this).attr('data-src'));
      audio.play();
    });
    // Keyboard shortcuts
    $(document).keydown(function(e) {
      var unicode = e.charCode ? e.charCode : e.keyCode;
         // right arrow
      if (unicode == 39) {
        var next = $('article ul li').next();
        if (!next.length) next = $('ul li').first();
        next.click();
        // back arrow
      } else if (unicode == 37) {
        var title = $('img', this).attr("title");
            $("a.songtitle").text(title);
        var prev = $('article ul li').prev();
        if (!prev.length) prev = $('article ul li').last();
        prev.click();
        // spacebar
      } else if (unicode == 32) {
        audio.playPause();
      }
    })
  });
</script>

如何更改此代码以在多个<article ul li>标签之间切换以跳到下一首/上一首歌曲？任何帮助将不胜感激！谢谢！

编辑： 这就是我想要做的。但正如您所看到的，它不会将歌曲跳过到每个<article ul li>标签。Audio.js 会自动查找所有<a>标签并获取data-src加载歌曲的属性。http://jsfiddle.net/UkrZx/

4

2 回答 2

0

JSFIDDLE

 $(function() { 
        // Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('article > ul li.playing').next();
            var title = $('img', this).attr("title");
                $("a.songtitle").text(title);
            if (!next.length) next = $('article > ul li').first();
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });

        // Load in the first track
        var audio = a[0];
            first = $('article > ul li a').attr('data-src');
        $('article > ul li').first();
        audio.load(first);

        // Load in a track on click
        $('article > ul li').click(function(e) {
          e.preventDefault();
          var title = $('img', this).attr("title");
            $("a.songtitle").text(title);
          audio.load($('a', this).attr('data-src'));
          audio.play();
        });
        // Keyboard shortcuts
        $(document).keydown(function(e) {
          var unicode = e.charCode ? e.charCode : e.keyCode;
             // right arrow
          if (unicode == 39) {
            var next = $('article > ul li.playing').next();
            if (!next.length) next = $('article > ul li').first();
            next.click();
            // back arrow
          } else if (unicode == 37) {
            var title = $('img', this).attr("title");
                $("a.songtitle").text(title);
            var prev = $('article > ul li.playing').prev();
            if (!prev.length) prev = $('article > ul li').last();
            prev.click();
            // spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
      });

看起来您正在尝试修改此脚本，我希望我更多地了解 Wordpress 或 AUDIO.JS 脚本来帮助您。它似乎不想识别父母之外的任何东西，<li>但我可以让它在你的代码中播放第二首歌。祝你好运，我希望这会有所帮助。

编辑小成就......通过一些编辑（和更新的小提琴），我可以让它播放两首歌曲，但只能使用左箭头。很奇怪，我知道.. 但这是进步。

于 2013-07-16T01:59:06.270 回答
0

不知道为什么它不能识别下一个/上一个<article>元素，但我更改了原始的 Wordpress 帖子内容以仅输出元素之间的帖子<li>。奇怪，但至少它现在有效。

我的代码现在是这样的：http: //jsfiddle.net/HxVaj/2/。

于 2013-07-18T20:29:49.343 回答