[solved] JS script not working within wordpress

[Mercifull]

Another day another question. My wordpress plugin to enable me to use shortcodes to play individual mp3 files and podcasts is coming along nicely thanks to all your help here. I have now reached another brick wall which is causing me to go even greyer than I already was.

 

The js script I am using is the full version of Audiojs http://kolber.github.com/audiojs/ which is a free html5 player with flash backup on old browsers. It works across all the main platforms including Android and iOS.

 

My plugin has two parts. The first part utilises the following Wordpress shortcode [showplayer showurl=http://www.linktomp3.com/file.mp3 to output an audiojs player with the variable showurl. See code below. It's ever to slightly different to my previous post because I've changed from the built in magpierss (rss.php) to simplepie (feed.php) as the old one is apparently depreciated according to people at StackOverflow.

// Individual show script below
function showplayer_func($atts) {
 //extract the parameters and set defaults in case one isn't set by the user
 extract(shortcode_atts(array(
		 'showurl' => 'http://www.fromefm.co.uk/archive/sponsors/fromefm-luke.mp3',
 ), $atts));
return "<script>
audiojs.events.ready(function() {
var as = audiojs.createAll();
});
</script><audio src='$showurl' preload='none'></audio>";
}
function register_shortcode2() {
add_shortcode('showplayer', 'showplayer_func');
}
add_action('init', 'register_shortcode2');

This WORKS... and I hate to use the word flawlessly... but it does. If now showurl is entered it successfully loads the FromeFM ident instead. If an incorrect url is entered then it shows an error that it failed to load the mp3 but that's ok. An example in action is here http://frome.me/ffm/?page_id=6

 

The problem is when I want to use the playlist version of the script (demo). As far as I can tell it's exactly the same code, just without the keyboard div and yet it doesn't work. It loads the list of podcast link and if I examine the source code of the page I can see that it's been loaded in but the actual html5 player bit doesn't appear.

function showplaylist_func($atts) {
 //extracting the parameters and set defaults in case one isn't set by the user
 extract(shortcode_atts(array(
		 'show' => 'altfactor',
'showno' => '1000',
 ), $atts));
 //now you have the variables $showname and $showno to play with

 //normal function code here
include_once(ABSPATH . WPINC . '/feed.php');
$num_items = $showno;
$feedurl = 'http://fromefm.co.uk/archive/dircasterX.php?show='.$show;
$rss = fetch_feed($feedurl);
if (!is_wp_error( $rss ) ) : // Checks that the object is created correctly
// Build an array of all the items, starting with element 0 (first element).
$rss_items = $rss->get_items(0, $showno);
endif;
$list = "";
foreach ($rss_items as $item )
{
$title = $item->get_title();
$mp3link = $item->get_link(0);
$description = $item->get_description();
$list .= "<li><a href='#' data-src='$mp3link'>$title - $description</a></li>";}
return "

<script>
 $(function() {
 // Setup the player to autoplay the next track
 var a = audiojs.createAll({
	 trackEnded: function() {
	 var next = $('ol li.playing').next();
	 if (!next.length) next = $('ol li').first();
	 next.addClass('playing').siblings().removeClass('playing');
	 audio.load($('a', next).attr('data-src'));
	 audio.play();
	 }
 });

 // Load in the first track
 var audio = a[0];
	 first = $('ol a').attr('data-src');
 $('ol li').first().addClass('playing');
 audio.load(first);
 // Load in a track on click
 $('ol li').click(function(e) {
	 e.preventDefault();
	 $(this).addClass('playing').siblings().removeClass('playing');
	 audio.load($('a', this).attr('data-src'));
	 audio.play();
 });
 // Keyboard shortcuts
 $(document).keydown(function(e) {
	 var unicode = e.charCode ? e.charCode : e.keyCode;
		 // right arrow
	 if (unicode == 39) {
	 var next = $('li.playing').next();
	 if (!next.length) next = $('ol li').first();
	 next.click();
	 // back arrow
	 } else if (unicode == 37) {
	 var prev = $('li.playing').prev();
	 if (!prev.length) prev = $('ol li').last();
	 prev.click();
	 // spacebar
	 } else if (unicode == 32) {
	 audio.playPause();
	 }
 })
 });
</script>
<audio preload='none'></audio>
 <ol>
$list
</ol>
";
}
function register_shortcodes() {
 add_shortcode('showplaylist', 'showplaylist_func');
}
add_action('init', 'register_shortcodes');

An example of it in action is here: http://frome.me/ffm/?page_id=48

 

The plugin also has the following code which puts the audio.js script in the header. This works ok.

// Adds JS files relating to plugin
function add_audiojs() {
wp_register_script( 'audiojs', plugins_url( '/audiojs/audio.js', __FILE__ ) );
 wp_enqueue_script( 'audiojs' );
}
add_action('wp_enqueue_scripts', 'add_audiojs');

 

Entire plugin code shown below. Bear in mind it's messy with a lot of comments out while I'm still testing stuff.

http://pastebin.com/Ne0d4T88

[MlyezSpare]

Have you tried running it through Dreamweaver? I code a lot using Programmers Notepad, often missing little things, like not closing tags properly or not putting } in the right place lol. If you open it with DW, it should highlight any potential errors, and if you're using a later version should show a decent enough live preview.

 

