HTML – Audio Player

Welcome to another MicroTechTutorial.
This tutorial is going to teach you how to make an HTML5 audio player.
No flash involved, no .swf, no .flv’s, just actual audio files and embedding them in
a web page, and getting a nice audio player. Very simple, easy to do
I’ll cover video players in the next video. So before I start with teaching
you how to convert files you need to know that not every browser accepts the
same format of audio files. It’s important to know that you don’t need
all three but it’s recommended to have at least two, and what to two? There’s
two combinations you should probably use. Definitely use mp3 because it’s a good
common file as you can see Firefox and Opera are the only browser that do
not support mp3 and if you look at .wav it supports Firefox and Opera and if you
look at OGG, it supports Firefox and Opera. Meaning, that you
need definitely mp3 and then either WAV or OGG you do not need both, but I’m
going to embed all three just in case I need it. But you don’t necessarily need
it. So let’s get started with converting the files to the right format in
audacity so let’s get started. The program I’m using is called Audacity
it can be downloaded at the link on screen now. First thing you want to do is
open up Audacity and import your audio. So to go to file –>import –>audio. Select the audio,
but I already have something recorded so I don’t need to do that. Next you
want to go ahead and export your audio. There’s three different types so the
first one we’re going to do is a super simple file type which is yep mp3 so I’m
going to export it and then I’m going to go ahead and export it as an OGG file
and again I’m going to just going to keep things simple call “audio” again and
hit OK. WAV isn’t necessary but it’s good to have on hand. Then you just upload
these to your web server so then you can link it in the HTML section so let’s
move on to the next part alright. So let’s get started so let’s type

Author: Kevin Mason

Leave a Reply

Your email address will not be published. Required fields are marked *