Site hosted by Angelfire.com: Build your free website today!

Bruceee's Sandpit
Web Design with SiteSpinner
home
home
home
Single Page Options
There are three options to place music on a single page:
  • Use background music via the page editor
  • Use an embedded media player as a 'Foreign Object'
  • Link directly to the music file (just like a regular link)
For more details on these techniques, see this Virtual Mechanics FAQ.
Warning! It is very easy to annoy people with unexpected background music:
  • They may already be playing other music
  • They may be working in a quiet office
  • They might not like your choice of music
  • They may not want to download a big .mp3 file
For these reasons,  always give your visitors the choice of playing or not playing your music.
Playing Background Music
Multi-Page Options
There is a restriction on these techniques -- they apply only to the current page. If you want the music to continue across several pages,  you have to be a little more devious.

The tricks below all rely on opening the music player in another window, then keeping that window open while your visitor surfs through other pages:
  • Use an i-frame.
  • Mark all links from your starting page 'Open this link in a new Window'.
  • Create a new window with the music player in it and send it to the back.

Use an i-frame
The idea here is to put the music player in outer part of the frame -- the frameset. And have the normal page content inside the frame. I don't like to put a whole page or group of pages into an i-frame just so I can have background music.  There are suggestions on the web that frames should be avoided -- e.g. search engines have difficulty reading their contents. But if you are already using i-frames for navigation, put the music player into a frame or frameset  that is always present. It may well work for you.

Here is a sample i-frame with background music. For this example I deliberately made the i-frame small so you can where the page frame ends. In the real world the i-frame has to be big enough to include your biggest page. Otherwise you will chop off the bottom of your longer pages. So there is a maintenance issue here too -- if you expand your pages, you must also expand the i-frame.
Open links in a New Window
Mark all links from your starting page 'Open this link in a new Window'. By appropriate choice of starting page, you can confine the effect to just a few pages. Or if you apply it to your home page, you can have continuous background music over your your whole site. The only change you need to make is to mark all links from the starting page 'Open this link in a new Window'. There is a demonstration here, together with the ims project file.
Send Player to the Back
This is a variation of the above, except that it requires only a single link -- open the media player in a new window and send it to the back.  This is the technique I prefer.  Play background music. The advantage of this technique is that it requires minimal changes to an existing site -- just a link as I did here -- and the music player is in its own page.

To see the page with the music on it, minimize or move aside any browser windows on top of it. It is a good idea to clearly label the page, so that when your viewers discover it, they are in no doubt about what it is about.
Apart from the media player itself there are two other items you may want to include in your background music page:
  • A "close-down the music" link (optional)
  • A code object to send the music player page to the back (desirable)

Close Down the Music
To close down the music page, I provided a text link on the page with this information
  • Link type:  -blank-
  • Link URL: javascript:close()
  • Link Text: Shut down the music -- it's horrible!

Send to the Back
To send the newly opened music player page to the back, include the following Code Object on the music page:
<script language="JavaScript">
window.blur();
</script>
How-to steps
If you are in doubt about how I did that, here is a step-by-step guide to making a  two-page project with music on the first page which continues when you navigate to the second page:

1. Make a fresh, blank SiteSpinner project
2. Append a page. You now have a blank two page project
3. On the index page, place your background music using the page editor. But don't click the 'All Pages' button.
4. Preview the index page. The music should play automatically, and loop as you want
5. On the index page, with the text editor, make a text link to page 2: 6. With the link editor still open, check the box 'Open this link in a new Window'. Important step!!
7. Go to the index page -- you should still be there ;-) and preview all. Double arrows >>
8. When the music has started, click on the page 2 link.
9. The blank page 2 will display, but the music on the index page should continue uninterrupted.
You now have two browser windows open: The blank page 2 on top, and the index page with the music under.
This is the technique I used in the demo project -- there I just extended it a bit to handle the extra pages and to allow navigation back to the entry page.
See also:
Using music with popups
Adding sounds to your pages
| Home | Bandwidth | Bookmarks | Buttons | Code | Images | Map | Music | Review | Sounds | Email |

site map
site map
site map
Map of this site