Sometimes it is nice to low ambient sound effects in the background of your website, to set a mood or for some other purpose. There are plenty of websites where you can download such files, or you can make your own. It’s best to go for something that seamlessy loops and is not to distracting to the user.
Once you have your file (wav, mp3 or ogg) it is quite a simple matter to make it play on your website. The audio shortcode was added to WordPress in version 3.6, and is used like so
[audio]You can play an mp3 with
[audio mp3="audio-source.mp3"]or an ogg with
[audio ogg="audio-source.ogg"]and so on. When used like this, and audio player will render on the page, and look like this
You can loop your audio using the loop argument (which is a string of either on/off)
[audio mp3="audio-source.mp3" loop="on"]and you can autostart with a boolean value of 1/0
[audio mp3="audio-source.mp3" autostart=1]Putting it all together, and using a full path to your audio file just to be sure
[audio mp3="http://www.mysite.com/wp-content/uploads/2017/04/17/audio-source.mp3" loop="on" autostart=1]So far so good. Now we just need to use some CSS to hide the actual player (media javascript container) on the page. The audio will still play in the background.
.mejs-container, .mejs-container .mejs-controls, .mejs-embed, .mejs-embed body {
display: none;
}
