Incorporate jquery into WordPress

I am trying to incorporate a very simple audio player into WordPress that uses jQuery to control the player and the player control background image. There will be several instances of the player on a single page.

I have no problem writing the code for an HTML page, but it doesn't work inside a WordPress page. I've been Googling for a couple hours, but haven't found the specific, understandable answer I need, so I apologize if this has been covered elsewhere.

I don't want to write a plugin, I just want to be able to create a little control over the HTML5 audio player.

The script code:

$(document).ready(function(){
var allAudioEls = $('audio');

function pauseAllAudio(){
    $('.gac_play').attr('src', 'play16.png');
    allAudioEls.each(function() {
        var a = $(this).get(0);
        a.pause();
    });
}


$(".gac_play").click(function(){
    var song = $(this).next('audio').get(0);
    if(song.paused){
        pauseAllAudio();
        $(this).attr('src', 'pause16.png');
        song.play();
    }else{
        pauseAllAudio();
        $(this).attr('src', 'play16.png');
    }
});

The HTML:

<img class="gac_play" src="play16.png" />
<audio>
<source src="audio/fm-sample1.mp3" />
<source src="audio/fm-sample1.ogg" />
</audio>

Works perfectly on an HTML page, but not in WordPress. Any assistance would be very much appreciated.

Solutions

If I understand correctly, JQuery is a JavaScript library. It will not work in WordPress because that site does not allow JavaScript.

They describe their reasoning somewhere in their documentation. The basic intent is to minimize site security risks and avoid the good old days of MySpace...

Your best option would be to implement the same behavior in PHP.

Make sure you're enqueueing the jQuery file properly and to use your ready function as such:

jQuery(document).ready(function($){
    // your code goes here
});

Or you can use $=jQuery.noConflict(); in the beginning of the script tag. You can check for other errors in the JS console (Ctrl+Shift+J on chrome).

Tags: Jquery / Wordpress / Audio

Similar questions

How do I incorporate javascript on css editor on wordpress?
So on my site (http://braunweiss.net) you can see that I have sticky side buttons. My boss wants me to add another button that would allow me to remove the buttons from the screen like one you can find on http://www.astcorporation.com/erp.html . I was thinking that I could maybe try to use javascript in my css editor (since that's the only editor I...
New wordpress site, want to incorporate an old php catalog
i'm completely new to migrating websites. I made a new website for someone in wordpress but on the same url. I migrated the hosting and changed the A-records. I do have the old site in backup (both files, and sql database.) How would i go about hosting an old catalog that is made in php on a subsite? Kind regards Viktor.
Writing Custom Rewrite Rules that Incorporate Category for Custom Post Types?
I'm registering a Custom Post Type and in the rewrite array I am trying to do something like this: 'rewrite' => array('slug' => "explore/resources/".$CATEGORY, 'with_front' => false) I want the rule to 'dynamically' get the post's category name somehow. I also tried using %category% there but it doesn't work either. I need the post's url t...
Is it possible to incorporate username in a login redirect?
I'm using WP to work as the CMS for a website which will be provided to users of a number of different products. I've successfully created a function which will redirect users based on their role: Some users need to be redirected to a specific page which shares their username. How can I retrieve the username and incorporate it into their redirect? ...
Which is the best way to incorporate custom fonts?
I believe there are 3 valid methods of incorporating custom fonts: Which is the best way to do it? Is any method loading faster than the other?
How to incorporate admin theme in my back-end-plugin
I'd like to use some colors from the wordpress admin theme to build my back-end plugin's theme, based on Bootstrap-3 & SASS/LESS. I think I saw a few functions to get the colors of the admin theme but I am not sure its the right way to go. I am aware there might be 3th party admin themes but I'd be already happy to get the standard-themes cover...

Also ask

We use cookies to deliver the best possible experience on our website. By continuing to use this site, accepting or closing this box, you consent to our use of cookies. To learn more, visit our privacy policy.