Javascript音频与播放列表

Javascript audio with playlist

本文关键字：播放列表 音频 Javascript      更新时间：2023-09-26

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

如果你在顶部的script标签中查看页面的源代码就会看到

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

所以做一些类似的

相关文章：