Part 5 - Adding Multimedia Features

Adding Multimedia Features

Other media on the Net

While we're at it, let's not forget that the Internet can now support a wide variety of other media in addition to the text and graphics "traditionally" viewed via a Web browser. Helper applications or "plug-ins" can extend the capabilities of Web browsers to support animation and video, audio, speech, MIDI, 3D graphics (see VRML, below), or just about anything else. Naturally, some of these types of media are more successful than others, due to the often limited bandwidth of the Net.

Streaming Video

If you create a highly optimized one-minute AVI file, it is still going to be something in the order of 4MB in size, and require 39 minutes to download downloading in the background over an ISDN connection (and two to six times that long to download via modem).

Clearly, your visitors have to be very curious about your video content to invest the time, especially when they pay connect-time or per-megabyte charges for their internet access.

Similar to the way that RealAudio, TrueSpeech and other products deliver streaming audio across the net, a number of products promise streaming video. Naturally, due to the increased bandwidth demands, you aren't going to get full-screen, full-motion video with sound in much less than about 300K per second's worth of bandwidth, but a number of products are pushing the edge of what is possible, within the confines of today's (and tomorrow's) Internet infrastructure.

There are a number of products currently available that promise to stream digital video files in AVI, QuickTime, MPEG and/or other formats. By utilizing the JavaScript shown here (and included on the CD, in the section entitled JSCRIPT:) and Navigator 3, you can create a page that loads a movie file if -- and only if a plug-in is available to play the video back. Otherwise, the JavaScript loads an alternate page, with whatever text or graphic you choose.

ShockWave for Director

Shockwave was released in late 1995 as a Netscape plug-in that allows specially processed Director animations to be embedded into your HTML code. The Macromedia software that performs the encoding is known as Afterburner; the playback software is called ShockWave. Both are free, and are available for Macs and PCs. So, how does the company make its money? You need its $1495 Director program to create the original files. Of course. As mentioned earlier, recent ShockWave releases also support streaming audio.

MPEG

Digital Movies

The MPEG (motion picture experts group) standard is an example of a compressor optimized for “digital movies.” It exploits practically every trick in the book (current products require special chips with built-in routines for performing run-length encoding, delta compression, discrete cosine transformations, etc.) to squeeze the enormous amount of data required by full-motion video down to play back at reasonable frame rates and picture sizes on today’s PCs. “MPEG Level 2” promises to improve performance even further and should allow delivery of all-digital movies and “on-demand” multimedia.

Apple’s QuickTime and Microsoft’s Video for Windows technologies include several compressor/decompressor “codecs,” each optimized for a particular purpose. Those intended for animation trade image quality for speed, while still-image compressors favor image fidelity over speed.

The Cinepack codec from SuperMac (licensed to a variety of companies including Microsoft, Apple, Atari, and 3D0) is one of the most widely used full-motion compressor/decompressors.

“Doing it in software” necessarily reduces the performance of full-motion video playback, at least on today’s computers. Typically, software-only video playback allows a 320-by-240 pixel screen at 15 to 30 frames-per-second. This is a nowhere near VHS, which, in turn, is a far cry from a 35 mm motion picture. So, we still have a long way to go.

For more info on MPEG and Audio, visit the MPEG Plaza - The Source For MPEG - http://www.visiblelight.com/mpeg.htp

Provide Links to Required Plug-ins

Many of the most sophisticated effects currently possible on Web pages rely upon features of Netscape Navigator, Internet Explorer or a compatible browser. Many web authors put a "this page is designed for Netscape Navigator" or "Best viewed with Microsoft Internet Explorer" link, or something to that effect, on their home pages. Actually, some web surfers find this sort of message slightly offensive, especially if they are fans of a web browser other than either of these two titles. Designing for the Big Two is one thing, but telling the world you are doing it is apparently more than some of the CyberDog fans, OS/2 Web Explorer zealots and other non-conformists (bless their hearts!) can stand. I'd recommend leaving the Netscape or Microsoft promotion tags off your page, unless you feel the need to convert others to your browser religion.

I'm also increasingly inclined to recommend against creating pages that require third-party plug-ins, despite the fact that an increasing number of browsers (see below) support them. I have found that people usually don't have the plug-ins and don't want to drop what they are doing and spend a half and hour or more downloading some plug-in just so they can come back and look at some page they don't really care about anyway. Thus, I recommend concentrating on Web site effects that are possible with components supplied with the mainstream browsers: Navigator and Internet Explorer.

At this time, this allows a considerable array of functionality:

  • Navigator 3.0 (standard):
  • GIF 87a >
  • GIF89a (partial support only. Supported features include transparency, interlacing, images with more than 256 colors and basic GIF animation.)
  • JPEG
  • Progressive JPEG
  • AVI1
  • Audio (AU, AIFF and several formats of WAV files supported)
  • MIDI
  • VRML 1.0
  • Java
  • JavaScript
  • and HTML text, of course.

