Issues with jplayer integration

sdetweil

@aries1984 the getScripts method is called before getDom(), so they are ‘loaded’ into the browser space.

you should be able to check that they are loaded with the scripts tab of the debug console window

Aries1984

@sdetweil
jep…got it now via the getScripts method. They are now even loaded in the right order: first jQuery, then jPlayer, then my own script -> leads me to exactly the same errors in the console window.

sdetweil

@aries1984 said in Issues with jplayer integration:

jquery.jplayer.min.js:2 Uncaught TypeError: Cannot read property ‘fn’ of undefined

see https://stackoverflow.com/questions/10807430/jquery-uncaught-typeerror-cannot-read-property-fn-of-undefined-anonymous-fun
and
https://github.com/understrap/understrap/issues/449

Aries1984

@aries1984 said in Issues with jplayer integration:

jplayer

still stuck with the same errors. Replacing ‘$’ with ‘jQuery’ throws the same error saying “jQuery is not defined”.
Scripts are definitely loaded in the correct order, too.

What really confuses me is that the simple HTML page works perfectly. Any other thoughts? I’ve searched the web for the last 2hrs and could not find a solution, yet…will keep looking, though.

Aries1984

Right…I’ve downloaded jPlayer now locally and I’m loading the scripts locally. Now the errors are gone but it looks like I’ve made a mistake before when loading them online.

Anyway, the errors are now gone but there is still no sound output. As mentioned initially I am quite new to developing a module so I’m really sorry if things seem obvious for you…but belive me, they’re not so obvious for me. But I’m very keen to learn!

The jPlayer script I’ve wrote myself looks like this:

$(document).ready(function() {

    var stream = { mp3: "http://media-ice.musicradio.com/CapitalSouthCoastMP3" },
    ready = false;

    $("#jquery_jplayer_1").jPlayer({
        ready: function(event) {
		ready = true;
		$(this).jPlayer("setMedia", stream);
		$(this).jPlayer("play", 1);
        },

	pause: function() {
		$(this).jPlayer("clearMedia");
	},

	error: function(event) {
		if(ready && event.jPlayer.error.type ===$.jPlayer.error.URL_NOT_SET) {
			// Setup the media stream again and play it.
			$(this).jPlayer("setMedia", stream).jPlayer("play");
		}
	},

        swfPath: "http://jplayer.org/latest/dist/jplayer",
        supplied: "mp3",
	preload: "none",
	volume: 1,	
	wmode: "window",
	useStateClassSkin: true,
	autoBlur: false,
	keyEnabled: true,

    });
});

Aries1984

@strawberry-3-141, @sdetweil
Thanks for your help and pointing me into the right directions. In the last 2 weeks I made massive steps forward with my first ever module. You’ve helped to get my head round havascript and to understand it better. Thanks!

End result can be found here.