在同一网页上使用多个audio.js播放列表播放器？

时间：2016-09-02 01:19:55

标签： javascript jquery playlist audio-player

我正在使用kolber.github.io/audiojs/demos/test6.html audio.js播放列表播放器（示例5）。这很好用。但是，我想在同一页面上使用它的两个实例。

我试过了，第二个实例播放器只显示一个旋转的圆圈（而不是播放的箭头）..如果你选择第二组中的任何一首歌，它会播放，但会显示为第一个播放播放器。

您可以在此处在线查看我的尝试：www.allanzavod.com/test-music3.htm

你能告诉我我是否遗失了什么？或不 多个播放器也可以播放列表选项。 （我知道你可以有多个播放器没有播放列表 - 如'自定义标记/ css'的示例2所示：kolber.github.io/audiojs/demos/test2.html）。

最初，我猜测问题是我有两个id =“wrapper”的div（来自原始代码示例）。但我想当我更改了ID的名称时，它不会与javascript凝聚。

有什么建议吗？任何帮助将不胜感激！

（对不起，我试了一个小时来获得一个jsfiddle设置，但是无法获得外部引用来处理它。希望你能从实例中看到足够的：www.allanzavod.com/test-music3.htm）

以下是代码段：

      $(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();
          }
        })
      });
* {padding: 0; margin: 0;} 


@font-face {
    font-family: 'BD Graduate';
    src: url('fonts/bdgrad.eot');  /* EOT file for IE */
    src: local('BD Graduate'), url('fonts/bdgrad.ttf') format('truetype');
}


HTML, BODY { 
  scrollbar-base-color: #90373A;
  scrollbar-shadow-color: #000000;
  scrollbar-highlight-color: #000000;
  scrollbar-arrow-color: #000000;	
}


html { 
    height: 100%; 
    margin-bottom: 1px; 
    background-color: #000;
    background-image: url("images/zavod_dark_back3_tile.jpg");	
    background-attachment: fixed;
    background-repeat: repeat-x;
    background-position: center top;
}
 
	
body {
    margin-width: 0px;
    margin-height: 0px;
    margin-top: 0px;
    margin-right: 0px;
    margin-bottom: 0px;
    margin-left: 0px;
/*    background-image: url("images/zavod_dark_back5b.jpg");	*/
    background-image: url("images/zavod_dark_back6b.jpg");	
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-position: center 30px; 
    font-family: Arial, Helvetica, sans-serif;
    color: #B4B4B4;	/* sets the default type color */
}



a {
	color: #fff;
/*	color: #90373A;  */
	text-decoration: underline;
}

a:hover {
	color: #FBDDA0;
	text-decoration: none;
}

a.darklink {
	color: #fff;
	text-decoration: underline;
}

a.darklink:hover {
	color: #FBDDA0;
	text-decoration: none;
}





p {
	line-height: 140%;
	color: #B4B4B4;
	font-size: 14px;
	font-weight: normal;
}


ul {
	font-size: 14px;
	line-height: 140%;
	font-weight: normal;
    list-style-type: disc;
	display: block;
	float: left;
	text-align: left;
	padding-left: 15px;
	margin-left: 15px;
	margin-right: 10px; 
}


ol {
	font-size: 14px;
	line-height: 140%;
	font-weight: normal;
    list-style-type: disc;
	display: block;
	float: left;
	text-align: left;
	padding-left: 15px;
	margin-left: 15px;
}





#album1wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
#album1wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
#album1wrapper h1 em { font-style: normal; color: #999; }
#album1wrapper a { color: #888; text-decoration: none; }
#album1wrapper { width: 400px; margin: 0px auto 40px auto; }

#album1wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
#album1wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
#album1wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
#album1wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
#album1wrapper li.playing a { color: #fff; }
#album1wrapper li.playing:before { content: '\266C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }

@media screen and (max-device-width: 480px) {
#album1wrapper { position: relative; left: -3%; }
}

#album2wrapper { color: #666; font-family: sans-serif; line-height: 1.4; }
#album2wrapper h1 { color: #444; font-size: 1.2em; padding: 0px 2px 12px; margin: 0px; }
#album2wrapper h1 em { font-style: normal; color: #999; }
#album2wrapper a { color: #888; text-decoration: none; }
#album2wrapper { width: 400px; margin: 0px auto 40px auto; }

#album2wrapper ol { padding: 0px; margin: 0px; list-style: decimal-leading-zero inside; color: #ccc; width: 460px; border-top: 1px solid #ccc; font-size: 0.9em; }
#album2wrapper ol li { position: relative; margin: 0px; padding: 9px 2px 10px; border-bottom: 1px solid #ccc; cursor: pointer; }
#album2wrapper ol li a { display: inline-block; text-indent: -3.3ex; padding: 0px 0px 0px 20px; }
#album2wrapper li.playing { color: #aaa; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3); }
#album2wrapper li.playing a { color: #fff; }
#album2wrapper li.playing:before { content: '\266C'; width: 14px; height: 14px; padding: 3px; line-height: 14px; margin: 0px; position: absolute; left: -24px; top: 9px; color: #fff; font-size: 13px; text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4); }

