enable_autoplay_Wordpress

WordPress 3.6 Audio Autoplay

How to Make Audio Autoplay Using a Shortcode in WordPress 3.6

Music: “Rise of the Nazi Machine”, courtesy: John Keltonic | copyright JDK Music | All Rights Reserved

How is the above audio clip playing natively within a post AND with autoplay enabled too? You can read the official WP blog post on new audio features and you won’t find it. There is documentation listing available attributes: preload, loop, autoplay, etc.., but nothing on how to enable them.

You can check the Codex, too, but good luck finding out how actually to get the mp3 to start playing. (note: Apple has disabled autoplay on iPhone since iOS 4.2.x. iPad WILL autoplay.)

After fiddling with all possible iterations of autoplay=”true”, autoplay=”1″, autoplay=”yes”, etc.., I stumbled upon the apparently undocumented answer earlier today while working on a client site.

(Ignore additional spaces in the word “audio.”)
[a u d i o mp3="your_URL/music.mp3" autoplay="y"][/audio]

Overall, 3.6 seems to be a great release in my testing and live site usage. Kudos to the WP Team for making embedded audio and video work natively.

Cheers!

  • http://liftmyvoice.bitofgrace.com bitofgrace

    THANK YOU! I had been fumbling through the variable possibilities too- don’t think i’d have landed on the “y” on my own :) yes, no, true, false,hmmmm on, off quotes no quotes errrgh ….dammit!

    • http://twelvetwo.net/ Clay Asbury

      Awesome..! Glad to see it wasn’t just me.

  • robhob

    How did you colour the player? I’m also trying to make it shorter… any ideas?

    • robhob

      Okay, I’ve got the size right…

      .mejs-container {

      max-width: 50% !important;

      background-color: #C8E1FA !important;

      }

      • http://twelvetwo.net/ Clay Asbury

        I just used default settings, but it’s good to know how to resize and style global instances of the player. Thanks!

  • Tom

    Clay,

    Is there a way to set autoplay programmatically? For example, I have a single audio file on the main page that I want to autoplay when the page renders. That same audio file also shows up on my archive page but I don’t want it to autoplay. In the audio shortcode of the post, I don’t set the autoplay attribute because I don’t want it to play on the archive page so now I’m trying to figure out how to do something like:

    if( is_front_page())
    //set autoplay here

    Any thoughts?

    • http://twelvetwo.net/ Clay Asbury

      Hi Tom,

      Are you showing all content from posts or just the excerpts on your archives pages? If you’re only showing excerpts in your archives, I’d recommend stripping shortcodes from them. i.e. http://codex.wordpress.org/Function_Reference/strip_shortcodes

      • Tom

        Clay,

        All of the posts consist of ONLY an audio shortcode…no text at all other than the title. Here is the dev site I’m speaking about: http://aafortroops.omjcreative.com/wordpress/

        The client wants the “splashpage” to show first, then the audio to play automatically on this page.

        If the user then clicks the “Archived Programs” link, he gets a list of all audio programs but he doesn’t want any of them to autoplay on this page.

        Does this make sense?

        Tom

        • http://twelvetwo.net/ Clay Asbury

          I see… Hmm… So, only the current episode should autoplay?

          • Tom

            Correct, and the only way to control the autoplay is within the shortcode itself. My only option is to set autoplay when I know that item is the “current” one and then turn it off when it is no longer current…needless to say, this doesn’t scale well and isn’t ideal.

            I’m just trying to find a way to do it programmatically on the front page.

            Sigh.

          • http://twelvetwo.net/ Clay Asbury

            A couple suggestions,

            If you’ve ever used filters, you might try filtering for string=’[/audio]‘ and replace it with ‘autoplay=”y” [/audio]‘ for *home page only*. I’ve used the filter below, but not for specific pages. You would add to your theme’s functions.php file.

            function replace_content($content)
            {
            $content = str_replace(‘###replaceme###’, ‘something_else’,$content);
            return $content;
            }
            add_filter(‘the_content’,'replace_content’);

            Also, you might try writing a custom post type called Current Episode or similar which prompts user for the audio file then automatically appends autoplay=”y” to but only on the home page.

          • Tom

            Great suggestion, Clay! I’ll give that a try.

            Tom

          • Tom

            Clay, it worked!

            Here’s what I did:
            function replace_content($content)
            {
            if(is_front_page()){
            $content = str_replace(‘[audio’, ‘[audio autoplay=”on”‘,$content);
            }
            return $content;
            }
            add_filter(‘the_content’,'replace_content’);

            Thanks a million!

          • http://twelvetwo.net/ Clay Asbury

            Awesome! Glad to hear it. :)

  • Charlie Knower

    Just discovered this info and put it to use for autoplay. Thank you. Is there a shortcode to change the width?

    • http://twelvetwo.net/ Clay Asbury

      Hi Charlie – you’re welcome! I did a bit of research and couldn’t find any documentation that allows for width to be set within shortcode either. But, I tested wrapping it in a div like this and it worked fine.

      [audio mp3="http://path-to-your.mp3" autoplay="y"][/audio]

      Good luck!

      Clay

      • Charlie Knower

        Thanks again, Clay. That does the trick. However, everything below the player is now showing up at 70% also. Can you tell me how to set that back to 100%

      • Charlie Knower

        Clay,

        Skip my earlier reply. I missed adding to the end. That did it. Thanks again.

        • http://twelvetwo.net/ Clay Asbury

          Awesome – glad to hear it worked – Happy Computing!

      • Charlie Knower

        Hi Clay
        In some cases I would like to allow audio file downloads – but not always. Any idea how to enable this?

        • http://twelvetwo.net/ Clay Asbury

          Sorry for delay in replying… I have the happy problem of busy, busy week. :) Mind describing the requirement a bit more?

  • Daniel

    Hey Guys
    Really need to ask you. I managed to make it work with the autoplay, but all of a sudden it stopped working. When entering the site now there is only a pause button, no play button and no sound.
    Any clue about what could have happened?
    My best
    Daniel

    • http://twelvetwo.net/ Clay Asbury

      Hi Daniel – is this happening all devices or just specific browsers? If it’s happening in all devices, please post or message me a link. I’ll take a look.

  • Vivienne Eggers

    Hi – this looks just what I need to play on first load up on a site home or landing with a slide show I opted for instead of video due to bandwidth in some locations – but I’ve been warned off that auto play audio mucks up on mobile views of the site that carries it – is this still the case with 3.9.1?

    • http://twelvetwo.net/ Clay Asbury

      Hi Vivienne,

      Hmmm – not to my knowledge. I’ve used it with 4-5 projects without mobile display problem or responsiveness issues. Are you seeking to hide the player while your slideshow plays?

      Re: the audio itself – WP autoplay doesn’t work by design on many mobile devices. Apple has disabled it on iPhones iOS since 4.2.x.

      Cheers,

      Clay

      • Vivienne Eggers

        Hi, an audio bar as you use on this post is ok visible – I can tuck it away somewhere for landing. I’m not sure what the issues are as I heard this third party. Possibly it is related to Apple – but not much you can do about that. I’ll have a play from your blog advice then. Thanks Clay. Took me ages to find this info.

        • http://twelvetwo.net/ Clay Asbury

          Thanks, Vivienne! Good luck with your project. BTW, love the alternate spelling of your name. If I ever have another daughter, “Vivienne” is a contender!

          Cheers!

          • Vivienne Eggers

            It’s French origin – derived of the Goddess of the Lake, Devi Queen of the Fairy or – Covianna meaning “life”. I’m honoured – your daughter will suit my name if she follows in your footsteps. Thanks for helping the children in Uganda.

          • http://twelvetwo.net/ Clay Asbury

            Thanks so much, Vivienne! Or, in Lugandan, “Webale Nyo!” Best to you!

            Clay

  • Vivienne Eggers

    Clay – I’m back – the code here worked very well. Just wondering if I can drop in here a short code to change the colour and background colour of the audio track in the player. Yours here is orange on black but I’m on 3.9.1 and they went back to “traditional” wp colours – orange and blue – a bit of a clash for my theme and I don’t want to hide the player. Can I change here or do I have to set up in default css? I prefer to do it on an individual basis as I am working with an installed theme. Thanks.

    • Vivienne Eggers

      ps – if I can – do you know the correct code to use? thanks again

      • http://twelvetwo.net/ Clay Asbury

        Hi – sure. Sure, the player colors can be changed via css. What’s the link to your project. I’ll take a look and see I can’t point you in right direction.

  • Meelahna

    Hi Clay! I’m helping an organization build their wordpress site, and came upon your helpful post in the process. I would like to email it to a few people, however i don’t feel comfortable sending this to anyone with the current song playing. In light of current world events, and out of respect for the 11 million victims of the Nazis, would you consider switching the music on this post out for something else? I would greatly appreciate it, and that way I can forward this post on to others who will appreciate your help! Thank you Clay!

    • http://twelvetwo.net/ Clay Asbury

      Hi Meelahna – Thanks so much for the kind words. I understand your concern given the title of the song. Perhaps I should provide more context to its use. That song was written by a friend for use during NBC’s London Olympic coverage in 2012. It was part of a historical overview of Europe in the 20th century hosted/narrated by Tom Brokaw. The piece was used to underscore the threat the Nazis posed to England specifically. This same composer (John Keltonic – http://jdkmusic.com) also wrote the score for an award winning documentary of Dietrich Bonhoeffer – the German pastor who attempted to assassinate Adolf Hitler and paid for it with his life. You can rest assured that the impetus of song included here is most definitely anti-Nazi and written in a context of helping younger generations understand their destructive legacy. I hope this helps!

      • Meelahna

        Hi Clay! This helps tremendously. Thank you so much for taking the time to explain. I really appreciate it.