Rowan Cottage : Autoplay

Rowan

Cottage

About

iWeb

Autoplay Music

How to autoplay music on a webpage

You will have noticed that we have music on our homepage. My excuse for having music is that this is a fun family site - I want to have that little bit of interactivity on the front page. I want to try out all sorts of new things with my new-fangled ability to have my place on the 'net.

Now I know this is a controversial subject, and I know some visitors will be deterred from browsing your site if you have music coming on whilst they surf. However, judging by the popularity of recent threads on the iWeb discussion forum, a lot of people are interested in it.

So notwithstanding the wheres and whyfors here's how you do it.

Bear in mind there are some recent developments relating to Internet Explorer for Windows and how it will handle Quicktime content. I won't go into this now but you can get more information here.

Recipe

Quicktime Pro

Play Pause Sprite from Steven Gulie's site

Textedit

Step 1 - make your song into a movie

Get your song first, perhaps one you've generated with Garageband or one that's already in your iTunes library.

Open it with Quicktime Player (File > Open File, or drag the sound file to the Quicktime Player icon).

Go to File > Export. In the dialog box, select 'Export Movie to Quicktime Movie', then click 'Options...'.

You need to downgrade the quality of your movie, because, firstly, keeping the song in its original format will mean it will take too long to load in the background defeating the purpose of background music. Secondly people won't be bothered by having high quality 128bps stereo sound coming from the internet - it is background music after all.

So when you click 'Options...' you can set the quality of the exported movie. You will see Sound settings. There are various different formats that you can use. It is probably best to experiment with the settings yourself to see what sort of quality you get for your file size. The best sound compressors I've found are QDesign Music 2 and Qualcomm PureVoice. On the left are the settings I would use, but bear in mind you can choose your own settings.

QDesign Music 2

Channels: Mono

Rate: 8kHz

QDesign Music 2 Settings > Options:

Bitrate: 8kbits/s

Qualcomm PureVoice

Channels: Mono

Rate: 8kHz

Qualcomm PureVoice Settings > Options:

Qualcomm Half Rate

Optimize compression for streaming

Check the box 'Prepare for Internet Streaming', select 'Fast Start'

Step 2 - add a pause or mute function

This is important if you provide music on your site - you really need to provide a way for people to start and stop the music if they want to, otherwise they will be very discouraged from browsing further. Having said that, I have found from my counter tracking logs that the vast majority of people do not pause or stop the music! Nevertheless I feel you should give them the choice.

There are various ways you can go this:

1. You could keep the controller visible so people can stop the music if they wish. With this method you can add a picture to the movie.

2. You can do it with javascript - see links below. This is how I do it in my homepage. I use this method as I have random music and also I can use a custom icon for my mute function.

3. You can use a sprite method - I will detail this method as it is the easiest.

First download the play/pause sprite from Steven Gulie's ‘Quicktime for the Web’ site.

From step 1 above, you now should have your own song movie, e.g., ditty.mov.

Open your ditty.mov in Quicktime Player.

Open the playpausectrl.mov that you downloaded as well.

Command-A to select all of the file.

Command-C to copy.

Now click on your song movie, ditty.mov.

Go to Edit > Add to Selection & Scale

You will now see a play/pause control above the timeline. Try clicking on it and see what it does!

Save your song movie, File > Save.

Step 3 - Put it into iWeb and publish

Now drag your modified song movie into iWeb onto the page and position it where you want the movie play/pause control to appear. You will see just the sprite icon on your iWeb page.

Now publish.

Step 4 - Edit the HTML

What follows now depends on your version of iWeb. In iWeb 1.0 the code to edit is held in the HTML file. In iWeb 1.1 or later the code is held in a javascript file. Please follow the correct version.

iWeb 1.0 Now find your HTML page with the song on it. Open this in Textedit.

If you have published to .mac, in Textedit, go to File > Open, select your iDisk in the left bar, and navigate to Web/Sites/iWeb/yoursitename/yourHTMLpage.html

You will see a load of HTML text. If you don't see text and instead see what looks like a webpage, go to Textedit > Preferences > Open and Save and check the box 'ignore rich text commands in HTML files'. Now re-open the file and you should see the HTML text.

You need to find the embedded HTML code that defines the song movie and loads it. This will start with <object...

iWeb 1.1(.1) and later The code for quicktime movies is no longer held within the HTML file. It is now stored within the javascript file within the folder for the files for the HTML page. For instance, if your page is called mypage.html, the code is in a file called mypage.js within the mypage_files folder. The code appears after function writeMovie1(). You can edit this .js file in the same way as editing a .html file - they are both text documents.

The code (whether in the javascript file or the HTML file) will probably look like this (some of the pixel location values will be different):

Now save the file.

For those interested in all the different embed tags for quicktime movies, see here or check the links below.

Double click or open the HTML file to test it in your browser. You should now find just the sprite icon for stopping and starting the music and the music should autoplay on loading the page, and will loop when it reaches the end.

If you published to a folder, you need to upload this HTML file to your hosting server along with the rest of your site.

Remember, you need to make these changes each time you publish (or keep a local altered copy to replace the newly published copy each time, to save editing the file over and over again).

Also note, you can use this method of altering the embed tag attributes to get actual movies to autoplay or loop, not just music!

Links

Hidden Embed Tag Attribute

Embed Tag Attributes

Quicktime for the Web

Useful QT sprites

Play/Pause sprite

Preparing movies for internet delivery

Quicktime tutorials

Including QuickTime In A Web Page

JavaScript Scripting Guide for QuickTime