Add music to site

This little tool for jAlbum will help you adding music to any of your albums made with jAlbum. Download the attached zip file and extract to C:\Users\[username]\AppData\Roaming\jAlbum\Tools directory on PC, Applications /jAlbum/[Right-click: Show package contents]/Java/Tools folder on Mac.

The tool is using Jeroen Wijering‘s excellent MP3 flash player. See the original site here. Please read the legal and licencing issues before using it.

Before you add music you might want to compress it to make fit for web use. A reasonable compomise between bandwidth and quality is around 92kbs/Joint Stereo. You can use iTunes or some other free encoder (from here).

How does it work?

The tool will build a frameset in the output folder and will place the player (music.html) in one frame while runs the original content (supposed to be index.html) in the other. The file which holds both of the frames — called frameset — is named default.html.

Please, make sure your original page is named index.html, for the generated frameset will refer to that. Also take care if your site already has a default.html, for this tool will overwrite that file without a warning.

The files related to music are stored in the “music” subfolder of the output folder (mp3player.swf, music.html, embed.js, playlist.xml and the mp3 files).

Which is the default file on the server?

Different server types have different strategy on which file to show when you refer to a site without the html file’s name,e.g. www.mysite.com/myalbum. Microsoft servers will show default.html first (the site with the music), while UNIX servers show index.html first. So if you want to make sure your visitors will see the complete page with music then link the page as, or send the link in email as: http://www.mysite.com/myalbum/default.html

Disadvantages of using frames

Using frames has several drawbacks, but in this case you need a separate frame to play continuous music, because changing HTML pages in the album stops playing the music. Problems:

  • When you hit the reload button your browser might reload the whole frameset with the first page of the album instead of restoring the current page.
  • You cannot bookmark album pages independently — just the first (top level) page. The browser title will only show the frameset title (see settings panel!) instead of the original page titles.
  • You might experience problems opening outside links — they might open in the frame instead of the whole browser window.

Playlist

The layout is pretty straightforward: You can add songs one by one, and you can also rename them in the text field. Renaming will not change the filename, only the displayed name. So if you want to reorder the files, choose them again with the “Add” button instead of copying and pasting their name within boxes, because doing so will only change the title of the song, not the file. (The tooltip will show the full path of the original MP3 files by moving the cursor over the textbox.) Make sure to turn on URL-encode filenames if you have extended (non-latin) characters in filenames. Though it’s best to avoid such characters for the browsers might not support them at all.

Settings

Frame position: the position of the music frame (left, right, top, bottom) Align in frame: The alignment of the player inside the frame (horizontally: left, center, right / vertically: top, middle, bottom)
Album title: You can define the title browsers show when displaying the frame. This will be displayed instead of the original title stored in index.html. This tool unfortunately cannot read the original title, so you have to add it manually.
Autostart: Turn on to start the music automatically.
Show controls: Turning this off will hide the player from the visitor.
Show playlist: You can designate here if you want the songlist to show.
Auto scroll: Will hide the scrollbar and use the mouse position to scroll the playlist when it’s necessary.
Max. items: The maximum count of items in the playlist.
Frame background:The music frame background color.
Player background: The player face color.
Controls: The control button signs’ color.
Mouseover: The signs’ color on mouse over.

Finalizing

When you ready with the settings and playlist you can Save the settings from the menu File -> Save (or Ctrl-S) or you can also Save as default. In the latter case these setting will be loaded as default next time you start the tool. When you load or save settings you can only choose the folder, because you can only have one settings file per folder, called music.properties. (It’s a simple text file — you can edit with a simple text editor if needed.)

Hitting Add music will start copying the files required. (Make sure you’ve selected the output folder before you start the process.) You can click then the Preview button to see the result.

Samples

These two examples below demonstrate how the player can be integrated in different galleries.

Click here to see (and hear 🙂 ) a working sample!

Leave a Reply