1

私は audio.js を使用して動的プレイリストを作成しています。<ol>ユーザーが順序なしリストのリンクをクリックすると、オーディオ プレーヤーのプレイリストを提供する順序付きリスト ( ) にリンクが追加されます。

私は jQuery を動作させ、新しいリスト項目を Un-Ordered リストから Ordered リストに追加しました。ただし、プレーヤーはクリックしても新しく追加された曲を再生せず、次のトラックとして移動しません。

オーディオ プレーヤーは、Web サイトがロードされたときに最初にプレイリストにあった曲のみを再生しますが、ロード後に追加した曲を認識しません。何か助けはありますか？

audio.js サンプル プレイリストへのリンクは次のとおりです: http://kolber.github.io/audiojs/demos/test6.html

これは、jQuery が追加された曲を含む私のバージョンへのリンクです: http://tinyurl.com/kg9clpb

プレーヤーをセットアップするための Audio.js デモ ソース コード:

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

Aud-oplayer および Both リストの HTML:

  <audio ></audio>
  <h2>Playlist</h2>
  <ol id="userPlaylist">
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/02-juicy-r.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>
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/04-islands-is-the-limit.mp3">islands is the limit</a></li>
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/05-one-more-chance-for-a-heart-to-skip-a-beat.mp3">one more chance for a heart to skip a beat</a></li>
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/06-suicidal-fantasy.mp3">suicidal fantasy</a></li>
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/07-everyday-shelter.mp3">everyday shelter</a></li>
    <li><a href="#" data-src="http://kolber.github.io/audiojs/demos/mp3/08-basic-hypnosis.mp3">basic hypnosis</a></li>
    <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>
  <h3>Songs Not it Playlist - Click to add to Playlist</h3>
  <ul id="mainSite">
  <li><a href="#" data-src="http://www.jussbuss.tv/testing/sapi/mp3/john-fenton_dive-table.mp3">john-fenton_dive-table</a></li>
  </ul>

クリック時に別のリストから曲を追加するための私のコード:

 <script>
 $("ul#mainSite li").on("click", "a", function(e){

     e.preventDefault();


      var addLink = $(this).attr('data-src');


      $("ol#userPlaylist").append('<li> <a href="#" data-src="'+addLink+'">NEW 
          SONG</li>');

     });

 </script>
4

1 に答える 1

0

私があなたのことを正しく理解していれば、あなたの問題は、プレーヤーがあなたのリストに関連していないことです. プレーヤーは SWF プレーヤーであるため、プレーヤーを制御する必要がありました (フィードして再生を開始します)。

魔法は次の場所にあります。

audio.load($('a', next).attr('data-src'));
audio.play();

完全なコード:

http://kolber.github.io/audiojs/audiojs/audio.js

さらに役立つように、デモの完全なコードを読んで理解してください (すべてをダウンロードしてコードで遊んでください)。

http://kolber.github.io/audiojs/demos/test6.html

そして、あなたはすぐにあなたの答えを見つけるでしょう。

于 2014-06-15T00:15:21.600 に答える