1 The AVI plug-in is not supplied with the Mac version.

QuickTime is also supported by Navigator, but requires additional Apple software to be downloaded separately.

A better ideas, perhaps, is to provide a page where people can download the tools they'll need to access the goodies on your pages. Links to plug-ins, helper apps and browser upgrades can go here, where they'll do some good.

On this Setup page, you might state some basic requirements:

"This web site is designed to be viewed with a graphics-capable web browser. For best results, set your video to at least 65K colors and a resolution of at least 640 x 480. Set your browser's Options, Preferences, Fonts and Background Colors to "Default."

Here, you can stipulate what helper apps or plug-ins will be required. You should provide links to the sources of all plug-ins, and you should include a MAILTO: link so that visitors can e-mail you with questions or comments.

Browsers that support Netscape plug-ins

  1. Navigator 2.0 or newer
  2. Microsoft Internet Explorer 2.0 or newer for Mac
  3. Internet Explorer 3.0 - 5.5SP1 (this feature has been removed from IE6) for Windows 9x and NT
  4. CyberDog (68K and PPC Mac)
  5. Oracle PowerBrowser

Note that, in the case of Internet Explorer 3.0, a few plug-ins expect to find Netscape Navigator on the system and won’t install unless it is present, and a few won’t work at all. There are several possible workarounds.

  1. leave Netscape Navigator 2.0 or newer installed
  2. manually drag the DLL files into Internet Explorer’s plug-ins directory
  3. Find out if the company makes an ActiveX version of the plug-in. If Internet Explorer 3.0 comes across an EMBED tag and is unable to load a Netscape plug-in capable of handling it, it will automatically load and use an appropriate ActiveX control instead.

The document http://www.microsoft.com/IESupport/content/Issues has more information.

Here’s how to use the EMBED tag

Use the tag to place MIDI, AU, AIFF, QuickTime, or AVI files in your document. They will automatically play in Navigator 3.0 and later/

Here's how you embed QuickTime into your web page

Replace the name "yourfile.mov" with the name of your movie, and the values for height and width of the movie with the dimensions of your movie (add 24 to the height of the movie for the default controller). (Hint, if you don't know these values open your movie with MoviePlayer that comes with QuickTime and select Get Info from the Movie menu. Choose Size from the right pop-up menu. You will need to add 24 pixels to the height for the height of the controller unless you have specified CONTROLLER=FALSE (see below).

Note that there are several optional parameters for EMBEDded objects (the PLUGINSPAGE paramenter, for example, sends Netscape 3 users who don’t have the plug-in to an appropriate page where they can download it), and some media types and plug-ins support their own optional parameters for the EMBED tag. See the documentation for the specific plug-ins for further info.

Questions and Answers about EMBEDed objects

Q: What happens if I embed a movie (etc.) and the viewer does not have the appropriate plug-in?

A: Your page will display a frame where the movie should be and the standard Netscape missing-element icon. For this reason, you should always use the PLUGINSPAGE parameter of the EMBED tag to point your viewers to a web page where they can download the plug-in.

Q: What will the experience be for users who do not have the plug-in or a browser that supports it?

A: Movies that are embedded using the EMBED tag won't show up - instead the plug-in prompts the user to go to the URL specified by the PLUGINSPAGE parameter. So if you want to give users the alternative of using the good old MoviePlayer-as-a-helper-app strategy, you could put some text next to your movie like this: "Click here if you don't have Netscape 3.0 and Apple's QuickTime plug-in, but you have specified a helper-app capable of displaying QTVR movies."

You need to have an HREF tag around the word "here", like this:

here

Then as long as "mymovie.mov" is in your current directory, if the user clicks on the word "here", MoviePlayer (or PLAYER.EXE on the Windows side) should launch, assuming the user configured it as the helper app for .mov files in their browser.

Q: Other people send me e-mail with fancy fonts and formatting. How can I do this with Outlook Express?

A: You need to enable the "rich text" feature of your email program, to enable the font, paragraph, indent and other options that were previously available. To do this, Just go to the format menu and choose Rich Text. Remember,, however, that other users without advanced mail programs might see the embedded codes as gibberish when you do this. It might be best to use Outlook Express' "Send mail the the same format as you receive it" function, to be on the safe side.

In recent versions of Outlook Express, it is also possible to attach a sound to an email message, so that it plays automatically when the mail is opened or previewed.

When you use the Add Sound function of Outlook Express to attach a sound such as "tada.wav" (Create Mail; Format ; Background; Sound...), it adds code like this to the message:

Your email body text goes here....

Similarly, a custom background or color can be added.

Note, however, that if the recipient's email program doesn't understand HTML, it won't work. If the recipient's email program DOES understand HTML, but doesn't understand the Microsoft-specific "BGSOUND" tag, it won't work. I could go on, but I think you get the idea.

As with custom fonts or other fancy formatting, there is no guarantee that the recipient will be using an email program that supports the various multimedia enhancements Outlook Express (or some other software title) is capable of inserting into the file. It's an issue that's difficult to solve definitively. There are, however, some things you can do.

To address this you must do one or more of the following:

  1. Persuade everybody to standardize on the same email program (Microsoft has already tried this. ;-)
  2. Develop and include multiple pieces of code for the most popular browsers/email programs (thus risking the possibility that the sound may play twice, as happens if the Netscape EMBED tag is also included.)
  3. Use some sort of intelligent routine on the server that understands what kind of browser they have and automatically sends the appropriate file type.
  4. Use a more widely compatible standard (e.g., Flash)
  5. Don't include the sound, and instead invite people to link to it via a Web browser, then post it in a widely compatible format such as MP3.

All of these options have their merits. I wouldn't worry about it too much. Although I recommend that you try to create content that everyone can enjoy, a part of me asks: If you send it from Outlook Express and users of Netscape or Eudora (etc.) can't hear it, who cares? They're a relatively tiny minority, and they probably don't even know there is supposed to be a sound in there.

For better or worse, Microsoft's browser and its associated email tools are the dominant forces in the market, and IE is by far the richest browser in terms of multimedia support. If recipients of your messages don't wish to take advantage of the extra features offered, it's their loss.

Creating video content for the Internet

There is a big difference between QuickTime or Video for Windows movies that work well over the Internet and the movies you may be used to seeing on CD-ROMs. This section explains the reasons for the difference and some tips and tricks you can use to optimize your movies for playback over the internet.

Many people still have 14.4 or 28.8 modem links to the Internet. A 28.8 modem can download a movie at about 2.5 kBytes per second maximum, so a 10 second, 500k movie can take several minutes to download.

Even if you are creating content for an intranet-only T1 or T3 connection you will find yourself limited by bandwidth. A T1 line can transfer about 100K per second so under the best conditions, a 500k movie may appear almost instantly - but in practice anything more than 50Kps is tremendously unlikely, and 10Kps is much more realistic).

