Notes on Adding Audio and Video to Web Pages L. G. Piper BHCC 6 April 2011 Back in the Dark Ages— about five years ago CMT111—Audio/Video—6April11 — 2 Most people didn’t have broadband connections – computers too slow to download audio and video in real time – so people shared audio and video files differently • download while you’re doing something else • view/listen in application on your computer Audio and Video files came in a complex array of formats – people needed to convert from one to another – proprietary formats tried to resist such conversion • Windoz people couldn’t read Mac files and vice versa Some formats eventually won out and using most others is a waste of time Audio 101 CMT111—Audio/Video—6April11 — 3 Only two or three audio formats worth one’s time .mp3 – The standard form for music files – this is what’s on your iPod and what you get from iTunes .midi – created by music synthesizers – limited, but easy to create from sheet music – …or from which to create sheet music .wav – basically an unprocessed (or little processed) sound file – maintains (most) of fidelity when copied from vinyl records – My son and I convert old tapes and records to .wav, and from there to .mp3 Common Sound File Formats on the Web CMT111—Audio/Video—6April11 — 4 Only three Format Description AIFF/ AIFC Audio Interchange File Format. AIFF was developed by Apple for use on the worthwhile Macintosh operating system. AIFF sound files can be either 8 bit or 16 bit, can be mono – .mp3 or stereo, and can be recorded at several different sampling rates. AU Also called mlaw ( mu- law) format. One of the oldest sound formats, it is primarily used – .midi on UNIX workstations. AU sound files have 8- bit sample resolutions, use a sampling rate of 8 kHz, and are recorded in mono. – .wav MIDI Musical Instrument Digital Interface. MIDI files cannot be used for general sound recording, like other sound formats, but are limited to synthesizers and music files. The A new format MIDI format represents sound by recording each note’s pitch, length, and volume. MIDI may come files tend to be much smaller in size than other sound formats. MP3 The most popular format for downloading and storing music, MP3 compresses sound into play in files to roughly one-tenth the size of uncompressed files while maintaining good audio the future quality. RealAudio A [formerly] popular sound format on the Web, RealAudio files are designed for real-time – .ogg playing over low- to high-bandwidth connections. RealAudio files tend to be much smaller than AU or WAV files, but the sound quality is usually not as good. SND The SND format is used primarily on the Macintosh operating system for creating system sounds. This format is not widely supported on the Web. WAV WAV is the standard audio format for Windows PCs and is commonly used for storing uncompressed CD-quality sound files. In its uncompressed format, a WAV file will require about 10 megabytes per minute of sound; however, compression algorithms are available to reduce the file size. WMA Windows Media Audio is a proprietary audio format developed by Microsoft to compete with MP3s, offering near or better levels of compression than MP3s. Browser Plug-ins CMT111—Audio/Video—6April11 — 5 Most browsers play audio and video by way of “plug-ins” – bits of code added to browser Need different plug-ins to play the different formats – Most plug-ins will play .mp3 and .midi My browsers all seem to have Quicktime and Flash plug-ins installed through no effort on my part – Then things work automagically…most of the time Avoid RealPlayer, it’s intrusive crap Audio Format Mime types CMT111—Audio/Video—6April11 — 6 Audio Format Mime types Need to know mime type Format File MIME Type to tell browser which Extension plug-in to use AIFC aifc audio/x-aiff AIFF aif audio/x-aiff AIFF aiff audio/x-aiff Put the mime type inside AU au audio/basic the tags as an attribute, MIDI mid audio/mid for example, for mp3 use MIDI rmi audio/mid type=“audio/mpeg” MP3 mp3 audio/mpeg MP3 mp3 audio/x-mpeg RealAudio ra audio/x-pn-realaudio RealAudio ram audio/x-pn-realaudio SND snd audio/basic WAV wav audio/wav WAV wav audio/x-wav Four (or Five) Ways to Put Audio on a Web Page CMT111—Audio/Video—6April11 — 7 1. Provide a link to the media file 1. in most browsers, clicking on the link will cause the file to play 2. some browsers just offer you an option to download the file 2. embed media file in <object> tag set 1. this the official method 3. embed media file inside <embed> tag set 1. everyone uses this even though it’s not official (deprecated actually) 4. embed media file inside <audio> tag set 1. The future, but today it only works in a few browsers and only for a few formats 1. Chrome, Safari and Opera—some, but not all formats 2. Firefox—onnly .wav and .ogg formats worked for me 3. allegedly will work in IE9, but not current/earlier versions 1. NOTE: IE9 will not work on WinXP 5. Can also embed a flash audio player you or someone else made Linking to the File CMT111—Audio/Video—6April11 — 8 Just put up a standard link – might want to add a mime type, but generally not necessary Works for most important file types – .mp3 – .midi – .wav On my computer spawns Quicktime player plug-in Example: <a href="./music/SumertimeBlues.mp3"><cite>Summertime Blues</cite></a> Easy-peasy, huh? Using the <object> Tag Set CMT111—Audio/Video—6April11 — 9 This is the official method – Works great in Opera, Chrome, Safari – mostly works in FireFox – Does not work in IE6 – sometimes ok in IE8 You can extend to formats other than .mp3, .midi, and .wav by using Windoz active-x (but I don’t see the point—I don’t trust active-x) Example <object data="./music/SumertimeBlues.mp3" type="audio/mpeg" height="20" width="150" title="Summertime Blues, albeit not by Eddie Cochran"><cite>Summertime Blues</cite> <param name="autoplay" value="false" /> <param name="src" value="./music/SumertimeBlues.mp3" /> <param name="controller" value="true" /> <param name="showcontrols" value="true" /> </object> Using the <embed> Tag Set CMT111—Audio/Video—6April11 — 10 This seems to be what people actually do – makes .mp3, .midi, and .wav work in IE6 too – still some issues with FireFox Technically, one shouldn’t use this: it’s been deprecated – BUT…it will become un-depracated with HTML 5 – Why fight city hall? Example: <embed src="./music/SumertimeBlues.mp3" type="audio/mpeg" width="150" height="20" autostart="false" title="Summertime Blues, albeit not by Eddie Cochran"><br /> <cite>Summertime Blues</cite> </embed> Some people nest <embed> inside <object> so as to be official, and work in old IE versions Using the <audio> Tag Set CMT111—Audio/Video—6April11 — 11 This is the wave of the future: added to the HTML 5 specification Currently works, for .mp3, .wav and .ogg in Chrome, Safari, and FireFox – only .wav and .ogg files in Opera and FireFox – only .mp3 and .ogg files in Safari Allegedly will work in IE9 – BUT…IE9 won’t work on WinXP (>50% of Win comps in Feb 2011) Example: <audio src="./music/SumertimeBlues.mp3" type="audio/mpeg" width="150" height="20" controls="controls" title="Summertime Blues, albeit not by Eddie Cochran"> <br /> <cite>Summertime Blues</cite> </audio> You Can Also Embed a Flash Player CMT111—Audio/Video—6April11 — 12 Available from several places on Web Example is the “Google Reader” player – http://sites.google.com/site/mori79/html-gadgets/media-players/google-reader- player Paste in the code <embed src="http://www.google.com/reader/ui/3523697345-audio-player.swf" flashvars="audioUrl=http://www.example.com/song.mp3" width="400" height="27" quality="best" wmode="transparent" type="application/x- shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer"> </embed> change audio url to the one of your choice – I only got this to work from web-based url – should work with local host, but quick try failed. I need to investigate further Audio Formats and Methods Supported By Various Browsers CMT111—Audio/Video—6April11 — 13 Format Method Browsers <object> Opera, Chrome, FireFox, Safari .mp3 <embed> Opera, Chrome, FireFox, Safari and IE <audio> Chrome, Safari <object> Opera, Chrome, FireFox, Safari .wav <embed> only IE <audio> Opera, Chrome, FireFox, Safari <object> Opera, Chrome, FireFox, Safari .midi <embed> only IE <audio> No one <object> Opera, Chrome, FireFox, Safari and IE .wma <embed> Opera, Chrome, FireFox, Safari and IE <audio> No one <object> No one (some autoplay though) .ogg <embed> No one (some autoplay though) <audio> Opera, Chrome, FireFox <object> generally works for Opera, Chrome, FireFox and Safari <embed> generally works for IE So, combine them! A Combined Approach for Audio CMT111—Audio/Video—6April11 — 14 Many folks will wrap <object> tags around <embed> so as to ensure their file works in all browsers, not-IE and IE – either than or use a flash player For example <object data="./music/SumertimeBlues.mp3" type="audio/mpeg" height="20" width="150" title="Summertime Blues, albeit not by Eddie Cochran"><cite>Summertime Blues</cite> <param name="autoplay" value="false" /> <param name="src" value="./music/SumertimeBlues.mp3" /> <param name="controller" value="true" /> <param name="showcontrols" value="true" /> <embed src="./music/SumertimeBlues.mp3" type="audio/mpeg" width="150" height="20" autostart="false" title="Summertime Blues, albeit not by Eddie Cochran"> <br /><cite>Summertime Blues</cite></embed> </object> I’m not sure about tag wrapping CMT111—Audio/Video—6April11 — 15 You may need to do some special conditional comments when you do tag wrapping comment out conditional comment.