JSFiddle - React, Tailwind, and code Playground

by jeffory

HTML

<script src="http://cdn.jsdelivr.net/jplayer/2.2.0/jquery.jplayer.min.js "></script>
<div id="jplayer"></div>

<a href="https://blackrainbow.net.au/public/samples/rnr_junkie.mp3" class="play_button">Play</a>

JavaScript

$(function(){
    $('#jplayer').jPlayer({
        swfPath: "<?php echo SF_ROOT. '/js' ?>",
        supplied: "mp3, oga",
        wmode: "window"
    });
    
    $('.play_button').click(function(e){
        // The new return false for jquery
        e.preventDefault();
        
        $('#jplayer').jPlayer('setMedia', { mp3: $(this).attr('href') });
    
        $('#jplayer').bind($.jPlayer.event.progress, function (event) {
            console.log(event.jPlayer.status);
        });
    
        if ( $(this).text() == 'Play')
        {
            $(this).text('Stop');
            $('#jplayer').jPlayer('play');
        }
        else
        {
            $(this).text('Play');
            $('#jplayer').jPlayer('stop');
        }
        
        if('undefined' != typeof(event) ) event.returnValue = false; 
    });
});