Automatically play music files on your website when a page loads

Use Skin Machine to design a player without compromises. Skin Machine itself is based on pure HTML5, Javascript and CSS, so what you see is truely what you get. Use Skin Machine to create: - Wimpy Player Skins - Wimpy Button CSS Classes - Standard CSS and HTML for any other purposes (using the 'export' features in the logo menu.) Launch Skin.
So let’s do it with HTML5, which can play sound through its audio element (Firefox 3.5+, Chrome 3+, Opera 10.5+, Safari 4+, IE 9+). To get as much browser support as we can, we’ll do it like this with both an MP3 source (WebKit and IE) and an OGG source (Firefox and Opera).

Definition and Usage. The play method starts playing the current audio. Tip: This method is often used together with the pause method. Tip: Use the controls property to display audio controls (like play, pause, seeking, volume, etc, attached on the audio). This week we’re going to expand upon our discussion on multimediaand delve further into HTML5’s audio tag. The audio tag is new to HTML, like the tag, and allows developers to embed music on their websites (and unlike earlier attempts to add audio to a website, it isn’t limited to old-fashioned midi music).

by Christopher Heng, thesitewizard.com

If you code your web pages using a text editor (as opposed to using a visual web editor likeDreamweaver),you may be wondering how you might go about adding background music to your web pages. While this is not a questionI encounter often at thesitewizard.com, I do get the occasional music aficionado sending me this query, hence this article.

Issues Surrounding Background Music

Before you start, you should be aware thatbackground music that automaticallystarts playing when a web page is loaded may not be appreciated by a large number of your visitors. Some of them, when greetedwith the sudden blaring of music from their speakers, may immediately hit the BACK button of their browsers. This may occur evenif you're playing a piece of music that you think is well loved by everyone: remember, there are people who surf the Internet inpublic libraries, at work, or in the dead of the night when others are asleep. Others may already have their favourite('favorite' in US English)piece of music playing on their computer speakers, and your auto-playing music file will only cause them to be annoyed.

Even if you are satisfied that your website has the type of target audience that will enjoyyour background music, there are alternatives to automatically playing music that you mightwant to consider. For example, giving visitors a link which they can click to play musicwould allow you to showcase your music while remaining sensitive to your visitors' preferences.Instructions on how to accomplish this, as well as how to implement autoplaying music, are given below.

Playing Music Only When a Link is Clicked

Html Play Audio On Image Click Button

If you have a music file (such as an MP3 file) that you want played when a visitorclicks a link, put HTML code like the following on your page:

<a href='yourmusicfile.mp3'>Play music</a>

Replace the 'yourmusicfile.mp3' with the appropriate filename. Note that the above HTML codeworks for '.wav' and '.mid' files as well (or anything else for that matter).

How to Embed Background Music on Your Web Site

Update: For a modern treatment on how to include music on your website, please readHow to Play Musicor Audio on a Website with HTML (HTML5) instead.

This rest of this article (below) is obsolete. It was written at a time when Netscape 4 and Internet Explorer 4were the browsers used by the majority of people. ('What is Netscape?' you say. My point precisely.)It even talks about a type of music file (midi) that you rarely see on the Internet any more. It isleft here mainly for historical interest. You can safely skip directly to theupdatedversion here.

The problem with embedding background music is that the different browsers out there havetheir own methods of implementing embedded music files.

For all versions of Netscape, as well as Internet Explorer ('IE') 3.0 and above, you can use the following code:

The width and height attribute given above causes the player to be invisible. If you do notwant it to be invisible, you can specify your own dimensions to suit your site decor.

For Opera and all IE versions, the following code works:

As you probably have noticed, IE 3.0 and above support both methods, so you cannot simply putboth those tags into your web document in the hope of supporting all browsers. It willwork on Netscape and early versions of IE, but the newer versions of IE will recognizeboth tags, leading to problems when IE tries to load the music file twice.

The workaround that I've seen on some sites, that seems to work for me, is to enclose theBGSOUND tag inside NOEMBED tags, thus preventing IE from interpreting the second tag.

This code appears to be compatible with all versions of IE, Netscape and Opera.

Fixing Your Web Server's MIME Types

If, after putting the above code on your site and uploading your music file, your music doesnot automatically play in IE, Netscape or Opera, it is possible that your web server is notsending the browser the correct MIME type. In order for the browser to know how to handlethe file, your web server needs to be configured to send the correct information about the file.For example, for MIDI files, the web server should send the browser a 'Content-Type' header of'audio/midi'.

You can find out if your server has been correctly configured by starting up Netscape,invoking the 'View' menu and selecting the 'Page Info' item on that menu. (I'm referring toversion 4.7x of Netscape - the item may be labelled differently on other versionsof Netscape.) The MIME type of your music file will be displayed (among other things).

If the MIME type is incorrect, contact your web host to have them fix it. If your website runson an Apache web server, and your host has configured it to allow you to override its settingsusing a .htaccess file, you can set up the MIME type yourself. For example, if you haveMIDI files with a file extension of '.midi', you might add the following line to your.htaccess file:

If you don't have any existing .htaccess file, you can simply create one using anASCII text editor and upload it to the top directory of your website. Remember,Microsoft Word and Wordpad are *not* ASCII text editors. Also note that this method onlyworks for Apache servers configured to allow .htaccess overrides. If this is not the casefor you (for example, if your site runs on a Windows machine running IIS), you will probablyhave to get your web host to fix the problem.

Browser Plug-in Problems

Sometimes you may encounter a situation where the embedded code works for you but not forothers using the same version of the same browser.

This situation may occur when the person has installed some other software that has replacedthe default browser plug-in to handle the music file type. For example, various multimediaplayers (like QuickTime) replace the browser's default plugins when they are installed.The replacement plugins may not function in quite the same way as the default plugin for thebrowser, leading to your code not working as expected.

There's probably little you can do to prevent this from happening, short of posting noticeseverywhere on your site telling people not to install such-and-such a software, whichis of course ludicrous. If you insist on putting auto-playing sound files on your web page,my recommendation is that you ensure that your page makes sense whether or not those soundsare played on your visitor's machine. That is, don't auto-play a sound file that providesvital information that the visitor needs to understand your web page - unless of course you alsoprovide a clickable link on the page th