Being able to take an audio or video file and broadcast it to users of your web-site is not a difficult process, however there are several steps involved which I’ve summarised here. This tutorial focuses on audio files, however, to work with video files, follow the same concepts.
- Encode the source file into a format suitable for streaming
- Create a metafile, which will ensure users experience the streaming media correctly.
- Link from your web-page to the metafile.
Article Index
- Encode the source
- Streaming your media
- About the metafile
- Use of the metafile
- Creating a metafile
- Example: Streaming a sermon
- Working Example
- Beyond this simple example
- References, tools and further reading
Encode the source
Encode – Windows Media
Taking an audio file (of the ‘wav’ format) and converting it to Windows Media format is a straight forward process. Download Windows Media Encoder or Previous Version, install it, and the program will guide you through the process.
Encode – Real Format
Similarly, to convert to the real audio format you require RealSystem Producer. There is a free version available: RealProducer 10 Basic.
Streaming your media
With your original media file encoded into Windows Media or Real format, you need to now give visitors to your web-site access to this file. That is, you want your users to be able to click a link (either a text or graphic link) and have the chosen media “stream” to the assigned media player.
Linking to a file located on your web server is a simple matter. In the same way you link to a html file, you can link to a document, picture or media file (each will then open in the respective application on your computer, or if you don’t have the chosen application, you may be prompted to save the file, or find the relevant application on the Internet).
However, when trying to stream media from your web-site, there is an additional intermediate step required. That is, the creation of a ‘metafile’.
About the metafile
A metafile is a short text file (therefore, easily created in Notepad, Simpletext, or any text editor), much like an html file. However, instead of being rendered by a browser, the metafile is utilised by the media player to identify the location of the media file to be streamed. In addition, further ‘tags’ (similar, but not the same to those of html) can be used within the metafile to instruct the media player to present your media in a certain way.
For example, the metafile could add the following features to the presentation of the media within the media player:
- A logo graphic, with link back to an html document on your web-site that provides more information about the chosen content.
- Create a play-list, where the user can, within the media player, choose which track they want to listen to, out of a selection – much like the track on a CD.
Use of the metafile
On your web-page, rather than directly linking to the media file, you link to the metafile. When a visitor to your site clicks the link to the metafile, the metafile is downloaded to the user’s machine. The contents of the metafile are then sent to the respective media player, and ‘executed’. The media player using the information in the metafile, connects to the internet, locates the media file and begins to play it. Furthermore, the metafile will render any other instructions provided in the metafile, like: “display logo file and add hyperlink to homepage”. Of course, that is not how the contents of a metafile is written.
Creating a metafile
As was said earlier, a metafile is a text file, easily created in a basic text editor, you probably already have one available on your PC (Windows – Notepad, Macintosh – Simpletext).
Metafiles for use by Windows Media and Real Media are not the same, so, I will give an example of each below.
Example: Streaming a sermon
The following example will create the metafile, and associated HTML to create a link that will stream a single media file. The example is based on the practical application of providing a stream of a sermon.
Included is a banner or graphic, with a link to a chosen web-page. My example links back to this tutorial, however, in a real application, the link would be to the main church home page, or the text version of the sermon in question. The reason such a link is useful, is that the user may access the media file one day and bookmark it in their media player. On another day, the user accesses the media file, from the bookmark in their player. The graphic would indicate that if they click the graphic, they will be taken to a text version of the sermon. Thereby providing an integrated approach to utilising streaming media.
Windows Media Metafile
Filename: stream.asx
<ASX version = "3.0">
<TITLE>Streaming Media Sample</TITLE>
<ABSTRACT>Streaming media sample by Simon Job.</ABSTRACT>
<AUTHOR>Toongabbie Anglican Church</AUTHOR>
<COPYRIGHT>Toongabbie Anglican Church</COPYRIGHT>
<MOREINFO HREF="http://simon.job.id.au/articles/3/streaming-media-tutorial" />
<BANNER HREF = "http://simon.job.id.au/files/streaming/logo_wm.gif">
<ABSTRACT>Streaming media sample</ABSTRACT>
<MOREINFO HREF = "http://simon.job.id.au/articles/3/streaming-media-tutorial" />
</BANNER>
<Entry>
<Ref href = "http://simon.job.id.au/files/streaming/stream.wma" />
<TITLE>Freedom</TITLE>
</Entry>
</ASX>
Explanation of .asx metafile:
The <TITLE>, <ABSTRACT>, <AUTHOR>, <COPYRIGHT> and <MOREINFO> tags all provide information to the end-user through Windows Media Player.
The <BANNER> tag and the <ABSTRACT> and <MOREINFO> tag related to the <BANNER> tag, specify the appearance and behaviour of a ‘banner’ shown within the player window.
The <Entry> tag is specifying the audio file to stream.
Use of the .asx file:
In the HTML document, a simple link is made to the ’.asx’ file:
<a href="stream.asx">Windows Media Stream</a>
Real Media Metafile
Filename: stream.ram
http://simon.job.id.au/files/streaming/stream.smil?screensize="original"
The .ram file, like the .asx file, is linked from the HTML page:
<a href="stream.ram">Real Audio Stream</a>
For the Real Format, a second file is required. The .smil file is referenced from the .ram file, which is referenced from the HTML document!
The .smil is similar in composition to the .asx file.
Filename: stream.smil
<smil>
<head>
<meta name="Title" content="Streaming Media Sample"/>
<meta name="Author" content="Toongabbie Anglican Church"/>
<meta name="Copyright" content="Toongabbie Anglican Church"/>
<layout>
<region id="pic" top="0" left="0" width="150" height="150" background-color="white"/>
</layout>
</head>
<body>
<par>
<audio src="http://simon.job.id.au/files/streaming/stream.rm" title="Freedom"/>
<img src="http://simon.job.id.au/files/streaming/logo_rm.gif?
url=http://simon.job.id.au/articles/3/streaming-media-tutorial"
region="pic" title="picture" fill="freeze"/>
</par>
</body>
</smil>
Explanation of the .smil metafile:
Most of the tags are self explanatory / similar to those of the .asx file.
The <layout> tag is used to define a section within the player window that can later be used by a logo/graphic.
The <par> tag is similar to the <ENTRY> tag of the .asx file. Within the <par> tag the audio file to stream is identified. Also within the <par> tag, an image (<img> tag) and an associated hyperlink for the image are specifed.
Working Example
Extract from ‘Freedom’ : Toongabbie Anglican Church
Click one of the following links to listen to an audio stream of a short sermon extract:
Beyond this simple example
Other features that can be provided using metafiles:
- A pre-sermon ‘advertisement’, indicating that the source of the content they are about to listen to. This could be a generic presentation that is utilised for all sermons distributed on your site.
- Multiple files can be presented as a play-list, which the user navigates within their media player – much like playing a CD of several tracks.
Also, for a more integrated look, media player controls can be embedded within an HTML document.
References, tools and further reading
Windows Media
- Windows Media Player
- Encoding software: Download Windows Media Encoder or Previous Version
- MSDN Home > MSDN Library > Audio and Video
- Adding Windows Media to Web Pages
- All About Windows Media Metafiles
- Windows Media Logos
Real Format
- Real One Player
- Encoding software: RealProducer 10 Basic
- RealSystem Production Guide
- RealNetworks Logos