Unfortunately, digital video movies tend to be large. A typical 30-second sound and video movie designed for CD-ROM delivery can be several megabytes in size and can take minutes to download even over a fast connection.

As a webmaster you don't want to keep your audience waiting or overload your site. So if you have existing content prepared for CD-ROM delivery, you will want to take short clips of the movie and probably re-compress them at a smaller size and lower data rate.

The QuickTime plug-in can play many kinds of QuickTime movies. It currently supports all QuickTime track types, including text tracks, MIDI tracks, etc. Using these kinds of movies, you can add compelling features to your pages without significantly affecting the time they take to download. Some examples:

  • Background music - import a standard MIDI file into QuickTime using Movie Player and save it as a QuickTime movie (make sure you select the "Make movie self contained" and "Playable on non-Apple computers" options) . The resulting file will be very small and can be used with the looping and autoplay settings to act as background music for your page.
  • Animation - You can use any of the numerous QuickTime movie editing applications, or use Movie Player for simple editing. Many animation tools such as Cinemation 1.1 allow you to you to create animations and save them as QuickTime movies.
  • QuickTime VR - QuickTime VR Objects and Panaromas can be relatively small and highly compelling.

If you really want to put a large movie up on your site for download, it's best not to embed the movie directly on the page. Rather, save a frame of the movie as a PICT using Movie Player, convert it to GIF and use that image as a map to the actual movie. Or make a postage size short clip of the movie with a "download full size" option.

Finally, try not to put too many movies on a single page. The download times add up and this can keep users with modems waiting.

There is a slight inconsistency with traditional HTML syntax and the EMBED tag.

The syntax is EMBED SRC="movie.mov" WIDTH=xxx HEIGHT=yyy

Do not put quotes around the values for xxx and yyy, even though according to strict HTML syntax you should be able to do so.

General QuickTime support for both Mac and Windows is available at http://www.info.apple.com where you can find both discussion groups and FAQs to answer whatever questions you might have.

If you use QuickTime in your web pages, put a link on your site to a location where visitors can download the necessary software. http://www.apple.com/quicktime/download/

QuickTime (MOV)

QuickTime Adds Motion, Sound

QuickTime’s Help balloons tell of its major functions. (Balloon Help is a built-in function of the Mac OS System software.) Normally, a balloon pops up when the pointer passes over any of the controls or other important areas on the screen.

At this writing, Apple distributes Macintosh and Windows versions of QuickTime via the Internet and other online sources and, in the case of the Mac, in system software releases. The Mac version of the QuickTime system software extension is, as you might have guessed, slightly better than its Windows sibling in subtle ways (AppleScript support, easier full-screen viewing and better drag-and-drop functionality, for example), but otherwise, the two releases are almost identical.

