Question

Having an issue with Jplayer changing a track when a link is clicked. It still plays the demo track from the player and doesn't play harry.mp3 or harry2.mp3

<tr><td>Tracklist:</td></tr>
<script>$('#mp31').click(function()
`{  $("#jp-player").jPlayer({   ready: function () {    $(this).jPlayer("setMedia", { mp3: "/harry.mp3",    });   },   swfPath: "/js",   supplied: "mp3"  }); });` </script>

<tr><td>1. </td><td><a href="" id="mp31">Test</a>Friend</a> (Techno)</td></tr>
<script>$('#mp32').click(function(){  $("#jp-player").jPlayer({   ready: function () {    $(this).jPlayer("setMedia", { mp3: "/harry2.mp3",    });   },   swfPath: "/js",   supplied: "mp3"  }); }); </script><tr><td>2. </td><td><a href="" id="mp32">Test</a>Enemy</a> (Ambient)</td></tr>

Can anyone please help, it's doing my head in.

CP

Was it helpful?

Solution

You have two instances of jplayer. According to your scenario, you should have only one. Also, take care of your typos. Finally, you could try with something like this:

<tr>
    <td>Tracklist:</td>
</tr>

<tr>
    <td>1.</td>
    <td><a class="song" href="http://my-website.com/mp31.mp3" id="mp31">Test</a>Friend</a> (Techno)</td>
</tr>
<tr>
    <td>2.</td>
    <td><a class="song" href="http://my-website.com/mp32.mp3" id="mp32">Test</a>Enemy</a> (Ambient)</td>
</tr>

The code above show you a list of <a> elements with the mp3 url that you want to play, so, by this way yo can update the player once the click them:

<script>
    $("#jp-player").jPlayer({
        ready: function () {
            $(this).jPlayer("setMedia", {
                mp3: "/harry.mp3"
            });
        },
        swfPath: "/js", supplied: "mp3"
    });

    $('.song').click(function (e) {
        e.preventDefault();

        // get the song url from the href attribute
        var song = $(this).attr('href');

        $("#jp-player").jPlayer({
            ready: function () {
                $(this).jPlayer("setMedia", {
                    mp3: song
                });
            },
            swfPath: "/js", supplied: "mp3"
        });
    });

</script>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top