Audio
Topics
Audio Audio
You can directly embed audio files and play them back using a simple shortcode [audio]. Supported file types are mp3, ogg, wma, m4a and wav.
Audio shortcode Audio shortcode
Following shortcode displays audio player that loads music.mp3 file:
[audio src="music.mp3"]
To use the shortcode from template file, use do_shortcode function. When music.mp3 file was stored in (theme_directory)/sounds directory, insert following code into your template file:
$music_file = get_template_directory_uri() . "/sounds/music.mp3";
echo do_shortcode('[audio mp3=' . $music_file . ']');
The shortcode creates the audio player as shown in the screenshot below.
Loop and Autoplay Loop and Autoplay
The following basic options are supported:
loop loop
Allows for the looping of media.
- “off” – Do not loop the media. Default.
- “on” – Media will loop to beginning when finished and automatically continue playing.
autoplay autoplay
Causes the media to automatically play as soon as the media file is ready.
- 0 – Do not automatically play the media. Default.
- 1 – Media will play as soon as it is ready.
The following example starts playing music immediately after the page load and loops.
echo do_shortcode('[audio mp3=' . $music_file . ' loop = "on" autoplay = 1]');
Styling Styling
If you want to change the look & feel of audio player, you can do so by targeting the default class name of “wp-audio-shortcode”. If you insert following code into your style.css, half width of audio player will be displayed.
.wp-audio-shortcode {
width: 50%;
}
Supported Audio format Supported Audio format
- mp3
- ogg
- wma
- m4a
- wav
References References
For more technical details such as the internal library that enables this function, refer to
- https://make.wordpress.org/core/2013/04/08/audio-video-support-in-core/.
- Audio Shortcode
- Function do_shortcode()