jPlayer is not a function error - Stream Player

Question

Sorry for asking this question as it may be asked some times around the internet, but none of the proposed sollutions worked on my site.

I'm trying to ad a jPlayer (as part of a project for university) with a radio stream.

I included the JavaScript - jQuery part of the jPlayer on a file called functions.js:

// Reproductor de audio

$(document).ready(function(){

var stream = {
    title: "Postaway Radio",
    mp3: "http://listen.radionomy.com/1-PostawayRadio"
},
ready = false;

$("#jquery_jplayer_1").jPlayer({
    ready: function (event) {

        ready = true;
        $(this).jPlayer("setMedia", stream);
    },
    pause: function() {
        $(this).jPlayer("clearMedia");
    },
    error: function(event) {
        if(ready && event.jPlayer.error.type === $.jPlayer.error.URL_NOT_SET) {
            $(this).jPlayer("setMedia", stream).jPlayer("play");
        }
    },
    swfPath: "js",
    supplied: "mp3",
    preload: "none",
        wmode: "window"
});

});

And this is the HTML part of the text:

            <div id="jquery_jplayer_1" class="jp-jplayer"></div>

        <div id="jp_container_1" class="jp-audio-stream">
            <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-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-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                </div>
                <div class="jp-title">
                    <ul>
                        <li>Postaway Radio</li>
                    </ul>
                </div>
                <div class="jp-no-solution">
                    <span>Update Required</span>
                    To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
                </div>
            </div>
        </div>

I tried to play it and it doesn't work at all. I receive this error in FireZilla:

 TypeError: $("#jquery_jplayer_1").jPlayer is not a function

Chrome console throws this error:

Uncaught TypeError: Object [object Object] has no method 'jPlayer' 
(anonymous function) functions.js:11
l jquery-1.8.3.min.js:2
c.fireWith jquery-1.8.3.min.js:2
v.extend.ready jquery-1.8.3.min.js:2
A

And indicates this line as the problem:

`enter code here`$("#jquery_jplayer_1").jPlayer({

And another one of jQuery.

But I'm not able to find what te problem is.

I downloaded a jPlayer demo and the code is similar - the same as mine, but there it works and not in my webpage. Also looked at developers (jPlayer) and no solution found.

Could anyone help me please?

Thanks for your help

Answer 1

You probably didn't include jplayer library. Check demo again and see did you load jplayer js file properly. And check console in Google Chrome.

And which browser do you use. If the browser doesn't support html5, it will load flash player, but maybe the address for swf file is not good. That's set in this parameter swfPath: "js"

Try with this:

$player = $("#jquery_jplayer_1")
jPlayer_method = $player.jPlayer
$player.jPlayer({
    ready: function () {
           jPlayer_method.call( $player, "setMedia", {
                                       [...same as before...]