WordPress 3.6 – Native Support for Audio

While I was messing around with WordPress 3.6 and audio capabilities, I decided to the test the native support for audio.

Here are a couple things to watch out for:

1. Your host or settings may limit the size of on file uploads. To get around that limitation you can upload the file via FTP. But if you do that the file won’t show up in your Media Library. If this is the case, download the Add From Server plugin. This plugin adds a link in the Media Library which allows you to add file from your server to the Media Library. From there, it’s easy to embed in your post.

An alternative is to use FTP and then wrap the link to the file in audio shortcode. Here’s an example:

[audio mp3="https://www.kmarsden.com/wp-content/uploads/2013/08/Trojans.mp3"]

2. Get rid of the spaces in your file names. The media player won’t work if the song/video has spaces in the name.

3. Not all browsers will support the mp3 embed. See the Codex for fallback methods.

4. The width of the audio player is set to 100%. You can change this by setting a smaller width in your child theme’s style.css. This is what I did:

.mejs-container {
max-width: 400px;
}

Just don’t go much lower than 200px;

17 thoughts on “WordPress 3.6 – Native Support for Audio”

  1. Travis Crank

    I’m trying to figure out how to hide the volume slider on both embedded audio and video files using “audio mp3=”. Haven’t found any options nor how to set defaults, etc. Player looks good but is very immature without decent controls.

    Reply ↓
      1. Travis Crank

        Thanks so much for the response. I will experiment with your suggestions & what’s in the page you sent. My problem is the volume slider ‘rolling over’ to the line beneath it, apparently. see http://FluorideFreeKansas.org (top widget) for example. Wondering if/when the ‘options’ for the native HTML5 player may be found in one document, and/or someone develops a plug-in to set some defaults for this thing. Are there no settings within the WP GUI governing the media player at all? Nuts.

        Reply ↓
        1. Kevin Marsden Post author

          Did you find a fix? I looked at your site with Chrome and Firefox and the player looked fine.

          If you still want to hide the volume control, you can try adding visibility: hidden to these classes:

          You may also need to need to adjust some of the other CSS properties.

          I haven’t run across any plugins that extend the options of the audio player, but I’m sure there are a few in the works.

          Reply ↓
          1. Travis Crank

            Yes, thank you.

            The compromise I found was forcing the player to a specific width in my theme’s ‘Custom CSS’ field, but naturally/unfortunately this governs the whole site when I would prefer to only affect the widget area only & not the player embedded in post bodies. The widget is an audio player whereas the player within posts/pages may be audio or video. And WP correctly ‘fluids’ the player in posts without specific settings. If I’m reducing the size of player to look right in the widget area (combined with center DIV), it’s not ideal for the player elsewhere. Peter Paul.

          2. Kevin Marsden Post author

            It looks like you added this:

            /* WP 3.6 Native Audio Player styling*/
            .mejs-container {
            width: 93.3% !important;
            background: url('') !important;
            background-color: #C8E1FA !important;
            }

            Try adding #sidebar before .mejs-container

            With the added selector, the width should only be restricted if the audio player is in the sidebar.

          3. Travis Crank

            Thanks!

            That works. Except I discovered the following: WP handles the embedded video player without any switches. But I was wrong in stating that it handles the player in MP3/audio mode without volume slider rolling over. I’m ‘okay’ with its presence, note.

            Your tip forced the specific width on the sidebar only, as desired.

            How might I control the width for posts/pages, specifically? Looks like I may need to define it for the posts/pages also but naturally it vary from the desired px

          5. Travis Crank

            Thanks!

            That works. Except I discovered the following: WP handles the embedded video player without any switches. But I was wrong in stating that it handles the player in MP3/audio mode without volume slider rolling over. I’m ‘okay’ with its presence, note.

            Your tip forced the specific width on the sidebar only, as desired. And just right before the rollover threshold…

            How might I control the width for posts/page embeds specifically? Or for ‘audio only’ or ‘ video only’? Looks like I may need to define it for the posts/pages also contrary to what I first thought. But naturally it need to vary from the desired px/% used for sidebar.

            A separate .mejscontainer section?

            Also, I would like to set color ‘global’.

          6. Kevin Marsden Post author

            To change the color globally, you’ll need to add another section of CSS. Probably something like this:

            .wrapper .container .mejscontainer {
            color:
            }

  2. Travis Crank

    Here’s what I ultimately came up with after much trial & error. Ticking the percentages a tenth at a time.

    /* WP 3.6 Native Audio Player styling*/
    .wrapper .container .mejs-container {
    background-color: #C8E1FA !important
    }
    #sidebar .mejs-container {
    width: 93.4% !important;
    background-color: #C8E1FA !important
    }
    #content .mejs-container {
    width: 96.4% !important;
    background-color: #C8E1FA !important
    }

    Some standard & HD aspect videos still don’t scale well with the native player, but that’s the best I could do – checking each one of the representative pages after each change.

    Hosted Embedded Video Example (Stnd Aspect): http://tinyurl.com/l7tn7b2 (notice slight ‘off center’)
    Hosted Embedded Video Example (Widescreen Aspect): http://tinyurl.com/ktp43c7 (notice video extends wider than player width)
    Hosted Embedded Audio Example: http://tinyurl.com/adsq9z5 (1/10th wider then the volume slider rolls to new line)
    YouTube Embedded Video Example: http://tinyurl.com/bder7od
    (h315 x w560 – Any wider, then video window extends beyond post border/runs into padding)

    And of course the widget (sidebar) audio player box is visible on all pages.

    Any ‘greater’ number specified causes volume slider roll-over with the audio player. And those numbers are also the maximum specs I can use without throwing standard aspect ratio embedded (hosted) videos ‘off center’ – because they span-out past the borders on mobile, especially. In PC browser, ‘some’ will but I just have to put up with those exeptions now since they’re not the rule.

    Readers note this is CyberChimps iFeature Pro 4 theme. My ‘dead end’, because I cannot re-engineer all my content for iFeature Pro 5…. But so long as the latest WordPress releases don’t kill it, I remain on IFP 4.

    Could my code example be made any better? Yielding to advice – may not be best practice.

    Thanks!

    Reply ↓
  5. Sauvage

    Hi,
    Do you know how I could have a download button or link next every track in the playlist?
    just in case… thank you very much

    David.S

    Reply ↓
    1. Kevin Post author

      There isn’t a way to add a download link automatically, but you can a separate download link after the embed. It might look something like this:

      [audio mp3="https://kmarsden.com/wp-content/uploads/2013/08/Trojans.mp3"][/audio]
      Download Link

      Reply ↓

Leave a Reply to Kevin Marsden Cancel reply

Your email address will not be published. Required fields are marked *