@media screen and (max-device-width: 480px) {
#album2wrapper { position: relative; left: -3%; }
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">



<head>


<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script src="http://www.allanzavod.com/audiojs/audio.js"></script>
	
	

</head>

<body  OnLoad="window.focus();">

	<br clear="all" /><br />
	<br clear="all" /><br />

	<div id="album1wrapper">
      <h1>wait what - notorious xx <em>(2009)</em></h1>
      <audio preload></audio>
      <ol>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a></li>
      </ol>
    </div>

	
	
	<br clear="all" /><br />
	<br clear="all" /><br />

	
	<div id="album2wrapper">
      <h1>wait what - notorious xx <em>(2009)</em></h1>
      <audio preload></audio>
      <ol>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a></li>
        <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a></li>
      </ol>
    </div>

</body>
</html>

1 个答案:

答案 0 :(得分：1)

您只将事件附加到第一个<audio>元素。 javascript的每个部分都需要使用<audio>，audio，.closest()，$.each()为每个.each()元素和.index()变量过滤任务，.find() 

$(function() {

  var a = audiojs.createAll({
    trackEnded: function() {
      var el = $(this.element);
      var next = el.closest(".audiojs").next('ol').find("li.playing").next();
      if (!next.length) next = el.closest(".audiojs").next("ol").find("li").first();
      next.parent().find(".playing").removeClass("playing");
      next.addClass('playing');
      el.attr("src", $('> a', next).attr('data-src'));
      el.on("canplay", function() {
        this.play()
      })
    }
  });
  // Load in the first track
  var audio = a;
  $.each(audio, function(index, el) {
    var first = $(el.wrapper).next("ol").find("li:first")
      .addClass("playing").find("a").attr("data-src");
    el.load(first);
  });
  // Load in a track on click
  $('ol li').click(function(e) {
    var index = $(this).closest("ol").index("ol");
    e.preventDefault();
    $(this).addClass('playing').siblings()
      .removeClass('playing');
      var el = $('> a', this);
      el.attr("src", el.attr('data-src'));
      el.on("canplay", function() {
        this.play()
      })
  });
  // Keyboard shortcuts
  $(document).keydown(function(e) {
    var unicode = e.charCode ? e.charCode : e.keyCode;
    var elems = $('li.playing');
    elems.each(function(i, el) {
      var curr = $(el);
      // right arrow
      if (unicode == 39) {
        var next = curr.next();
        if (!next.length) {
          next = curr.closest("ol").find("li").first();
          next.click();
        }
        // back arrow
      } else if (unicode == 37) {
        var prev = curr.prev();
        if (!prev.length) {
          prev = curr.closest("ol").find("li").last();
          prev.click();
        }
        // spacebar
      } else if (unicode == 32) {
        $.each(audio, function(i, media) {
          media.playPause();
        })
      }
    })
  })
});
* {
  padding: 0;
  margin: 0;
}
@font-face {
  font-family: 'BD Graduate';
  src: url('fonts/bdgrad.eot');
  /* EOT file for IE */
  src: local('BD Graduate'), url('fonts/bdgrad.ttf') format('truetype');
}
HTML,
BODY {
  scrollbar-base-color: #90373A;
  scrollbar-shadow-color: #000000;
  scrollbar-highlight-color: #000000;
  scrollbar-arrow-color: #000000;
}
html {
  height: 100%;
  margin-bottom: 1px;
  background-color: #000;
  background-image: url("images/zavod_dark_back3_tile.jpg");
  background-attachment: fixed;
  background-repeat: repeat-x;
  background-position: center top;
}
body {
  margin-width: 0px;
  margin-height: 0px;
  margin-top: 0px;
  margin-right: 0px;
  margin-bottom: 0px;
  margin-left: 0px;
  /*    background-image: url("images/zavod_dark_back5b.jpg");	*/
  background-image: url("images/zavod_dark_back6b.jpg");
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center 30px;
  font-family: Arial, Helvetica, sans-serif;
  color: #B4B4B4;
  /* sets the default type color */
}
a {
  color: #fff;
  /*	color: #90373A;  */
  text-decoration: underline;
}
a:hover {
  color: #FBDDA0;
  text-decoration: none;
}
a.darklink {
  color: #fff;
  text-decoration: underline;
}
a.darklink:hover {
  color: #FBDDA0;
  text-decoration: none;
}
p {
  line-height: 140%;
  color: #B4B4B4;
  font-size: 14px;
  font-weight: normal;
}
ul {
  font-size: 14px;
  line-height: 140%;
  font-weight: normal;
  list-style-type: disc;
  display: block;
  float: left;
  text-align: left;
  padding-left: 15px;
  margin-left: 15px;
  margin-right: 10px;
}
ol {
  font-size: 14px;
  line-height: 140%;
  font-weight: normal;
  list-style-type: disc;
  display: block;
  float: left;
  text-align: left;
  padding-left: 15px;
  margin-left: 15px;
}
#album1wrapper {
  color: #666;
  font-family: sans-serif;
  line-height: 1.4;
}
#album1wrapper h1 {
  color: #444;
  font-size: 1.2em;
  padding: 0px 2px 12px;
  margin: 0px;
}
#album1wrapper h1 em {
  font-style: normal;
  color: #999;
}
#album1wrapper a {
  color: #888;
  text-decoration: none;
}
#album1wrapper {
  width: 400px;
  margin: 0px auto 40px auto;
}
#album1wrapper ol {
  padding: 0px;
  margin: 0px;
  list-style: decimal-leading-zero inside;
  color: #ccc;
  width: 460px;
  border-top: 1px solid #ccc;
  font-size: 0.9em;
}
#album1wrapper ol li {
  position: relative;
  margin: 0px;
  padding: 9px 2px 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
