Following my previous explanation on the usage of an embedded Flash player with an external playlist, I will now address the possibility of doing it using only the HTML code to supply the necessary information to be read. I would like to remind that I'm using the Dewplayer and that the following explanation is based on it, but can be applied to any standard Flash music player.
I personally prefer using an external playlist, but it can be very handy to use just the code if the number of Mp3 to be played is small. In order for the player to adequately render the Mp3 files and display the files' information (Track title, author, album, etc.), it is required to make some settings in the Mp3 file itself. It's also possible to input this data in the HTML code, but it can get pretty confusing and it's really not handy to copy-paste the code for different usages, as you have to edit it every time you use different tracks. Ok, so this is a 3 phase process: - Getting the Mp3 files ready (which means editing and uploading them) - Getting the player uploaded - Gathering all the info in the final HTML code Before we start, you should be aware of the following: the Mp3 file name (ending in .Mp3) is different from the file's info name; the file's info will be displayed by the player - this is why sometimes MediaPlayer or other music players display the wrong song names when we're sure the File is the right one! This means that you can name all your songs track1.mp3, track2.mp3, etc., but if you adequately edit the files' info, the player will display the proper information. So, first you have to edit the information for each Mp3 file. Here we go: Step 1: Mouse Right-click on one of the Mp3 files you want to use; after right-clicking it you should see a list of options as Play, Copy, Cut, etc. The last of all the options will be Properties. Click it. Now you have access to all the file's information on a pop-up window.. On top of this window, you have the tabs: General, Security and Summary. Click Summary. Now there the list of available fields of information regarding the file. Step 2: now you have to edit this information. Click on the available fields (Artist, Artist info, Title, etc.) and edit them with the information you want to be displayed when the Mp3 is playing (basically, what the listener can read: Author, song name, etc.) Step 3: After all the editing, click Apply and Ok, at the bottom. Repeat all the steps so far for each Mp3 file: Right-click file > Properties > Summary > edit the info fields > Apply > Ok Ok, so far so good (we hope!). Now lets upload all the necessary stuff: Step 4: Upload all your edited mp3 files to your server or website. Copy-paste their web address to a text file. You should have a list of addresses starting with http://... and ending with ... .Mp3. So, if John is uploading Song1 and song2, to his website he should have in the end: something like: http://johsonline.com/uploads/song1.mp3 http://johsonline.com/uploads/song2.mp3 etc. Step 5: Upload you desired Flash player and copy-paste the address. This time the file should end in .SWF, the standard Flash objects' extension. So John would have: http://johsonline.com/uploads/johnsmusicplayer.SWF Step 6: Now we just need the HTML code to connect the Flash player to the files we want to use. So, in the general Dewplayer HTML code below, <object data="dewplayer.swf" width="200" height="20" id="dewplayer" name="dewplayer"> <param name="movie" value="dewplayer.swf" /> <param name="flashvars" value="mp3=test.mp3" /> <param name="wmode" value="transparent" /> </object> you have to make the necessary alterations, using your own data according to your upload addresses. Notice that you just change the BOLD fiels, the ones the SWF and Mp3 files are concerned. So, getting back to John's example, he should have iin the end: <object data="http://johsonline.com/uploads/johnsmusicplayer.SWF" width="200" height="20" id="dewplayer" name="dewplayer"> <param name="movie" value="http://johsonline.com/uploads/johnsmusicplayer.SWF" /> <param name="flashvars" value="mp3=http://johsonline.com/uploads/song1.mp3|http://johsonline.com/uploads/song2.mp3" /> <param name="wmode" value="transparent" /> </object> Please notice that the different mp3 files' paths are separated by the vertical bar "|" - take care not to use spaces or other characters when inserting the info. Step 7: Copy-paste your edited HTML code to your website, blog, etc. Check my previous post on this subject and the Dewplayer website, it can be really helpful! And please let me know your comments or suggestions. Enjoy the music!
0 Comments
Leave a Reply. |