How to Play Audio on Website

The simplest way to play audio on any website is to use the HTML5 audio tag. It's quick and simple and only requires the following HTML code:<audio src="your-music-file.mp3" controls></audio>

This audio player is native to whichever browser you are using, so will look different in appearance and size on Firefox vs Internet Explorer vs Android Chrome vs IOS iPhone, etc. And if your browser doesn't support the audio tag then you will not see any player at all and no music will play. The example below uses the default HTML5 audio code above.

Depending on what music format you are using - mp3, m4a, ogg, wav, wma - you will find out that not every browser supports every format. So what you can do is include multiple formats:<audio controls>

<source src="your-music-file.mp3" type="audio/mpeg"/>

<source src="your-music-file.wav" type="audio/wav"/>

<source src="your-music-file.ogg" type="audio/ogg"/>

</audio>

*Note: You could even support older browsers by using the "object" tag or including a direct link to download the music file.Besides the "controls" and "src" attribute, you can also add in "autoplay", "loop" and "preload". If using "preload" you'll need to specify a value (none, metadata or auto). So for example if you wanted the music file to autoplay, loop and preload, you would use:<audio src="your-music-file.mp3" controls loop autoplay preload="auto"></audio>

[dtwd-tweet text="How to use HTML5 Audio, WordPress Audio player shortcode, MediaElementJs"]

What about for WordPress websites?

Well all of the above still works, but as of WordPress 3.6 you have another option. WordPress now comes equipped with MediaElementJs files that will load on your page if you use the WordPress audio shortcode [audio] to play your audio file. This produces a nice new audio player, though not a lot of customisation options, but very useful as it looks the same on different browsers and devices, unlike the native HTML5 audio player which appears differently on each browser.To use the shortcode, you can simply upload the music file to your WordPress media library using the "Add Media" button, then add onto the page selecting the "Embed Media Player" option. This will add the shortcode to the page like this:

[audio mp3="your-music-file.mp3"][/audio]

As noted there is not much in the way of options for this shortcode, however you can use loop="on", autoplay="on" or preload="none|auto|metadata". Also you have the option of including different formats like this:

[audio mp3="your-music-file.mp3" ogg="your-music-file.ogg" wav="your-music-file.wav" ][/audio]

To simplify even further, you can simply paste the url to the music file on a line all by itself and WordPress will recognise the audio file and play it in the audio player. This even works with external music files. Note that the music formats supported are 'mp3', 'm4a', 'ogg', 'wav', 'wma'. Here is a screenshot of what the WordPress audio player looks like:

[print-me-button]
For further information about using the included WordPress audio player view the WordPress codex page - http://codex.wordpress.org/Audio_Shortcode

Adding MediaElementJs manually

Depending on your needs for your audio player you may wish to setup your own MediaElementJs files, so that you can customise the player further. Note that the following is not necessary in most cases but here is how to do it if you want more control.Step 1. Download and extract mediaelement files from http://mediaelementjs.com/Step 2. Copy the "build" folder and paste into the "js" folder in your childtheme (setup a new folder if you don't have one already). Rename the "build" folder as "mediaelement".Step 3. Delete any files you don't need. The most important ones to keep are flashmediaelement.swf, mediaelement-and-player.min.js and silverlightmediaelement.xap, as well as the css and image files.Step 4. Create a file called mediaelementjsplayer-scripts.js, paste the following javascript in, then upload to your "mediaelement" folder.jQuery(document).ready(function($) {

   //customise settings and target jquery selector

   $('#audio-player').mediaelementplayer({

       features: ['playpause','volume','current','duration'],

       audioVolume: 'vertical',

       audioWidth: 160,

       audioHeight: 30,

       iPadUseNativeControls: false,

       iPhoneUseNativeControls: false,

       AndroidUseNativeControls: false,

       alwaysShowHours: true

   });

});


