Today I’ll show you a quick and easy way to embed audio files on your website. Believe it or not, we still don’t have the equivalent of the ubiquitous <image> tag for audio files. However, with the increasing adoption of HTML5 standards in modern browsers, we’re getting very close. The current best practice is to use a little bit of Javascript to fill in the gaps and provide a consistent cross-browser experience. In other words, we want our audio file to play in every browser reliably.
Buzz!
For this post I’ll show you how to implement the excellent Buzz! Javascript library. There are many audio plugins available out there, but I’ve found this one to be simple, easy, and effective. It’s being used on some prominent sites, too.
Step 1: Export Your Audio File
I’m assuming you already have an audio file in some format that you’d like to use. The next step is to export your file into several different audio formats that browsers can understand. This page on the Buzz! Website has a nice compatibility chart of audio formats and web browsers. As they mention on their site, the best (most universal) combination is OGG + MP3 formats. The Buzz! library will accept multiples files and automatically select the best one to play depending on the user’s browser, so it’s a good idea to provide more than just one file. If you need an audio editing tool, I recommend Audacity, it’s free and works on Windows, Mac, and Linux. It’s what I used to export sound files to use with Buzz!
Step 2: Upload Audio Files to Your Server
Buzz! expects your audio files to be grouped together inside a folder on your server. Using FTP or the File Manager of your CMS system, create a folder like “sounds” and upload your OGG, MP3, WAV, etc. audio files into the same folder.
Step 3: Include the Buzz! Library
Download the ZIP from the Buzz! homepage, unzip it, and then include the buzz.js file inside the <head> of your HTML page. Or, you can be extra lazy and skip the download and just include it directly via URL:
<script src="http://jaysalvat.github.io/buzz/releases/latest/buzz.min.js"></script>
Step 4: Get Your Groove On!
What follows is a little bit of Javascript. Don’t worry, it’s short! Insert the snippet below into your HTML page, inside a <script>block just before your closing </body> tag:
var mySound = new buzz.sound( "/sounds/myfile", {
formats: [ "ogg", "mp3", "aac" ]
});
mySound.play().fadeIn().loop();
That snippet above loads the Buzz! library, specifying the 3 formats of audio you uploaded to the server inside the “sounds” folder. Then we tell Buzz! to play our sound, fading it in, and looping it forever. Short and sweet! There are lots of other things you can do with Buzz! such as automatically playing a sound when the page loads, start, stop, pause, adjust volume, etc. They have some nice documentation that shows you all the various things you can do. Or you can check out their demo page to see a nice interactive example.
Happy Buzzing!