0

私はJPlayerを初めて使用しますが、JPlayerの使い方がよくわかりません。MP3ファイルのみを使用するプレーヤーを作成しようとしていますが、すべてのブラウザーがMP3再生をネイティブにサポートしているわけではないため、プレーヤーが機能するには、場合によってはFlashフォールバックを使用する必要があります。

現在、Playerを単一のMP3で動作させることができますが、複数のMP3が追加されると、最初のトラックのみが再生されます。

これが私の現在のスクリプトです

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>
<script type='text/javascript'>//<![CDATA[ 
$(function(){
$("#jquery_jplayer").jPlayer({
    ready: function () {
      $(this).jPlayer("setMedia", { mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3" }, 
      { mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3" });
    },
    swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
    supplied: "mp3",
    volume: 1,
    wmode:"window",
    solution: "html,flash",
    errorAlerts: true,
    warningAlerts: false

});
});//]]>  
</script>
</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous" tabindex="1">Previous</a></li>
          <li><a href="#" class="jp-next" tabindex="1">Next</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

どこかでおかしくなったとは言えますが、どこかわかりません。よろしくお願いします。スクリプトを自由に変更して機能させるようにし、場合によっては機能する例を紹介してください。

ご協力ありがとうございました。

4

1 に答える 1

0

jPlyer の代わりに jPlayerPlaylist を使用する必要があります。

 <!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Player</title>
<script type='text/javascript' src='http://code.jquery.com/jquery-1.6.4.js'></script>
<script type='text/javascript' src="http://www.jplayer.org/latest/js/jquery.jplayer.min.js"></script>
<script type="text/javascript" src="js/jplayer.playlist.min.js"></script>

</head>
<body>
<div id="jquery_jplayer"></div>
<div id="jp_container_1" class="jp-audio">
    <div class="jp-type-single">
      <div id="jp_interface_1" class="jp-interface all_rounded_corners">
        <ul class="jp-controls">
          <li><a href="#" class="jp-play pp" tabindex="1">play</a></li>
          <li><a href="#" class="jp-pause pp" tabindex="1">pause</a></li>
          <li><a href="#" class="jp-previous" tabindex="1">Previous</a></li>
          <li><a href="#" class="jp-next" tabindex="1">Next</a></li>
        </ul>
        <div class="jp-progress">
          <div class="jp-seek-bar">
            <div class="jp-play-bar"></div>
          </div>
        </div>
      </div>
    </div>
</div>
</body>
</html>

<script type='text/javascript'>//<![CDATA[ 

var myPlaylist = null;
 $(document).ready(function () {
 myPlaylist = new jPlayerPlaylist(
                        {
                            jPlayer: "#jquery_jplayer_N",
                            cssSelectorAncestor: "#jp_container_N"
                        },
                        [
                            {
                                mp3: "http://www.jplayer.org/audio/mp3/TSP-01-Cro_magnon_man.mp3",
                            }
                        ],
                        {
                            playlistOptions: {
                                enableRemoveControls: true
                            },

                            swfPath: "http://www.jplayer.org/latest/js/Jplayer.swf",
                            supplied: "mp3",
                            solution: "html,flash"

                        });


 myPlaylist.option("autoPlay", true);

myPlaylist.add({ title: "", artist: "", mp3: "http://www.jplayer.org/audio/mp3/TSP-05-Your_face.mp3", poster: "", });
});
</script>
于 2012-12-11T08:44:17.523 に答える