How To: Convert Audio Files for HTML5 Playlist

The HTML5 ‘<audio>’ element requires audio files be in specific file formats depending on the browser. Currently, there are 3 supported file formats: MP3, Wav, and Ogg. The following table shows you the audio formats and browser support (the version number following the browser name is the earliest version of that browser to support either the audio element or the specified file format).

If you have worked with audio files much, you will know that the Wav file format produces the best quality sound. However, the file size is huge compared to the compression formats, MP3 and Ogg. Because of that I am only going to work with the compression formats. All the browsers listed above support either MP3 or Ogg.

Converting files using ffmpeg

You need to know a little about the codecs available for your version of ffmpeg before you begin. The following command line will help you with that. I suggest that you create a text file for reference.

ffmpeg32 -codecs

Here is the Windows command line to create the text file.
Note: The file will be created in the "C:\Program Files\ffmpeg" directory. You can change the directory and file name to what ever you want.

ffmpeg32 -codecs > "C:\Program Files\ffmpeg\ffmpeg_codec.txt"

In my version of ffmpeg, I have libmp3lame and libvorbis which are the two codecs we need to encode audio files to MP3 and Ogg respectively. Hopefully you have the same codecs available. If not, look through your list of available codecs to find an appropriate substitute, Some codecs are experimental and ffmpeg may give you more specific instructions upon use.

Encoding MP3 files

The following command lines show how to encode an MP3 audio file using ffmpeg.

ffmpeg32 -i "Your Input File" -acodec libmp3lame "Your Output File.mp3"

This command line will convert an M4A (iTunes) file to an MP3 file with a bitrate of 192K and a sample rate of 44100 Hz. It will keep any metadata that the original file had and write the Windows compatible ID3 tags.
Note: Change the directory path on both the input and output to match your setup. The input can have a different path than the output.

ffmpeg32 -i "C:\iTunes\iTunes Music\Music\Example\song.m4a" -f mp3 -acodec libmp3lame -ab 192K -ar 44100 -write_id3v1 1 -id3v2_version 3 "C:\My Web Files\Music\Example\song.mp3"

The next command line will extract the audio from an FLV (Flash) file and create an MP3 file and add metadata (ID3 Tags) for ‘title’ and ‘artist’.

ffmpeg32 -i "C:\My Downloads\Video\some.flv" -vn -f mp3 -acodec libmp3lame -ab 192K -ar 44100 -write_id3v1 1 -id3v2_version 3 -metadata title="The Title" -metadata artist="The Artist" "C:\My Web Files\Music\some.mp3"

Encoding Ogg files

Encoding Ogg files is very similar to encoding MP3 files with only a couple of changes. The following command lines show how to encode an Ogg audio file using ffmpeg.

ffmpeg32 -i "Your Input File" -acodec libvorbis "Your Output File.ogg"

This command line will convert an M4A (iTunes) file to an Ogg file with a bitrate of 192K and a sample rate of 44100 Hz. It will keep any metadata that the original file had.
Note: Change the directory path on both the input and output to match your setup. The input can have a different path than the output.

ffmpeg32 -i "C:\iTunes\iTunes Music\Music\Example\song.m4a" -f ogg -acodec libvorbis -aq 6 -ar 44100 -write_id3v1 1 -id3v2_version 3 "C:\My Web Files\Music\Example\song.ogg"

The next command line will extract the audio from an FLV (Flash) file and create an Ogg file and add metadata for ‘title’ and ‘artist’.

ffmpeg32 -i "C:\My Downloads\Video\some.flv" -vn -f ogg -acodec libvorbis -aq 6 -ar 44100 -write_id3v1 1 -id3v2_version 3 -metadata title="The Title" -metadata artist="The Artist" "C:\My Web Files\Music\some.ogg"

HTML5 ready audio files

Now that you have both an MP3 and an Ogg version of your audio files you can upload them to your web host server for use on your web site.