javascript - 带有播放列表的 Javascript 音频

Question

Sup，我在我的 Rails 应用程序中使用了 audio.js 插件。我知道，audio.js 的 API 允许制作播放列表，但我没有找到它的任何文档。那么，如何使用 audio.js 或任何其他 js 音频插件实现播放列表？有一个将 audio.js 与播放列表一起使用的示例，但我不明白它是如何实现的。 http://kolber.github.io/audiojs/demos/test6.html

Answer 1

如果您在顶部的脚本标记内查看页面的源代码，则

<script>
      $(function() { 
        // 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();
          }
        });

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

        // Load in a track on click
        $('ol li').click(function(e) {
          e.preventDefault();
          $(this).addClass('playing').siblings().removeClass('playing');
          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 = $('li.playing').next();
            if (!next.length) next = $('ol li').first();
            next.click();
            // back arrow
          } else if (unicode == 37) {
            var prev = $('li.playing').prev();
            if (!prev.length) prev = $('ol li').last();
            prev.click();
            // spacebar
          } else if (unicode == 32) {
            audio.playPause();
          }
        })
      });
    </script>

如您所见，它从 url 中的 data-src 加载 URL

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

所以做类似的事情