You know you will be incorporating audio into your Web site, but with what method? Will you be putting in an embedded audio file or will you use a streaming method of distribution and will you require an audio server?
Will your audience have what they need to play your audio? Will their platforms support it? Will they need to download a special plug-in before they can hear it?
Think about these questions as you go through this section.
Audio-compression comes in many formats and each have strengths and weaknessses. It is good to know a little bit about them so you can make smart encoding decisions. Be careful using a program's default compression settings may cause compatibility issues for your intended audience. As a rule of thumb, pick a format based on your specific needs and choose the compression settings that sound the best to your own ear. Read on to understand what your options are.
There are many lossy audio encoders trying to compete with MP3 but all of them work for the same goal - to find an audio file's perceptual transparency which is the point where higher sound quality becomes inaudible and therefore functionally useless.
Compressed audio formats have thea bility to store text data called metadata. File names can accomplish the same thing but metadata can be read and applied to the files names and directory with one click. ID3 is the way text blocks are attached to an audio file in the form of a tag. Choose Edit Info from the menu in your MP3 player program and fill in the data fields there. The first version of MP3 tags is called ID3v1 and does not give much room to put data in the fields. ID3v2 provides more room but is slower to write since it is at the beginning of the audio file. I recommend filling in bot ID3v1 and ID3v2 since you don't know which tag your listener's playback program will read. If you don't, your audio may show up as Unknown Artist! Always fill in the comment field since its searchable and easy to access by all major programs. This is a good place to put your contact info. ID3v2 also offers a place to put your Web address. Watch this Screenshot Video Tutorial on how to add ID3 tags.
ID3's only apply to MP3 files. Always use the tag format native to the file type you use.
AAC is better than MP3 and is encouraged by MPEG. It is the audio layer of the MPEG-4 standard and is contained inside an MP4 container. It is seen as .m4a or .mp4. Apple uses AAC for iPods, iTunes and iTunes Music Store. An .m4p is one which is copy protected and and locked. AAC has a good file size for the excellent sound quality it provides but does not have as much widespread compatability yet.
WMA, Window Media Audio, is a Microsoft format. They are no better than MP3s and don't have much hardware support. If you have WMA files and want to play them on a Mac, you need to install a 3rd pary QuickTime plug-in since Microsoft discontinued the Windows Media Player for Mac!
Now Ogg Vorbis is a different story! It is an open-source alternative to MP3 and WMA. Vorbis is the audio-componant codec and Ogg is the container. It works great at all it's bit rates, has a flexible metadata system, and is often used for embedded apps like video games since there are no royalty fees to us it. Wikikpedia uses it for everything since it is royalty free and it is goof for anyone maitaining a very large library of compressed audio.
MP3s because of the open-source project LAME encoder. It can vary bit rate through the audio file using more or less bits when needed. The default setting of LAME use CBR or Constant Bit Rate but by using "--abr" command ("--abr 192 for ex.) you can enable the ABR or Average Bit Rate mentioned above. This option does not increase the size of the file! VBR or Variable Bit Rate can handle extreme changes throughout the audio file and is superior to CBR and ABR. It does not increase file size either. Use "--vbr 192" for ex. to enable. VBR is the best to use in most situations. That is why Ogg Vorbis is so good... it uses VBR encoding by default.
Lame's newest releases are now using numbers instead of names. The lower the number the higher the audio quality. You will be seeing APS ("--v2) and APE ("--v0") now which are both essentially the same. They look at the file and use filters, noise shaping and other ways to trim the file size the least destructive way. Both will work well.
Alright, now that I have totally confused you, what DO you use for encoding? Many apps offer the ability to export your audio in a compressed format like MP3, Ogg Vorbis, and the like but they don't always have the more advanced encoding options. You can try some of the following to try out the formats mentioned above.
Sharing files with others usually requires sticking with MP3 for compatibility but why you should use LAME encoding with that and one with VBR presets for the best results. The most important thing to remember is keep your original WAV or AIFF file in tact. If you want to change to another format, you don't want to go from one lossy audio format to another since that increases the loss of quality.
References:
Parts of this article are excerpted from “All is Not Lost,” published in the October 2006 issue of Electronic Musician magazine, and are reprinted with permission of the publisher.
You can also just use the code below to embed audio into your website html. It will show up as a little player with a start and stop control. To see a sample, go to my past band, Cross Creek's Stuff page. The site is under construction so the other site's pages are dead links! The players are near the bottome of the site. Click Here.
To use the code below, just put the name of your audio file where you see waltz.mp3. You will need to put this code in the same folder as the audio file on your server, blog, wiki, drupal, moodle or what ever service you use to publish material to the Net. There is usually a place to add code to a site for those of you using a blog or similar service to publish audio.
<embed src="waltz.mp3"width="200"height="20"autostart="false">
Hipcast is an audio and video publishing service. It costs around $5/month and it makes it really easy to upload your media and have it publish automatically to your blog. The player is generated for you as well.
AudioBlogger is another version of the same type of service. You can find many more similar to these products.
FFMpegX
How to Embed a Flash Player in Your Website
Here is a solution that lets you post MP3 files and play them in a browser using an embedded interface. This is a Flash player. You will be able to listen to audio without leaving your page. You can embed the player on your page by adding the following code to your website:
<!-- Begin Copy/Paste below but do not include this line-->
<script type="text/javascript" src="swfobject.js"></script>
<div id="flashPlayer">
This text will be replaced by the flash music player.
</div>
<script type="text/javascript">
var so = new SWFObject("playerSingle.swf", "mymovie", "192", "67", "7", "#FFFFFF");
so.addVariable("autoPlay", "no");
so.addVariable("soundPath", "song.mp3");
so.write("flashPlayer");
</script>
<!-- End Copy/Paste - do not include this in your code>--
CLICK HERE to download the zip folder containing the code above, .swf file, .js file, and a sample mp3.
CLICK HERE to see my example of how it works!
References: Flash player compliments of premiumbeat.com
Using a Flash Code Generator is sometimes a nice way to learn to use Flash players for webpages, webloggs and other html applications. This is a page where you can just copy and paste your mp3's URL into the generator, click, cut and past the code that is generated into your site.
The following is an excerpt from the Dreamweaver Help Files. Adapt this information to your own html WYSIWYG application.
Adding sound to a page
You can add sound to a web page. There are several different types of sound files and formats, including .wav, .midi, and .mp3. Some factors to consider before deciding on a format and method for adding sound are its purpose, your audience, file size, sound quality, and differences in browsers.
NOTE
Sound files are handled very differently and inconsistently by different browsers. You may want to add a sound file to a Flash SWF file and then embed the SWF file to improve consistency. See Embed a Flash Player section.
Linking to an audio file is a simple and effective way to add sound to a web page. This method of incorporating sound files lets visitors choose whether they want to listen to the file, and makes the file available to the widest audience.
To create a link to an audio file:
Select the text or image you want to use as the link to the audio file.
In the Property inspector, click the folder icon to browse for the audio file, or type the file's path and name in the Link text box.
Embedding a sound file
Embedding audio incorporates the sound directly into the page, but the sound only plays if visitors to your site have the appropriate plug-in for the chosen sound file. Embed files if you want to use the sound as background music, or if you want to control the volume, the way the player looks on the page, or the beginning and ending points of the sound file.
TIP
When incorporating sound files in your web pages, carefully consider their appropriate use in your web site, and how visitors to your site use these media resources. Always provide a control to either enable or disable the playing of the sound, in the event that visitors don't want to listen to the audio content.
To embed an audio file:
In Design view, place the insertion point where you want to embed the file and do one of the following:
In the Common category of the Insert bar, click the Media button and select the plug-in icon.
Select Insert > Media > Plugin.
For more information about the Plugin object, see Inserting Netscape Navigator plug-in content.
In the Property inspector, click the folder icon to browse for the audio file, or type the file's path and name in the Link text box.
Enter the width and height by entering the values in the appropriate text boxes or by resizing the plug-in placeholder in the Document window.
These values determine the size at which the audio controls are displayed in the browser.
Inserting Netscape Navigator plug-in content
You can create content such as a QuickTime movie for a Netscape Navigator plug-in, and then use Dreamweaver to insert that content into an HTML document. Typical plug-ins include RealPlayer and QuickTime, while some content files include MP3s and QuickTime movies.
Inserting plug-in content in your page
Your page can include content that will run in a plug-in in the user's browser.
To insert Netscape Navigator plug-in content:
In the Design view of the Document window, place the insertion point where you want to insert the content, then do one of the following:
In the Common category of the Insert bar, select Media and then click the plug-in icon.
Select Insert > Media > Plugin.
In the dialog box that appears, select a content file for a Netscape Navigator plug-in.
For information on the available properties, see Setting Netscape Navigator plug-in properties.
References: Adobe Dreamweaver