JSFiddle - React, Tailwind, and code Playground

by Felipe Stoker

HTML

<div class="player">
    <div id="jquery_jplayer_1" class="jp-jplayer"></div>
    <div id="jp_container_1" class="jp-audio">
        <div class="jp-type-single">
            <div class="jp-gui jp-interface">
                <ul class="jp-controls">
                    <li><a href="javascript:;" class="jp-play" tabindex="1">play</a>

                    </li>
                    <li><a href="javascript:;" class="jp-pause" tabindex="1">pause</a>

                    </li>
                    <li><a href="javascript:;" class="jp-stop" tabindex="1">stop</a>

                    </li>
                    <li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">mute</a>

                    </li>
                    <li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">unmute</a>

                    </li>
                    <li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">max volume</a>

                    </li>
                </ul>
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
                <div class="jp-time-holder">
                    <div class="jp-current-time"></div>
                    <div class="jp-duration"></div>
                    <ul class="jp-toggles">
                        <li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">repeat</a>

                        </li>
                        <li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">repeat off</a>

                        </li>
                    </ul>
                </div>
            </div>
            <div class="jp-no-solution">	<span>Update Required</span>
To play the media you will need to either...

JavaScript

$('.jquery_jplayer_1').jPlayer({
    // Ao iniciar o player
    ready: function () {
        alert($(this).attr('audio'));
        $(this).jPlayer("setMedia", {
            mp3: $(this).attr('audio') // Caminho do arquivo MP3
        }).jPlayer("pause"); // Auto play
    },
    // Ao terminar o player
    ended: function (event) {
        $(this).jPlayer("play");
    },
    // Caminho para a pasta onde está o arquivo Jplayer.SWF
    swfPath: "swf",
    supplied: "mp3",
    play: function () {

        $(this).jPlayer("pauseOthers"); // pause all players except this one.
        $(this).jPlayer("play");
    }
    //errorAlerts: true, // Opcional, somente utilizado para debugging.
});