#album1wrapper ol li a {
  display: inline-block;
  text-indent: -3.3ex;
  padding: 0px 0px 0px 20px;
}
#album1wrapper li.playing {
  color: #aaa;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
#album1wrapper li.playing a {
  color: #fff;
}
#album1wrapper li.playing:before {
  content: '\266C';
  width: 14px;
  height: 14px;
  padding: 3px;
  line-height: 14px;
  margin: 0px;
  position: absolute;
  left: -24px;
  top: 9px;
  color: #fff;
  font-size: 13px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}
@media screen and (max-device-width: 480px) {
  #album1wrapper {
    position: relative;
    left: -3%;
  }
}
#album2wrapper {
  color: #666;
  font-family: sans-serif;
  line-height: 1.4;
}
#album2wrapper h1 {
  color: #444;
  font-size: 1.2em;
  padding: 0px 2px 12px;
  margin: 0px;
}
#album2wrapper h1 em {
  font-style: normal;
  color: #999;
}
#album2wrapper a {
  color: #888;
  text-decoration: none;
}
#album2wrapper {
  width: 400px;
  margin: 0px auto 40px auto;
}
#album2wrapper ol {
  padding: 0px;
  margin: 0px;
  list-style: decimal-leading-zero inside;
  color: #ccc;
  width: 460px;
  border-top: 1px solid #ccc;
  font-size: 0.9em;
}
#album2wrapper ol li {
  position: relative;
  margin: 0px;
  padding: 9px 2px 10px;
  border-bottom: 1px solid #ccc;
  cursor: pointer;
}
#album2wrapper ol li a {
  display: inline-block;
  text-indent: -3.3ex;
  padding: 0px 0px 0px 20px;
}
#album2wrapper li.playing {
  color: #aaa;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3);
}
#album2wrapper li.playing a {
  color: #fff;
}
#album2wrapper li.playing:before {
  content: '\266C';
  width: 14px;
  height: 14px;
  padding: 3px;
  line-height: 14px;
  margin: 0px;
  position: absolute;
  left: -24px;
  top: 9px;
  color: #fff;
  font-size: 13px;
  text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.4);
}
@media screen and (max-device-width: 480px) {
  #album2wrapper {
    position: relative;
    left: -3%;
  }
}
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script src="http://www.allanzavod.com/audiojs/audio.js"></script>
</head>
<body onload="window.focus();">
  <br clear="all" />
  <br />
  <br clear="all" />
  <br />

  <div id="album1wrapper">
    <h1>Album 1</h1>
    <audio preload></audio>
    <ol>
      <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/01-dead-wrong-intro.mp3">dead wrong intro</a>
      </li>
      <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.mp3">juicy-r</a>
      </li>
      <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/03-its-all-about-the-crystalizabeths.mp3">it's all about the crystalizabeths</a>
      </li>
    </ol>
  </div>

  <br clear="all" />
  <br />
  <br clear="all" />
  <br />

  <div id="album2wrapper">
    <h1>Album 2</h1>
    <audio preload></audio>
    <ol>
      <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/09-infinite-victory.mp3">infinite victory</a>
      </li>
      <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/10-the-curious-incident-of-big-poppa-in-the-nighttime.mp3">the curious incident of big poppa in the nighttime</a>
      </li>
      <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/11-mo-stars-mo-problems.mp3">mo stars mo problems</a>
      </li>
    </ol>
  </div>

</body>

</html>

相关问题
最新问题