How To Put MP3 Files in a Web Page
Ways to Insert Audio and Video Files and Media Players in HTML Pages
A collection of techniques for putting MP3 audio and video files in web pages as well as embedding media player controls to automatically play them.
Webmasters like to offer audio (MP3 podcasts) and video (YouTube or otherwise) media to their visitors. Being able to offer a multimedia experience in the web page makes a site more sticky -- the visitor is more likely to come back. Sometimes it is enough to offer a link to the MP3 file as a way to insert the audio into the page, but this requires that the visitor is savvy enough to have appropriate software to enjoy the audio, as well as knowing how to make the best use of it.
Video presents a similar, if a more complex problem. Again, inserting video in a web page will make it more attractive, and again there are two choices - embed or link to the media file from the web page.
These are the two approaches that this article deals with:
- Linking to the audio or video content;
- Ways to embed (insert) audio and video files in HTML pages.
Along the way, the technique to embed media players is also discussed, and requires no tricky programming or JavaScript!
Linking to MP3 and Video Files
Linking to audio or video in a web page is no more difficult than building a URL to identify the resource:
<a href="http://my.site.com/my_audio.mp3">my audio</a>
The above HTML will simply make a link in the web page that allows the user to save or play the content when they click on it. It is customary to provide a line of text that says something along the lines of:
- Windows users, right click and select 'Save As...'; Mac users hold the Apple key down whilst clicking the link.
This allows the user to choose the right behavior. If they click on the link, then it is unpredictable as to what will happen next. On some platforms, the media will open in a new browser window and begin to play. On others it will not.
To play the media in the browser, and give a consistent user interface, it is necessary to embed it.
Embedding the MP3 in a Web Page
The goal of embedding the audio or video content is to let the user play the file in the browser, whilst also keeping them on the page. There is nothing to save and wait for, and they need only click a simple play button. So, there must be some kind of media player embedded in the page too.
Luckily, there is an easy solution. It is offered by Yahoo!, where the web page owner can just insert a single line of HTML into their web page:
<script type="text/javascript" src="http://mediaplayer.yahoo.com/js"></script>
Now, whenever the URL above is encountered in the web page, a little gray arrow appears next to it. When the visitor clicks the arrow, the embedded media player will open. The advantage with this approach is that the visitor can still download the audio or video file, using the URL.
As long as the web host allows file streaming, this will work flawlessly with any web page. If not, then there are free hosts that will provide audio and video streaming, but have some limits on bandwidth that ought to provide more than enough for most users. Of course, if the media is to be placed in the public domain, then the two obvious choices might be iTunes for audio, and YouTube for video, but these come with their own service baggage.
