|
|
|
|
|
|
|
|
Article by Nunzio Fartalone (Nunzio390) - same article can be found here.
*Note: this article deals with audio. For video, refer to these other articles: 1. How to stream video from your website in a separate window 2. Using IFRAMES for Embedded Video |
| This article includes scripting for utilization of an MP3 Flash Player (provided for download here) and music will stream in all major browsers (eg: MSIE, Netscape/Mozilla, Google Chrome, Safari, and Opera). The Demonstration Jukebox on this page is very basic and only contains a few songs for instruction and illustration purposes, and does not contain the additional scripting used for Lyrics for each of the songs to be displayed in an auto-scrolling iframe, as is done in this full-featured Automated Jukebox featured on this page at my main site. If you are interested in obtaining the additional scripting used for Lyrics for each of the songs to be displayed in an auto-scrolling iframe, then see my reply to Jim Campton here. |
This article is in 2 PARTS... 1. The creation of one small javascript used to open the jukebox window (that script is utilized on this page where the jukebox window is generated by clicking on the Start the Automated Jukebox Demo link above). 2. The creation of small separate HTML documents (web pages) for each song in your "song list". You may have any number of songs you want in your Jukebox Song List, as long as each has its own separate song HTML document associated with it. In this demo example I'm only including 4 songs, all in MP3 format. If you like, you can also use WMA or MIDI files. Also, again in this example, for simplicity, each individual song HTML document is named using the format of song#.html. The first song HTML document is named song1.html. The second song HTML document is named song2.html. And so on and so forth for each song you would like added to the Jukebox Song List. The scripting utilizes the META refresh tag to determine the length of the currently playing song in seconds, and then "refreshes" to the next song HTML document in the Jukebox Song List at the end of that time. This is the part of the scripting that causes consecutive (in order) playing of each song. Part 1: This is the small javascript that is used to open the jukebox window. It is to be placed anywhere between the starting <head> and ending </head> tags on the page you want your jukebox link to be on... Now, we need to assign values for the URL, WindowName, Features parameters specified in the above javascript "openjukebox" function into our jukebox link below. You can place this link code at any point after the <body> tag on your page where you want the link for the jukebox to appear... The words "Start the Automated Jukebox" in the code for the link above can be changed to words of your choice, or even an image graphic reference for the jukebox link (if you want to get fancy and not use plain text). In that case, the code for an image to replace the text would be in this format: <img src="name_of_image_file" width="value in pixels" height="value in pixels" alt="descriptive text here" border="0"> Now I'll explain the values above that reference the URL, WindowName, Features parameters... URL: This is crucial. The above filename of song1.html references the document that contains the "embedded" (explained in Part 2) song file for the FIRST song in your song list. That HTML file plays the first song and also sets up the menu for the jukebox. You can create that first song page with whatever name you like, as well as naming any subsequent song pages to names of your choice. But if you do that, then wherever you see song1.html, song2.html, etc. in the rest of my instruction and coding here, you must then replace those file names with your own, everywhere throughout the code on every page, including all subsequent song pages. If you are uncertain of being able to do so, or you feel it would be too involved, then create your song file pages named exactly the way I have done here. You can't go wrong that way. WindowName: I've called it jukebox above. You can name it whatever you like. It's only a name designation for the resulting jukebox javascript window. Features: These values are important insofar as the way the jukebox window displays. The parameters I specified above include toolbar, location, directories, status, menubar, scrollbars, resizable, copyhistory, left, top, screenX, screenY, width, and height. You will notice that all except 3 of them have 0 (zero) values. The 3 that do not are scrollbars, width and height. I highly recommend that all 0 (zero) values remain that way. You can change them, but I recommend against it. The width and height values of the resulting jukebox window can be changed by you as needed. The width would vary depending on the length of any given song name. A long song name might cause a horrid horizontal scrollbar, and you may want to increase the width value of the window to avoid that. I would leave scrollbars at a value of 1. I say this because the window height value can remain constant, but as your song list grows, you will have the option of an upward and downward scroll to display the entire song list if more songs are added and it grows. Part 2: This is the complete page code for the first song file (song1.html)... Instead of listing instructions here as I did in this article in Part 1 above, all your instructions are included within COMMENTS (see the definition of HTML comments) in the page code above. All these comments begin and end this way... <!-- START COMMENT All my instructions to you would be indicated here END COMMENT --> They are not needed for the coding, and can be removed by you once you understand the process. To show how you may remove these comments from your pages, here is the complete page code for the second song file (song2.html), but WITHOUT instructions enclosed within comments... IMPORTANT: When viewing the source code of the page of the LAST song to be played (in this demo/article that file is "song4.html"), since that song is ALSO the very LAST song in the Jukebox Song List, the next file to "refresh" to in the meta tag will be "song1.html", to start the jukebox over again, from the beginning. In other words, always have the last song in your Jukebox Song List "refresh" to the first song again. Download the Flash MP3 Player (needed): Click here and save the RAR file: player_mp3_maxi.rar Within the RAR file is player_mp3_maxi.swf (the actual Flash Player you will need). Once unarchived from the RAR file, upload it to the same directory at your server. NOTE: you will need an unarchiving utility to extract player_mp3_maxi.swf from player_mp3_maxi.rar, so you can use either "7-Zip" (for Windows) or "The Unarchiver" (for Mac OSX), both available via links HERE. ENJOY!  
Okay!! That's it! Enjoy your Automated Jukebox!!Take care! ...Tom (aka Nunzio) |
|
|