I haven't read through it all properly as I have to nip off, but it all looks okay, I can't see any obvious mistakes. Then again, this is Wordpress. I always try to avoid WP where possible. ^_^

[Mercifull]

Dreamweaver.... I've not used a WYSIWYG editor for years. I don't have it to check either sorry. Is there anything else I could use that's free. I'm writing this in Notepad++ and it appears to look ok to me.

[MlyezSpare]

I don't really know to be honest - I'll check back here in the morning, if your issue still isn't resolved I'll download the source files and take a proper look.

 

My JS skills aren't anything special, but it'll be a refreshing change from PHP for me :P

 

Good luck man, I know how frustrating this can be!

[Mercifull]

It's ridiculous lol. Most of my errors have been simple to work out and my plugin has been evolving from very basic through the tests and now to the final leg where it's fallen over lol.

 

The old site, which I didn't make, uses a flash player which works great every time (so long as you have a browser that plays flash) but I really really really want to move away from that format into something that works cross platform. I figured that rather than directly editing wordpress and theme files I would make it as a plugin. My theory was that it would be less of a headache when it came to updating wordpress either bug fixes, security patches or just new features in the future as the plugin would make it independent.

 

Old site: http://www.fromefm.co.uk/

[obfuscator]

If it's a javascript error the console should show it (press f12 in chrome, for instance).

[tripsis]

This might be your problem: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers ?

[Mercifull]

Ok I think I've worked it out. Thanks Obfuscator, running the Chrome thing gave the following error

jQuery Uncaught TypeError: Property '$' of object [object Window] is not a function

I then searched for this on stackoverflow and someone said that it was something to do with jquery in wordpress loading in no-conflict mode and to get around that for a specific script without turning it off entirely all I needed to do was replace

$(function() {

with

jQuery(function($) {

 

Really really happy! Thanks very much, I've added you into the credits of the plugin, not that anyone other than me can use it lol

[obfuscator]

You're welcome, but that's not necessary lol...

[Mercifull]

/*
Plugin Name: FromeFM Player Plugin
Description: Enables shortcodes to generate audiojs players based on variables such as showname and number to pull from feed. Plugin relies on a special version of DirCaster placed in the /archive/ folder in order to work properly.
Version: 0.6
License: GPL
Author: Matt Sims
Author URI: www.mattsims.com
Contributors: Tripsis, Xena Dragon, JoWie, Obfuscator & Hedgehog (forum.tip.it) as well as rrikesh & brasofilo (stackoverflow.com)
*/

 

:D You've no idea how happy I am right now. I clapped my hands together so hard I scared the cats and now my palms are sore. rofl

[tripsis]

Heheh. Your first plugin always feels good. :)

[Mercifull]

My plugin might not even get used in the final version of the website lol but at least i'm learning something.

[MlyezSpare]

Glad to see you got this sorted!