There are, however, a few products that only work with older QuickTime releases. A case in point is the VideoSpigot. This product, which is currently available for about $100 (I bought one for $75) is a remarkably adept video-capture device well-suited for creating digital video content for online- and CD-ROM-based projects.

The catch is, you need to use the right version of QuickTime (in the case of the VideoSpigot, QT v1.6.1 or earlier). Other programs, such as some versions of Adobe Premiere, complain -- or won't run at all -- if they find a version of QuickTime older or newer than expected.

Of course, full-motion video and digitized sound files are huge. If it were not for QuickTime’s built-in compression, a one-second, full-screen movie would occupy up to 20MB of disk space (!). This figure can, of course, vary depending on the size of the video window, the frame rate, and the compression options you choose. In any event, you are unlikely to produce video that looks anything like TV quality at rates of less than about 500K per second -- that's still about ten times the data rate achievable with a standard 56K modem. Clearly, digital video is a technology that benefits greatly from the burgeoning popularity of broadband internet (cable, ADSL, etc.) as a delivery vehicle for the immense amounts of data full-motion digital video requires.

Speaking of full-motion video, don’t get your hopes up too high. Even users of the most powerful computers and the fastest internet connections may be disappointed to see that, due to network congestion or high server loads they can do nothing about, their machine may, at certain times, be incapable of playing full-motion video and sound of acceptable quality.

To address this issue, and also provide users of 56K modems access to streaming content, most online video providers make content available in two or more sizes -- or, perhaps, even in different formats, such as RealPlayer and Windows Media.

Usually, catering to a low-bandwidth audience means preparing and delivering smaller, blockier looking images (often, about the size of a postage stamp) with reduced audio quality and a lower frame-rate -- say, 10 or 15 frames a second.

Fortunately, the process of encoding files for different bandwidth requirements is usually quite simple—you simply select an option from a list (56K | 100K | 250K etc.) when encoding the file.

Customized Players

On the client side, it is possible to customize the playback experience. Some players, however, are more customizable than others. On the standard Windows Media Player, for example, the controls usually resemble a VCR or cassette deck’s PLAY, STOP, FAST FORWARD and REWIND buttons. A VOLUME slider is equally intuitive.

In Apple's QuickTime Player, developers can completely customize the player's "skin" and deliver it dynamically along with the content. This is not currently possible with Microsoft's player. You can, however, embed Microsoft or Real content into a web page with customized playback controls, achieving roughly the same result.

One feature of Apple's QuickTime that is not detailed by Balloon Help appears when you click in the FAST FORWARD/REWIND area while holding down the CONTROL key. A previously hidden slider is revealed, which allows you to set the speed and direction of playback—a great way to hear what things sound like backwards.

Recent versions of QuickTime (specifically, version 4.1 or newer) allow any QuickTime-savvy program (such as SimpleText) to read Flash files, in addition to longtime support for Photoshop, JPEG, GIF, MacPaint, and SGI files (after converting them to PICTs).

QT2.5 or later adds a few neat tricks for MIDI files. A Karaoke file will play MIDI and display the words on-screen, and external MIDI playback equipment is now supported via a new control panel "mixer." The text support is particularly interesting. With MoviePlayer, try opening a text file, assigning a width of 600 pixels or so (for some reason, the default seems too narrow to me), check "anti-aliase text" and uncheck "scale with window."

Windows Media

ActiveMovie > Windows Media Player > ASF

On July 16, 1996, Microsoft released its first official version of ActiveMovie, its multimedia plug-in for Windows 95. Since then, it's come a long way. It has changed names -- ActiveMovie became "Windows Media" around the time of Windows 98's release -- and is now arguably the richest of the "big three" media players. Windows Media Player 8.0 supports a number of different types of medias, including MPEG-1, MPEG-2, MPEG-4, MP2, MP3, ASF video and audio, MIDI, various Video for Windows codecs and more. It also provides built-in CD ripping and burning features, access to Internet-based databases of artist information, Internet radio channels -- even a built-in web browser. For most web users and authors, its MPEG features are its most valuable asset, as there are relatively few other freely available full-featured, high-performance MPEG players.

Because all of the MPEG variants are very compact file formats, and players are freely available for virtually all platforms, MPEG-1 or, depending on the quality and features you need, MPEG-2 or MPEG-4 are all good choices for the distribution of video and/or audio clips. Be considerate of dial-up users, though. At 1 or 2K per second, it takes a long time to view even a few seconds worth of MPEG-1 video, and full-screen, full motion video is out of the question for all but the lucky few with bandwidth to spare. A minute of full-motion MPEG 2 video requires 10 megabytes or so of data. This translates to a per-second quota that is not out of the question for CD-ROM drives, but out of reach for those with less than 300Kps connections. In other words, full-motion video requires about ten times the throughput of today's fastest modems. See the sections on streaming and vector graphics for some alternatives.

