Using QuickTime to play music on your website

iWeb for Musicians

Main Navigation Menu:

QuickTime Music Players

Music Website iWeb Audio Files Music Players Applications SEO Promote Tricks EBlast HTML5 Players

QuickTime Basics

The easiest, but not the best way to load and play MP3 music files on your website is using QuickTime.

Drag an MP3 file onto your page and you’ll see a box like figure 1.

Drag a JPEG image into this box and you’ll get a player like the one at the top of this page.

If you don’t put an image into the box, it will appear on your published site like figure 2.

You can achieve the same result more neatly by pasting the following code into an HTML snippet box...

The URL is directed to a file “SongTitle.mp3” in the folder “MusicMP3” inside the main website folder on the server.

Both “autostart” and “loop” can be set to “true” if you want the file to auto play and/or loop continuously.

Figures 3 & 4 show the QuickTime Inspector window.

Here you can roughly edit your file by sliding the stop and start markers to the desired position.

You can select autoplay so that your music starts playing when the page is loaded into the browser.

You get it to repeat over and over by selecting “loop”.

You can hide or show the control bar.

If you decide to hide the control bar and select loop so that your website visitors are forced to listen to your song as long as they are on that page, you will, obviously, have to select autoplay.

A sneaky variation of this can be achieved by “hiding” an MP3 audio file on the page.

Drag the MP3 file onto the page, drag it down to about 20 px as in figure 5 and place it somewhere on the page where it won’t be covered by any other object and select a shape the same color as your page background to cover the file.

I have outlined my shape in figure 6 using the “Graphic” Inspector “Stroke” function to show where my file is hidden.

Before publishing the page, I select Stroke/None and the file disappears in figure 7.

If I want to find the file again, I do a Command A to select all. Every object on the page will appear outlined. I can look for an empty box like in figure 8 and drag it aside to reveal my MP3 file.

[1]

[2]

[3]

[4]

[6]

[5]

[7]

[8]