Step 5. Register the scripts and styles ready for enqueue in our new audio shortcode - add this to your childtheme's functions.php file or your mu-plugin file.
function mediaelementjs_enqueue() {

   wp_register_style('mediaelementjsplayer-css',get_stylesheet_directory_uri().'/js/mediaelement/mediaelementplayer.css');

   wp_register_style('mediaelementjsplayer-skins',get_stylesheet_directory_uri().'/js/mediaelement/mejs-skins.css');

   wp_register_script('mediaelementjsplayer',get_stylesheet_directory_uri().'/js/mediaelement/mediaelement-and-player.min.js',array('jquery'),'',true);

   wp_register_script('mediaelementjsplayer-scripts',get_stylesheet_directory_uri().'/js/mediaelement/mediaelementjsplayer-scripts.js',array('mediaelementjsplayer'),'',true);

}

add_action('wp_enqueue_scripts','mediaelementjs_enqueue');


Step 6. Now we'll create our new audio shortcode, add the following php also to your file, just under the enqueue function in step 5 above.
function mediaelementjs_newplayer($atts, $content=null) {

   $audioplayerdata = shortcode_atts(array(

       'music_src'=>'',

       'music_type'=>'mp3',

       'music_preload'=>'metadata',

       'music_loop'=>'',

       'music_autoplay'=>'',

       'music_class'=>''

   ),$atts);

   wp_dequeue_style('wp-mediaelement');

   wp_dequeue_script('wp-mediaelement');

   wp_deregister_style('wp-mediaelement');

   wp_deregister_script('wp-mediaelement');

   wp_enqueue_style('mediaelementjsplayer-css');

   wp_enqueue_style('mediaelementjsplayer-skins');

   wp_enqueue_script('mediaelementjsplayer');

   wp_enqueue_script('mediaelementjsplayer-scripts');

   $m_src=$audioplayerdata['music_src'];

   $m_type=$audioplayerdata['music_type'];

   $m_preload=$audioplayerdata['music_preload'];

   $m_loop=$audioplayerdata['music_loop'];

   $m_autoplay=$audioplayerdata['music_autoplay'];

   $m_class=$audioplayerdata['music_class'];

   return '<div class="playeraudio"><audio class="'.$m_class.'" id="audio-player" src="'.$m_src.'" type="audio/'.$m_type.'" '.$m_autoplay.' '.$m_loop.' preload="'.$m_preload.'">'.$content.'</audio></div>';

}

add_shortcode('my_audio_player','mediaelementjs_newplayer');

This shortcode function setups up the new audio player shortcode, adds the required scripts and styles to the page that the shortcode appears on, while also removing the WordPress MediaElementJs files from being added to the page.Step 7. Use the new audio player shortcode:

[my_audio_player src="your-music-file.mp3"]add support here for older browsers if required[/my_audio_player]

Besides the src of your music file, you can also specify other settings such as:

• music format type using music_type="wav|ogg|mp3"; the default is "mp3"
• music preload using music_preload="none|metadata|auto"; the default is "metadata"
• music loop using music_loop="loop"; the default is none
• music autoplay using music_autoplay="autoplay"; the default is none, note also that mobile devices prevent autoplay
• music class using music_class="mejs-ted|mejs-wmp"; the default is the standard skin

Also you can style the width and position of the player by adding css to your stylesheet.css file. It's a good idea to make the css width and height match up with the mediaelementjsplayer-scripts.js files settings for audioWidth and audioHeight.  .playeraudio {

    width: 160px;

    height: 30px;

    margin: 20px auto;

}

Here is how the new player looks using the "mejs-ted" class:[my_audio_player music_loop="loop" music_class="mejs-ted" music_src="https://www.davidtiong.com/wp-content/uploads/2015/02/music-example.mp3" music_type="mp3"][/my_audio_player]Step 8. For more information about using mediaelement.js and customisation options, visit http://mediaelementjs.com/[social-icon-message st_type="evernote" message="Send this article to your Evernote"]Final Thoughts...It is a good idea to use the WordPress audio shortcode if possible, as this is the simplest and quickest way to add audio onto your webpages. Also because it uses MediaElementJs and is included with WordPress, it will stay up to date as you update your WordPress in the future. However at the moment the customisation options are limited, so you if you need more flexibility then you are welcome to test out the new MediaElementJs player above.