This article is printer friendly.
Streaming Media Tutorial
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
Comments
- Permlink
- 2 ·
- Comment by
- Dan ·
- Date Stamp
- Thursday 29 September, 2005 at 09:44 AM
Hi!
Really good and easy tutorial i think 
I don’t seem to be able to use Macintosh to stream those files though? I suppose the tutorial is for PC?
Do you happen to know how to stream by macintosh as well?
Dan, are you saying you can’t play the files on a Mac?
I don’t have access to a Mac with Windows Media Player or Real Player at the moment, but have tested on a Mac in the past, and it works fine.
I assume you had Windows Media Player or Real Player installed on the Mac? By default Macs don’t have either (as far as I know).
The preferred format for Macs would be Quicktime, but you need to pay for Quicktime Pro to make the file streamable.
- Permlink
- 4 ·
- Comment by
- Dan ·
- Date Stamp
- Thursday 29 September, 2005 at 10:09 AM
Hi again!
I’m afraid i dont have either media player or real player on mac here. But there are versions for mac you say, that’s good.
Oh. You must pay for Quicktime.. :/
Is there any other usual formats for mac too? (i want to be able to stream for both PCs and Macs from the job)
Dan
Quicktime Pro will allow you to “hint” the file for streaming. Apple have some QuickTime Pro Tutorials.
An alternative might be Flash which does streaming and video. Although, Flash is a far more expensive option than QuickTime.
- Permlink
- 6 ·
- Comment by
- Dan ·
- Date Stamp
- Thursday 29 September, 2005 at 10:56 AM
Oh, I see. Mac seems a little harder and a little more expensive indeed. I think I start with PC
Thank you for all recommendations, Simon!
Dan
Dan, I forgot about streaming MP3 files (as Jeff mentions in Comment 1. This is probably the easiest option.
Create a .m3u file, and put a single line in it which points to the mp3 file. More details in this tutorial found on Jeff’s site.
- Permlink
- 8 ·
- Comment by
- Dan ·
- Date Stamp
- Sunday 2 October, 2005 at 11:24 AM
Oh. I’ll check it out Thanks!
Hi, I have read your tutorial regarding streaming audio with much interest.
For over a year now I have been getting the sermons to play by creating a WAX file.
This works perfectly in windows explorer, but for some reason mozilla it does not. In mozilla all that happens is the contents of the wax file are displayed.
For example, if you click on the following link in windows explorer the sermon should start playing.. http://www.southernriver.com/sermons/13nov2005pm.waxbut in mozilla the following is displayed:
<ASX VERSION=“3.0”>
<ENTRY>
Thanks in advance
Kind regards and God bless
Ian
Ian, I think this is because your web server is not sending the correct content-type to the browser. For the .asx files it should be sending “video/x-ms-asf”, for .wax files it should be sending “audio/x-ms-wax”. (Working for Internet Explorer because IE looks at the extension, not the content-type… I think).
To fix, I suggest:1. Ask your webhost to make the change or
2. If on an Apache server (which I think you are) you can use a .htaccess file. A .htaccess file is a text file with the filename .htaccess with the content:
AddType audio/x-ms-wax .wax
You would FTP this file to the sermons directory of your site.
Content Types – Web Developer Boot Camp (found by a Google search) looks like a good reference (allbeit a bit technical). If you want to search further, the key terms for you here are “content-type” and to fix the problem “htaccess”.
Hi Simon
Fantastic!!
That worked very well.
Thank you!!!!! Ian
- Permlink
- 12 ·
- Comment by
- Ian Barton ·
- Date Stamp
- Thursday 29 March, 2007 at 07:50 AM
I have just come across your tutorial on streaming and found it most beneficial. The tutorial alludes to a feature that I would like to implement but it is under the heading of “beyond this simple example”.
I have a web-site http://www.adam.com.au/ianbarton/index.htm which offers a “Listening Room” where listeners can select tracks to listen to one at a time. What I would like to be able to offer is for the listener to somehow create their own playlist of 3 or 4 or maybe 20 tracks then set the tracks playing automatically. Can you expand on this topic as you indicate this is possible or perhaps offer me someplace to read about it. I have saved your page to my Favourites listing as I am sure I am going to learn a lot from it even though it only covers part of the topics. RegardsIan
Ian,
To create a playlist is easy. In an .asx file, you simply have multiple “entries” that is the entry tag to the close of the entry tage. For Reference Creating Metafile Playlists. For Real Media, in the smil file, you add the par tag to the close of the par tage, and surround all the sets of tags with seq tags (seq for sequence). Details are in Chapter 6 of the RealSystem Production Guide However, I first learnt all this, and subsequently wrote the tutorial, to build sample playlists for http://emu.mu. Since then, I have changed to use Flash driven MP3 players. In particular I use the <span class=“caps”>XSPF</span> Web Music Player which has various style, an example of this player in user is here: Valley of Vision. Having said all that, you’re talking about creating dynamic playlists, i.e. user created, that’s another step again requiring a scripting language of some type. Well outside the scope of what I’ve done here. Not sure where to start with that.
- Permlink
- 14 ·
- Comment by
- David Webb ·
- Date Stamp
- Sunday 15 July, 2007 at 05:21 AM
Hello,
I enjoyed your tutorial. I have been attempting to stream music to my t-mobile dash windows mobile 6 smartphone for the past couple months now to no avail. I have followed your step by step instructions and still am unable to reproduce your streams on my server. I have even used your exact stream.asx and the freedom wma to test – to no avail. I get a x00870005 error message in windows media player on my dash. It loads quick and says it is locating but then produces the error message. Oddly enough, your example on this webpage works fine on my dash! Not to mention, Orb for windows streams wma and mp3 to my dash with no issues. But I’ve tried using jinzora for debian which has an option to switch to asx streams and it still doesn’t work. I’m at a loss here and am reaching the end of my patience. Could you please assist me with this issue? That would be a great help. I have a feeling now that something with the permissions is wrong with apache or mysql. I really don’t know. Please let me know. Thanks! faskoflow@obviousdiscrete
David,
I don’t think I’m going to be able to help you.Have you tried the stream you’ve put on your server in Windows Media Player on a PC?
One suggestion, make sure your server is sending the correct content-type, see comment 10.
- Permlink
- 16 ·
- Comment by
- David Webb ·
- Date Stamp
- Sunday 22 July, 2007 at 02:58 AM
Simon,
The example I created to mimic yours did work on a pc but not on the dash. And I am pretty positive that my server sends the correct content-type because it does work on a pc. I’m thinking now that it may have to do with the Windows Mobile 6 OS just not communicating with my <span class=“caps”>GNU</span>/Linux Debian server correctly. I don’t know anymore! haha… I’m still tweaking it daily to see what I can get to work…any suggestions would be appreciated…Thanks!
David,
It may still work on the PC, even if the content-type is wrong. If you’re testing with IE, it uses the file extension rather than the content-type. You can check with Rex Swain’s <span class=“caps”>HTTP</span> Viewer. Simon.
- Permlink
- 18 ·
- Comment by
- Haider ·
- Date Stamp
- Wednesday 22 August, 2007 at 11:05 AM
Hi, I have read ur tutorial, is there any method to play more than one songs (Ram files) in sequence in a single <embed> </embed>
tag. What if the user wants to play the entire playlist.
Haider,
I don’t have an experience with embedding, this tutorial is about streaming through a media player. Using the method described above, only plays one “track”. To play multiple tracks or songs, you just add to the “smil” file. <smil><head>
<meta name=“Title” content=“Example”/>
<layout> <region id=“pic” top=“0” left=“0” width=“150” height=“150” background-color=“white”/>
</layout>
</head>
<body>
<seq>
<par> <audio src=“song1.rm” title=“song 1”/>
</par>
<par> <audio src=“song2.rm” title=“song 2”/>
</par>
<seq>
</body>
</smil>
Notice the “seq” tags now surround the “par” tags. So, for embedding, your embed would link to the “ram” file, which in turn links to the “smil” file which contains the multiple tracks. Having said all that, I personally now favour the flash type players. Greater compatibility.
Rozeta,
I have never implemented an embedded player – I just didn’t like them. So, I’m sorry I can’t help you with the specifics of that – however, working through some of the references you should be able to find some details. A much easier way would be to use a Flash Media Player like the JW <span class=“caps”>FLV</span> Media Player. I like this player because it works great, looks good and has a setup wizard that allows you to create the code to create an embedded player. Hope that helps,Simon.
- Permlink
- 21 ·
- Comment by
- Rozeta Dee ·
- Date Stamp
- Thursday 6 March, 2008 at 06:54 AM
Hello Simon looking for some help on streaming from my website. I have ripped my music, encoded it and now its on (winamp).and my host for streaming is ServerRoom.us I am already streaming but not from my website. .what i need is the html code for a player so i can embed it on my site. Also i dont know how to add the streaming server and what ever else i need for the player..
this is all new to me so im having a real hard time. I got a code from the internet and embeded it on my site but the player didnt play..so i did something wrong..I hope to hear from you soon..tyvm
Mz Rozeta
- Permlink
- 22 ·
- Comment by
- mensajes claro ·
- Date Stamp
- Friday 2 April, 2010 at 02:38 PM
Thanks for this interesting post , i am a begginer and this will help me a lot.
Thanks for sharing this info with us.
Greetings from latinoamerica.
You might add info on streaming MP3 format files too. Easy enough to do. There is also discussion of whether some formats really need streaming at all. Email me if you want to chat about it.