Using Music and Audio Files on your Web Site

There are a few different ways to use music and audio files on your web site and this article discusses the various methods you can use.

Setting an audio file to play on page load

If you want a music file to play when a page is visited (so it plays on page load), the best way is to drag and drop an audio file straight onto your Freeway page.

The best audio formats are the web-standard ones which should play on all browsers and on all platforms - and these are .mp3 or .wav. If you use other formats, the visitor may need to download a plug-in for the audio to play.

As a default, an audio file used in this way will "autoplay" (ie, it will automatically play on page load) but it won't "loop". If you want it to loop, select the item on the page, go to Item>Extended, click on "New", type "loop" (without the quotes) for Name, type "true" (again no quotes) for Value, then click OK.

Unless you want the audio file to be seen on your page, you will want to make it very small (perhaps 1px by 1px) and move it to an empty area of your page. If you don't use a background color on the item it will be invisible.

Note: There may be a slight lag (especially with very large audio files) before the music starts after the page has loaded.

You may have seen a built-in Action called the Background Sound Action (which users of previous versions may have used in the past). Unfortunately this functionality of this Action has been compromised by later versions of Internet Explorer for PC, so we recommend using the method above.

Setting an audio file to play when the QuickTime controller's play button is clicked

This is perhaps the simplest way to use an audio file on a page so that the visitor can click a play button to start the file playing.

Drag and drop an audio file onto your Freeway page and make the item 15px high (the height of the QuickTime controller bar. You can make the width of the item whatever you want - this will simply make the progress bar of the controller stretch to whatever width is set.

However, because by default an audio file is set to "autoplay", you need to switch this off so that it will only play when the visitor clicks on the play button. To do this, select the item on the page, go to Item>Extended, click New, type "autoplay" (without the quotes) for Name, type "false" (again no quotes) for Value, then click OK. If you preview your page now, you will see that the QuickTime controller's play button needs to be clicked for the music to play.

Setting an audio file to play when you click on a link

If you have a lot of audio files on a page and you want to avoid too much clutter, you can always use a graphic item so that when it is clicked a new window will appear with the audio file already on a page. The best way to do this is to use the Link to New Window Action on the graphic.

Draw a graphic on the page, size it and set a color for the background, then go to Item>Actions and choose Link to New Window. Now you need to set up the new page which will contain the audio file. Create a new page in Freeway, give its name as the name of the song playing on the audio file and click OK. Now set the page dimensions of the page to be 350px wide by 100px high.

Drag and drop the audio file onto the new page then set its dimensions to 310px wide by 15px deep and center the item vertically and horizontally. If you want the file to autoplay when the page opens, you can leave the defaults as they are - if you want the file to only play when the play button is clicked by the visitor, use the Item>Extended method we used earlier.

Now go back to the page with the graphic link. Select the graphic then, in the Link to New Window Action palette, enter the wording you want to display at the top of the browser window (perhaps the name of the audio file), click on the Page popup and choose the new page you created earlier, enter 350 for width, enter 100 for height, then set the Toolbar, Scrollbars and Resizable popups to None. Choose Yes in the Use Link popup.

Using a Flash Player to play your audio files

Some people like to use a Flash player as a virtual jukebox on the page with a list of audio files in a list in the Flash player's window (or "skin"). The method for setting up a Flash player like this will vary depending on the Flash player you're using.

There are many Flash players you can use for free, while others are commercial versions which offer greater flexibility and greater functionality. You can type "flash player" into Google (with the double-quotes) to see the selection available.

Note that we can't support any third-party Flash player solutions such as these.

If you want to use a Flash player on your Freeway site, you will probably use a .swf file on your page (which you can drag and drop on the page), but there will be other files which are "referenced" by the .swf file so that they play when the file is selected in the player window (these will probably be .mp3 files for each song and a .xml file which tells the player which order to list the songs in). To make it work when you test the Flash player locally by previewing in a browser you'll need to copy the referenced files into your Site Folder so that these files can be found. Likewise, when you upload the site, these referenced files will need to be placed manually into (probably) the Resources folder on the server (if they don't work in that location, you may need to experiment with moving them to different locations). You can upload these files manually by using a standalone FTP application such as Cyberduck <http://cyberduck.ch> or Transmit <http://www.panic.com/transmit>.