Playing song on JPlayer from an onclick event

Question

I need to be able to set up links that will send a song to a central JPlayer.

For example, on a store and someone wants to sample a track before purchasing it, you click on the link and it sends the information to JPlayer and starts playing said track.

I have seen examples of using some similar to below in other stackoverflow questions here (7 years old) however cannot get it to work.

Update: I have tried the below but the link doesn't do anything.

$(document).ready(function(){
$("#jquery_jplayer").jPlayer({
    swfPath: "../../dist/jplayer",
    supplied: "mp3",
    wmode: "window"
});

$('a[data-mp3]').click(function(e) {
    e.preventDefault();

    // replace #my-j-player by the id of your instance
    $("#jquery_jplayer").jPlayer("setMedia", {
        mp3: $(this).attr("data-mp3"),
        oga: $(this).attr("data-ogg")
    }).jPlayer("play");
});
});

<a href="#" data-mp3="http://www.jplayer.org/audio/mp3/Miaow-01-Tempered-song.mp3">TEST</a>

Telling us you “seen examples” and throwing in a line of code without any actual context isn’t very helpful. Please go read [ask], and then edit your question accordingly. — 04FS, Mar 11 '19 at 11:44

TOPKAT · Answer 1 · 2019-03-11T20:46:32.780

0

Here is a trick you can use. You have to make jQuery to "listen" at clickEvents on all links that has data-mp3 attributes:

<div id='jquery_jplayer'></div> <!--wrapper for jPlayer-->

<a href="#" data-mp3="urlofmp3">
<a href="#" data-mp3="urlofmp3-2">

$(document).ready(() => {

    // initialization of jPlayer
    $("#jquery_jplayer").jPlayer({
        swfPath: "https://cdnjs.cloudflare.com/ajax/libs/jplayer/2.9.2/jplayer/jquery.jplayer.swf",
        supplied: "mp3",
    });

    // add event listener on ALL links that has a data-mp3 attribute
    // and send the url to jPlayer then play
    $('a[data-mp3]').click(function(e) {
        e.preventDefault();

        // replace #my-j-player by the id of your instance
        $("#jquery_jplayer").jPlayer("setMedia", {
            mp3: $(this).attr("data-mp3")
        }).jPlayer("play");
    });
});

Please check this minimal working example

edited Mar 11 '19 at 20:46

answered Mar 11 '19 at 11:57

TOPKAT

6,667
2
44
72

I tried the below but the link doesn't do anything. ````$(document).ready(function(){ $("#jquery_jplayer").jPlayer({ swfPath: "../../dist/jplayer", supplied: "mp3", wmode: "window" }); $('a[data-mp3]').click(function(e) { e.preventDefault(); // replace #my-j-player by the id of your instance $("#jquery_jplayer").jPlayer("setMedia", { mp3: $(this).attr("data-mp3"), oga: $(this).attr("data-ogg") }).jPlayer("play"); }); });```` – James Deadman Mar 11 '19 at 16:45
Thanks for that. I tried adding that logic but then the JPlayer player itself doesn't run. If I add in the JSplayer skin options then the links don't send the track to it. – James Deadman Mar 12 '19 at 07:50
I can not do more than providing a working example, you just have to copy paste the code for it to work...then please read jPlayer documentation to go further on implementing jPlayer functionnality or ask another SO question please – TOPKAT Mar 12 '19 at 10:17

Playing song on JPlayer from an onclick event

1 Answers1