Assign jPlayer function to custom button

Question

I'm trying to attach a Play/Pause functions of jPlayer to a custom css button.

Function:

$("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
            $(this).jPlayer("setMedia", {
                mp3: server
            }).jPlayer("play");
        },
        swfPath: "js/",
        wmode: "window",
        solution: "flash,html",
        supplied: "mp3",
        preload: "none",
        volume:0.75,
        cssSelectorAncestor: "",
        cssSelector: {
                play: "#play",
                pause: "#pause"
        }
    });

    $("#jquery_jplayer_1").bind($.jPlayer.event.pause, function(event) {
        $(this).jPlayer("clearMedia");
        $(this).jPlayer("setMedia", {
                mp3: server
        });
    });

Controlers in jPlayer.min.js:

play:".jp-play",pause:".jp-pause",stop:".jp-stop"

Button:

<script type="text/javascript">
    $(document).ready(function(){
        $('#button').on('click', function(){
            $(this).toggleClass('on');
        });
    });
</script>

<div id="jquery_jplayer_1" class="jp-jplayer"></div>
        <section>
        <a class="cssbutton" href="#" id="button">&#xF011;</a>
        <span></span>
    </section>

How do i go about adding these functions to the button?

Answer 1

Either give your button the ID play or change the CSS selector of your play button to your current ID:

$("#jquery_jplayer_1").jPlayer({
    ...
    cssSelector: {
            play: "#button",
            ...
    }
});

Remember, the selectors that you refer to when constructing $("...").jPlayer({...}); should map to elements on your page, as explained in the Docs.