by Steve Cunningham
Last month we took a look at how to raise your website’s Google ranking by using a combination of social networks and SEO, or Search Engine Optimization. This assumes that you have a website or are in the process of building one. If you fall into either of those categories, then one of the things you must have is an embedded audio player that looks good and makes it easy for potential clients to hear your demos or works in progress on your website. This month we’re going to take a look at several embedded audio players, for use in HTML websites as well as those based on blogging software like WordPress.
One of the first questions that you have to ask yourself is whether or not you want your files to be downloadable by your clients. In the case of demo reels this may not be a bad idea, but if what you’re doing is loading audio files that represent works in progress for client approval, you may explicitly want them to be able to play it, but not be able to download it. The beauty of these Flash players is that most do not allow files to be downloaded, unless you explicitly set them to allow it.
But if you do want your file to be downloadable, the simplest thing to do is to simply add a link on the page near the player. The link can be the name of the file in text or a graphic button, and it should be linked to the absolute URL of the file, in the form http://www.mysite.com/audio/downloadme.mp3.
Assuming that you or your webmaster have not implemented some form of kryptonian password protection to your website files, any user should be able to right click that link and download the associated MP3 files directly.
GOOGLE AND YAHOO PLAYERS
The first players we’ll look at come from the two big guns of web search -- Google and Yahoo. You’ll find an article here http://www.labnol.org/internet/design/html-embed-mp3-songs-podcasts-music-in-blogs-websites/2232/ that lays it all out, including the code. The Google player is part of Google Reader, the company’s RSS feed reader, but it also works on non-Google webpages (like yours!). The player itself is nothing to write home about in terms of appearance (see figure 1). But it is quite functional, displaying the file name and elapsed time as it plays your audio. You still have to supply a URL to the specific audio file you want to play, and it cannot play more than one title at a time.
Yahoo’s more sophisticated media player can be found here: http://developer.yahoo.com/mediaplayer/ (see figure 2) [yahooplayer.tif]. It has the benefit of being able to handle multiple audio files, with a snazzy interface that pops out from the lower left corner of the web browser. The HTML code to implement it is available at the Yahoo site referenced above.
If setting up even the free players listed above from Google and Yahoo seems to be too much trouble, commercial products are available that essentially allow you to buy your way out (see figure 3). A good example of those would be the AudioRazor product, available at http://www.yoursitecantalk.com/ for $34.95, as well as from other outlets. The main difference between this product and doing it yourself is that AudioRazor puts a friendly control panel on the process of specifying your audio files and their location and generating the code that you will paste into your webpage. I would encourage you to check it out, but I don’t believe that it does much that I cannot do myself, and that brings us to the do-it-yourself option.
ROLL YOUR OWN
If you’re anything like me, you like to get in and roll your own. If you don’t, you can certainly take this article to your webmaster and have him or her get elbow deep in tags and classes. But this is for those that do like it.
One of the more popular free players started life as a plug-in for WordPress blogging software, from a developer whose home is 1pixelout.net (the exact address is www.1pixelout.net/code/audio-player-wordpress-plugin/). This is also where you can download the plug-in as a .zip file. Take a look at figure 4. I’m quite sure you’ll recognize the player. It starts as a small icon, but when you click the play button, it extends to the right and begins playing. It has the added benefit of displaying the audio file name and counting down the elapsed time.
Because it’s actually a plug-in for WordPress, some minor surgery needs to be done in order to get it to work in a standard HTML file.
Next comes the slightly messy part. The HTML code you need to add to your page can be copied directly from the macloo.com site listed just above. Remember, all of this code has been put into the public domain by the author under a Creative Commons license. Here’s the HTML:
<object type=”application/x-shockwave-flash” data=”http://www.fakedomain.com/myname/audio/player.swf” id=”audioplayer1” height=”24” width=”290”> <param name=”movie” value=”http://www.fakedomain.com/myname/audio/player.swf”>
<param name=”FlashVars” value=”playerID=1&soundFile=http://www.fakedomain.com/myname/audio/music.mp3”>
<param name=”quality” value= ”high”>
<param name=”menu” value= ”false”>
<param name=”wmode” value= ”transparent”> </object>
All you have to do to the above code is paste it into your page and replace all of the instances of the “fake domain.com” URL information with your own domain and folder structure. It’s not a difficult thing to do.
To place multiple players on the same page, each playing a different audio file, you simply change the number of the audio player in the code above from “1” to “2”, and make sure to change the sound file appropriately for each player. You can copy that changed code from the same webpage at the macloo.com site. If you scroll to the bottom of that page, you’ll find a link to change the default colors of the player as well.
Another free player, this one with more bells and whistles, can be found at http://musicplayer.sourceforge.net/ (see Figure 5) [XSPF Web Music Player.tif]. The XSPF player is available as open-source software, which means that not only can anyone use it (but not resell it), but the source code is made available for programmers who wish to modify it. There’s an organization built around the XSPF player (pronounced “spiff”), and a quick start guide for how to implement it can be found at http://www.xspf.org/quickstart/.
The XSPF player is slightly more difficult to implement, because it requires that you build a specialized playlist from which the player gets the information about each file it will play, including the file name, total running time and on. But the open source community has built an online page that will generate playlists for you interactively, and that can be found at http://emff.sourceforge.net/playlistgenerator/.
The primary benefit of the XSPF player, besides its cool looks, is that if you use the extended version then your client can click on any one of the audio files listed and it will play. One player can then handle all of the demos or works in progress on a single webpage, and potential clients have random access to all of the sound files. Mind you, like the player above, sound files are not downloadable from the XSPF player.
A NEW SKILL SET
Getting in and tweaking your own website code has several advantages -- first, it will force you to learn some basic HTML skills, and given the current state of radio it might be a good idea to develop a new skill set along the way. If nothing else, it may make you more valuable to the extent that you can actually do work on your station’s website. Second, you not only get exactly what you want, but you get some sense of satisfaction at having done it yourself. Learning basic HTML is far from rocket science, and there are a wealth of resources on the Web that can help you.
Just visit http://www.acmevoiceworx.com/Audio/RAP to check out these and several others.
And by the way, I’m available for consults...
SIDEBAR: File Prep and Watermarking
In a recent conversation I had with voice actor Harlan Hogan, I was reminded that there are a few important steps necessary to prepare audio files for the Web, which are a little different from prepping for broadcast. It’s important to roll off frequencies below 100 Hz and above 10 kHz and then to normalize, before uploading files to a website for playback in an embedded player. For starters, there’s little to no information below or above those frequencies in the human voice, and there can be room rumble. Keeping in mind that low frequencies require the most energy, by eliminating them you’ll be able to increase the volume level of the entire file so you end up with a nice loud, present demo track. By rolling off the high frequencies, you eliminate any noise that may be present in the original recording and will certainly be made more audible during the mp3 encoding process.
There have been a large number of conversations amongst VO talent, mostly on messaging boards, about the issue of watermarking. Their understandable concern is that an unscrupulous client may ask for a sample recording of a script, and end up airing that very recording without paying the talent for the use of it. Several different methods of making a demo file listenable but unusable for broadcast have been suggested, including inserting annoying tones every five seconds, adding noise to the recording, and even more onerous methods.
The most effective method of preventing that unscrupulous client from using your work may be to change some of the key names and numbers. If talent is asked to submit a sample read of a script, the simple act of changing the client’s phone number, address, or even the company name will render that file useless without destroying the audio quality.