0

我正在尝试复制播放器的以下行为：http: //kolber.github.io/audiojs/demos/test6.html除了这一点之外，我什么都能做（您可以查看页面源代码以获取完整代码）

// Setup the player to autoplay the next track
        var a = audiojs.createAll({
          trackEnded: function() {
            var next = $('ol li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.addClass('playing').siblings().removeClass('playing');
            audio.load($('a', next).attr('data-src'));
            audio.play();
          }
        });

演示页面具有以下结构：

<ol> 
  <li class="playing">
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a>
  </li>

  <li class="playing">
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a>
  </li>

  <li class="playing">
    <a href="#" data-src="http://s3.amazonaws.com/audiojs/01-dead-wrong-intro.mp3">dead wrong intro</a>
  </li>

  <!-- Etc -->
</ol>

但是我的页面具有以下结构：

<div class="main">
  <article class="article>

    <!-- .. -->
    <div class="article-footer>
      <ul>
        <li>
          <a class="article-play" href="#" data-src="http://somesongurl.com/file.mp3"></a>
        </li>
      </ul>
    </div>

  </article>
</div>

因此，在每篇文章中都有一个带有文章播放类的锚标签，这些标签与里面演示页面中的锚标签相同<ol>所以我想自动播放每个锚标签，问题是它们不在里面<ol>，而是在实际的单独文章中。我试过这个：

          // Setup the player to autoplay the next track
          var a = audiojs.createAll({
          trackEnded: function() {
              var next = $('.main a.playing').next();
              if (!next.length) next = $('.main a.article-play').first();
              next.addClass('playing').siblings().removeClass('playing');
              audio.load($('.article-play', next).attr('data-src'));
              audio.play();
          }
      });

但它不起作用，一旦歌曲播放完毕并且应该切换到音频标签内的下一个 src 变成src="undefined"我是 jQuery 新手，可能不明白如何实现正确的结构，所以我正在向社区寻求帮助.

编辑在每个 .article-footer div 中还有其他带有锚标记的列表元素。因此，需要从具有 .article-play 类的锚点专门查找播放器的 src

4

1 回答 1

0

next()正在获取元素的下一个兄弟。在您的代码中，您试图获取锚标记的下一个兄弟，但在一个列表项中只有一个锚元素。您可以解决此问题，将“正在播放”类添加到列表项而不是锚标记，然后您的播放器应该可以按预期工作。

所以代替这个：

var next = $('.main a.playing').next();

用这个：

var next = $('.main li.playing').next();

这样列表项将获得“正在播放”类，您将能够访问下一个列表项。

jQuery 文档：http ://api.jquery.com/next/

于 2013-06-04T19:30:42.760 回答