It is worth noting that, under some circumstances, you will not want to enable all functions of ActiveMovie. For example, if your video card already supports high-performance accelerated MPEG playback, you can set ActiveMovie to handle other media types only. This is accomplished using the ActiveMovie Control, found in Programs: Accessories:Multimedia

ActiveMovie allows full-screen MPEG playback (with audio!) at 20-25 fps on a P90 with a decent graphics card. Faster computers will perform even better. According to Microsoft, ActiveMovie Streaming Format (ASF) allows multiple data objects (for example, audio objects, video objects, still images, events, URLs, HTML pages, and programs) to be combined and stored into a single synchronized multimedia stream. It provides an encapsulation that allows existing popular media types and formats such as MPEG, AVI, .WAV and Apple QuickTime to be synchronized and stored efficiently on a variety of servers. Three products are freely available for download: ActiveMovie Player: plays ActiveMovie stream format files, files that stream sound, pictures, and uniform resource locators (URLs) over the Internet in real time. Note: this version for Windows 95 only. [1 MB]

The ActiveMovie Stream Editor

An easy-to-use graphical authoring tool for creating .asf files; these files specifically tailored for low bit rate networks, such as the Internet. [1.5 MB]. The ActiveMovie Stream Add-On Includes samples that allow you to incorporate ActiveMovie Streaming Format (ASF) playback capabilities in your applications. Note: this version for Windows 95 only. [708 KB]

Other Video plug-ins

