Streaming Audio with Flash
For streaming audio from your website, I recommend the free flash-based mp3 players from Premium Beat. For the record, there are a number of similar flash-based audio players available - all with varying feature sets and levels of setup difficulty. The Premium Beat players seem to have the best balance of function, ease of use, and aesthetic appeal.
Single Track Player:
-
Download the player of your choice (mini or "single track"), saving the zip file to your desktop (or wherever you like to put your downloads).
-
Unzip or extract the downloaded file (double click the file on a Mac). The result should be a folder called "playerMiniPackage" or "playerSinglePackage". Open that folder.
-
You don't need every file from the .zip archive in your site (though it is harmless to copy all of them over). You will need: the .swf file ("playerMini.swf or playerMini.swf"), the .js file swfobject.js, and a .mp3 file of your choice, encoded at 44.1Khz. The .html file in the .zip archive is need for reference only; we will be copying code from that file into the file for the page in which we wish to insert our player.
-
Next - What you need to pay attention to is the relative paths between files. By default, they are made to work with the .js, .swf, .mp3. and .html (or in our case .php) page all sitting in the same directory. Keeping them all in the same directory in your site is fine, however, for the sake of keeping our website organized, you may wish to move some files around - especially the mp3 files. This, in turn, will require that we check paths to these files in our html pages (details below). An incorrect path means the file will not play.
My preferece for file organization:
Because Dreamweaver automatically creates a folder called "Scripts" when it inserts flash video (see flash video tutorial), I like to use this folder or other scripts in my site. In this case, I copy the swfobject.js file to that directory. Next, I like to keep all of my flash files in a single directory. The directory name choice is yours; I've called it "flash" and copied the .swf file there (there will be other .swf files). Now, for the mp3 file itself: I like to keep all mp3 files in a separate directory - could be "mp3" or "music" or "audio" or similar. I've chosen "audio" in this case. Note that mp3's could be organized into subfolders withing this directory. Finally, the html that calls all of these files is in one of the pages in the root directory. Here is my file arrangement, simplified to include only the files needed for one instance of the miniPlayer or singlePlayer (left and right):
Once you have your files arranged correctly, the next step is to edit your html. There will be a file called sampleEmbedCode.html - open the file in Dreamweaver and copy the code between the comments that say Begin and End Copy/Paste. Next, adjust your paths and filenames as needed. The following sample code should help with that:
Finally, we get the resulting embedded flash player (press play to hear the result)
Multiple Track Player:
We follow the same steps as above, except this time, we download one of the multiple tracks flash mp3 players from the same page.
Aside from having more mp3 files, the main difference here is the introduction of the .xml file, which lists each track, adding the advantage of displaying the track title in the player. We'll be introducing some php to write out the xml data on the fly by reading the tracks in your mp3 directory. This saves the trouble of having to update it manually. Just name the mp3, and upload it to the directory of your choice! NOTE that this means we are replacing the .xml file with a .php file!
My preferece for file organization:
Very similar to the single track players, but with more files introduced. Note the list of mp3's (13 in this case), as well as the .php file in the same directory as the mp3's.
UPDATE: We are replacing the .xml file with a .php file! So if you are wondering what to do with the .xml file that came with your downloaded flash audio muliple file player, we are replacing it with the .php file (linked below).
Multiple Player File Arrangement
Multiple Player with menu file Arrangement (identical to above except for .swf and .php files)
As above, once you have your files arranged correctly, the next step is to edit your html. Open the sampleEmbedCode.html file that corresponds to your player choice and copy the code between the Copy/Paste comments. Next, adjust your paths and filenames as needed. The following sample code should help with that:
Some PHP to automate the creation of the song list file:
If we construct the xml data by using php to read the file names in the mp3 directory, then we dont' have to edit it by hand. Simply adding or removing (or renaming) files will result in an automatically changed data file. To achieve this affect, put the following file in the same directory as the mp3 files it will be listing. This file must be named playlist.php
Finally, we get the resulting embedded flash player (press play to hear the result)
Adjusting the Height and Width of your Multiple Player with menu:
Edit the following line in multipleMenu.php:
var so = new SWFObject("flash/playerMultipleList.swf", "mymovie", "295", "200", "7", "#000000");
Simply change the "295" to change the width, and the "200" to change the height of the player.