Streaming Video for Windows 95: ClearFusion, a streaming AVI player (with sound!) from Iterated Systems (http://www.iterated.com). It lets users see AVI files while they download, not afterwards. ClearFusion is freeware.

ClearFusion (previously known as CoolFusion) is currently available as a Netscape plug-in for Windows 95. The company says it expects to have an ActiveX control available for Internet Explorer 3.0 as well.

Animated JPEG!

Another way of adding animation to your page is using Javascript.

By exploiting the built-in JavaScript functionality of Netscape Navigator 2.0 and newer and Internet Explorer 3.0, we can animate true-color JPEG images. Here's how.

var x=9;

var loc

function locate() {

for (var x = 0; window.location.href.substring(a1,a2) != "/" ;x++){

var a1 = window.location.href.length-x

var a2 = window.location.href.length-(x +1)

if (window.location.href.substring(a1,a2) == "/"){

loc = window.location.href.substring(0,a1);

}

}

sec();

}

function sec() {

x-=1;

timerID=setTimeout('display()',2000);

if (x == -1) {

window.location = loc + "ani-jpeg.htm";

}

}

function display(){

if (x == 9) {

document.images[0].src=loc + 'pic0.jpg'}

if (x == 8) {

document.images[0].src=loc + 'pic1.jpg'}

if (x == 7) {

document.images[0].src=loc + 'pic2.jpg'}

if (x == 6) {

document.images[0].src=loc + 'pic3.jpg'}

if (x == 5) {

document.images[0].src=loc + 'pic4.jpg'}

if (x == 4) {

document.images[0].src=loc + 'pic5.jpg'}

if (x == 3) {

document.images[0].src=loc + 'pic6.jpg'}

if (x == 2) {

document.images[0].src=loc + 'pic7.jpg'}

if (x == 1) {

document.images[0].src=loc + 'pic8.jpg'}

if (x == 0) {

document.images[0].src=loc + 'pic9.jpg'}

sec()

}

image

Adding Audio

Noise on the Net

Ever wanted to run your own radio network? Now you can. The Internet is just the thing for DIY (do it yourself) TV or radio auteurs.

What's the best choice as an audio format? It depends. In terms of sheer quality, a 16-bit audio file recorded at 44.1KHz is considered "CD quality," but such files are huge and therefore impractical for web-based delivery.

How huge? A 7-minute, monophonic sample recorded at 22KHz results in a file about 17 megabytes in size. Compressing that file as a RealAudio file resulted in a 404K file. TrueSpeech, another common format created a 431K file. Saving the file with the Voxware codec (listed in the Windows 95 sound recorder Save As... dialog as "Netscape-RT24") resulted in a file only 121K in size that, amazingly, sounded better than either the RealAudio or the TrueSpeech encodings (although, as you may have guessed, not as good as the 17MB original).

What is this Netscape RT24, you may ask? It is not widely known, but recent versions of Netscape install a highly efficient codec (compressor/decompressor). Netscape RT24 audio format is a highly efficient audio format that 121k vs. 17mb for a standard pcm (pulse code modulation) WAV file.

Netscape 3.0 installs Voxware's RT24 audio format is a highly efficient audio format 121k vs 17mb for a standard pcm (pulse code modulation) WAV file.

Now that Netscape has licensed the VoxWare codec, it is safe to say that RT24 is a good choice as a web-based audio format. Not only does it have potential as a streaming audio file format (using the freely available Voxware player from www.voxware.com, files start to play within a couple of seconds of the start of a download), but the format is also used in the TeleVox product for Internet Telephony, and Netscape has announced its intention to incorporate the format as part of its LiveConnect framework.

Famous Formats

  • AIFF, AU, WAV
  • TrueSpeech
  • RealAudio
  • RapidTrack
  • MPEG audio
  • VoxWare (AKA Netscape RT24)
  • etc.

You might end up using several different methods for adding sound to your web pages, depending on the application.

For short digitized audio clips, you can use a WAV or AU file. One of the most compact and widely supported compressor/decompressor “codecs” is Netscape’s RT24 format. It is bundled with all current Netscape browsers, which means that the vast majority of users can hear the files with no additional software or plug-ins required.

For extended clips (say, a half-hour radio show, the three most popular solutions are RealAudio, TrueSpeech and ShockWave.

MPEG Layer 3 (MP3) audio is another file format well-suited to audio on the Web.

To give you an idea of how great the compression is, here's a sample, if you'll pardon the pun. The source file was the 1KHz test tone supplied with Adobe Premiere 4.2.

  • 44KHz 16 bit mono AIFF: 88K
  • 22KHz 16 bit mono AIFF: 48K
  • 22KHz 8 bit mono AIFF: 22K
  • MPEG Layer 3 audio: 211 bytes

RealAudio is currently the most popular, TrueSpeech is the easiest and most inexpensive to use, and ShockWave has the advantage of also supporting animated movie clips. I recommend that you use TrueSpeech and Netscape RT24. Compressors for both are freely available for Windows- and Mac-based systems.

RealAudio, bundled with Microsoft Internet Explorer and freely available as a plug-in for Netscape 2.0 and as a helper app for other browsers running on Windows and Mac-based systems, is the most widely supported "streaming" audio product, but DSP Group's TrueSpeech is arguably a better technology. RealAudio requires a server for streaming playback (i.e., no waiting for the file to download), while TrueSpeech does not. Although Progressive Networks makes the encoder and player software freely available for RealAudio, it charges a hefty fee (several hundred dollars) for the server software.

The main advantage of RealAudio, from a Web authoring standpoint, is that it is supported by both Netscape and Microsoft’s browsers and is probably the best-known audio system on the Net. Another unique characteristic of RealAudio is the potential for real-time (“live”) broadcasts. Most other web audio encoders are asymetric; that is, you have to encode an audio file before making it available for broadcasting.

Ignoring for a moment the fact that RealAudio requires an expensive, dedicated server, let’s look at how to get the best audio quality from it.

Optimizing Audio for the Net

Believe it or not, the fastest way to get good quality audio is to record the output of a telephone or a cheesy microcassette recorder. These readily available tools produce exactly the kind of audio characteristics that create the best sounding Realaudio or TrueSpeech files - limited dynamic range, no bottom-end, reduced sibilants (“S” sounds).

TrueSpeech

With or without fancy processing, some users prefer the fidelity of TrueSpeech to that of RealAudio 1.0, although RealAudio 2.0, released in December, levels the field somewhat. (Both companies have an icon that they encourage you to use if you post audio files in their format.)

TrueSpeech support is built into Microsoft Internet Explorer 3.0 and is available as a plug-in for Netscape Navigator. While I’m generally against plug-ins when a built-in function will perform a similar function, there is no getting around the fact that TrueSpeech’s quilty is so much better than that of RealAudio, it is worth it to inconvenience Netscape users a little.

In fact, it’s not much of an inconvenience. As of version 3.20b, the setup program will automatically configure your Netscape 2.0+ or 3.0+ browser to handle TrueSpeech (.TSP) files.

Moreover, plug-in versions since 3.20b support real-time (streaming) audio playback. The TrueSpeech Player plug-in was originally part of version 3.10b of the TrueSpeech Player for Windows 3.x, but that version was not real-time, as is version 3.20b. The plug-in has an optional autostart command and a loop option for repeat playback.

Why Is TrueSpeech the Easiest and Fastest to Set Up?

  • It's Free. No Cost to Set Up
  • No Server Software Required
  • Automatically Configures Netscape 2.0 (or later)
  • Easy for Developers. Batch Conversion Utility Available

To create content for the TrueSpeech Plug-in, see www.dspg.com/plugin.htm

To create content for the TrueSpeech Player, follow the steps below.

STEP 1: CREATE YOUR AUDIO FILES. Create PCM Encoded Audio .WAV Files At 8KHz Sampling Rate With 16-Bits Resolution.

The TrueSpeech compression algorithm has been optimized for 8KHz sampling frequency with 16-bits of resolution. For highest quality, it is essential that you record with these settings. Any multimedia board which is a SoundBlaster™ 16 compatible will support this format. If your audio equipment does not support this format, conversion utilities exist such as Cool Edit for converting to the recommended format.

STEP 2: CONVERT YOUR FILES To TrueSpeech Encoded .WAV Files.

To convert PCM encoded .WAV files to TrueSpeech encoded .WAV files, we recommend you use the Sound System of Windows 95 or NT since our product is located there. (In Windows 95, the Sound Recorder is located at START>PROGRAMS>ACCESSORIES>MULTIMEDIA>SOUND RECORDER.) While within the Sound Recorder, simply open the PCM encoded .WAV file created in Step 1 above, select the TrueSpeech format, and then use the SAVE AS command to create a new file name .WAV extension, then CHANGE the file type to DSP Group TrueSpeech, and then SAVE. The new .WAV file has now been encoded in TrueSpeech audio format which is compressed by a factor of 15 from the original .WAV file. (For those who are using Windows 3.11, a PCM to TrueSpeech Conversion utility may be downloaded from here. This conversion utility will accept PCM encoded .WAV files only if sampled at 8KHz/16-bit PCM format.)

TIP: If you are using Microsoft's IE 3.0, you can link the TrueSpeech *.wav file directly into your page and it will play streaming audio with its built-in capabilities. IE 3.0 browsers can also begin streaming audio in the background when a page is loaded. Simply insert the sample tag below at the top of your webpage:

STEP 3: CREATE A SIMPLE TEXT FILE (*.TSP) which is associated with the *.WAV File Created Above.

Use a standard text editor such as Notepad and give this file the *.TSP extension ( * is the chosen name of your file.) This is done so that the browser will know to launch the TrueSpeech Player when a TrueSpeech encoded .WAV file is about to be transmitted. The *.TSP file associated with a TrueSpeech encoded .WAV file should contain the (case sensitive) HTML line:

TSIP>>URL/*.wav

The URL above should NOT include the "HTTP://" characters. For example, www.dspg.com would be appropriate and HTTP://www.dspg.com would not be. For example, let's suppose you create a PCM encoded .WAV file and convert it to a TrueSpeech encoded .WAV file. Give this file the name test.wav.

Next, suppose that this file is located at your server in the directory www.home.com/audio. It is now necessary to create a one line .tsp text file. This file should contain the following line:

TSIP>>www.home.com/audio/test.wav

You can simply name this file test.tsp

STEP 4: LINK THE *.TSP FILE INTO YOUR PAGE.

This .tsp text file should now be linked within your webpage to any image or text you specify. When a visitor clicks on the test.tsp link, the TrueSpeech Player will start. Upon spawning the player, the TrueSpeech Player reads the location of the TrueSpeech test.wav file from the test.tsp file. The Player then accesses and plays this test.wav file as it is being downloaded so that you can listen in real time.

STEP 5: CONFIGURE YOUR SERVER to Accept the .TSP File Extension.

Because the "tsp" file extension may not be recognized by HTTP servers running on UNIX or Windows, it should be mapped in configuration of the server to MIME type "application/dsptype." In order to do this on UNIX servers, only one line should be introduced in the HTTP server configuration file MIME.TYPE as follows:

application/dsptype tsp

On the CERN HTTP Server, the configuration line should read:

AddType.tsp application/dsptype binary 1.0

If your homepage is located on a remote HTTP server, please contact your service provider and have them make the configuration additions listed above.

By following the five steps above, you may begin adding TrueSpeech content to your pages immediately without fee.

Streaming audio with TrueSpeech

As mentioned above, TrueSpeech version 3.20b contains BOTH the TrueSpeech Player and the TrueSpeech Plug-in. The Plug-in allows you to have embedded TrueSpeech Player control functions in your webpage for style, ease, and simplicity. The Start, Stop, and Rewind buttons are small and unobtrusive. The Plug-in is also part of the TrueSpeech Player for Windows 3.xx, though it is not real time. The Plug-in has an optional autostart command, so sound can begin playing automatically when you load this page. There is also a loop option for repeat playback.

Here are the basic steps for making TrueSpeech-encoded files available so they will stream from your server.

For additional details, see http://www.dspg.com/plugin.htm

How to set up your homepage to support a TrueSpeech Plug-in.

You may have already learned how to create TrueSpeech Player content for your webpages. The steps are almost identical for creating a TrueSpeech Plug-in. If you have already encoded your *.wav files to TrueSpeech either by using Sound Recorder in Windows 95/NT or by using the Developer Tools availble at http://www.dspg.com/plugin.htm, then there are only 3 more steps to follow:

1. Create a simple text (*.TSI) file which contains the URL for the TrueSpeech or PCM formatted *.wav file and save this file with the .tsi extension. Make sure that the URL does not include "http://" and that it has the .tsi extension. Here is an example from the company’s own TrueSpeech audio files:

TSIP>>www.dspg.com/samples/85/a5.wav

You may want to create a test.tsi file which contains the line above in order to test your Plug-in first. If you have already created a *.TSP file to embed your TrueSpeech files, the process is the same--just name the text file *.TSI instead of *.TSP. (NOTE: In this version, you can have only one Plug-in per web page; however, you can have an unlimited number of .TSP links on the same page.)

2. Edit your *.html or *.htm file to add the Plug-in hypertext wherever you want the Plug-in to go on your page. (If you want the audio to begin playing upon loading of the web page, then type autostart=TRUE and if you want continuous playback, type loop=TRUE). The Plug-in hypertext tag is this:

3. Edit your HTTP or Netscape Server's MIME.TYPE file to include the line

audio/tsplayer tsi

You may need to contact your system administrator to have them add it for you.

That's it! No server software! No licensing fees!

Digitizing audio

QuickTime supports Audio CD Import.

It has been a few years since Apple added it, but many people still aren’t aware that QuickTime and certain types of CD-ROMs can be used to digitize sound directly from an audio CD disc. In fact, Apple added this feature back when QuickTime 1.6 was released. It requires an Apple CD-ROM drive such as the CD 300 and CD 300i (it also works with certain Sony and Toshiba drives). With the right CD-ROM drive and QuickTime 1.6 or newer, Mac users can digitize sound directly from an audio CD disc and save it as a QuickTime movie soundtrack. This magic is performed courtesy of Apple’s QuickTime software, which the company distributes via the Internet and various information services.

This feature works with any application that can open QuickTime movies (Adobe Premiere, etc.). Here’s how it works:

When you try to open an audio track on a CD 300 (etc.), the Open button will change to a Convert... button. When you click this button, the Audio CD Import Options dialog will pop up. With this dialog, you can configure the sound settings of the movie. The rate, size, and channel can be specified for the movie. In addition, you can select the portion of the track which should become a movie. You can select the start time and end time for the track. You can play your selection to be sure you have the selection you want. Click Convert to save the file as a movie soundtrack.

Only a few drives have the hardware necessary to support this feature. Engineers from FWB Inc. say the Toshiba TXM-3401 and Sony CDU-561, on which the AppleCD 300 is based, are the only two they know of. Nevertheless, the company plans to add support for digitizing CD audio to the latest version of its CD-ROM Toolkit software.

As well, QuickTime 1.6 or newer can preview Audio CD tracks from a Standard File Preview dialog. Like QuickTime 1.5, the new 1.6 release can open PICS and AIFF files and includes system-wide support for Kodak Photo CD.

How to add audio to your Web pages

Auto-playing Audio

Here's a cool thing. It's a line of HTML code that plays a .au file when the page is loading up.

The line is:

BGSound and MSIE

Internet Explorer uses the BGSOUND tag to specify audio like this.

The LOOP=infinite attribute makes the song repeat over and over. Generally, looping short pieces is a bad plan, as obviously repeating patterns, whether they are songs or BLINK tags, tend to drive people crazy or at least get on their nerves eventually.

MIDI Playback

Here’s a code snippet that plays a MIDI file in both Navigator and Internet Explorer, and hides the player console in Navigator (note that the console’s size cannot be set to HEIGHT=0).

Post new comment

More like this . . .

Part 1: The Top-down Theory

Even those who know practically nothing about computers have heard about how the Internet is changing the face of publishing; how virtually anyone...

Part 2 - Page Layout and Design

While the process of designing a page layout is a unique creative act and may approached in a myriad of ways, it is safe to say that having a plan in...

Part 3 - Assembling a Web Authoring Toolkit

If we look at this document as a continuum, with the idea of building The Perfect Page in part 1 and the (hopefully) whiz-bang result being uploaded...

Part 4 - More Tools for Building Web Pages

toc_collapse=0; Table of contents  Page creation Adobe PageMill FrontPage Enhancing your Pages Extensions to HTML ADDITIONS BY NETSCAPE...

Part 6 - 3D Graphics

toc_collapse=0; Table of contents  Building Home Spaces with Virtual Home Space Builder Compressing your VRML worlds The Problem: What...

Part 7 - Other Graphics Formats

toc_collapse=0; Table of contents  Vector Graphics Incorporating Acrobat PDF files into Web sites Additional Information Vector Graphics...

Part 8 - Programming the Web

Part 8: Programming the Web toc_collapse=0; Table of contents  JavaScript, Java, CGI-bin and ActiveX JavaScript Back Button Java Egor...