One of the hardest things to do is search Google to figure out how to embed sound in a website that you can control without using flash. Today I am going to show you the simple way to embed a hidden sound file and control it with it's javascript methods.

First we need a sound file. Take an mp3 you have and copy it to a file named "sound.mp3", we will use this as the sound we are going to play. Next we will write our object code to embed the file into the webpage.

<div style="visibility: hidden">
    <object type="audio/x-mpeg"
            data="sound.mp3" width="1" height="1" autoplay="false" 
        id="soundplayer">
        <param name="src" value="sound.mp3" />
        <param name="controller" value="true" /> 
        <param name="autoplay" value="false" />
        <param name="autostart" value="0" />
    </object>
</div>

You'll notice that in both the <object> an the object parameters we include some of the same data twice, and in a couple different ways. This is because browser makers suck and instead of sticking to a standard they go off on their own merry way. We are simply covering all our bases.

You will also notice that the width and height tags are set to 1. Which sets the player so small that it can hardly be seen. The object tag does not like the style "display: none;" so instead we used "visibility: hdden;". This will keep the 1x1 pixel object from being seen, and it being 1x1 means it takes up little space and can be throw at the bottom of your HTML document out of the way of your design flow.

Now we need to be able to control our player. The object tag is very non standard with it's javascript calls, which is what threw me off for so long. I was expecting it to have a play() method and a stop() method. This is close, but incorrect. It has a Play() and a Stop() method. Not very standard for javascript methods as they are usually start with a lower case character. so we'll add this bit of HTML

    <input type="button" value="Play" 
        onclick="document.getElementById('soundplayer').Play()" />

    <input type="button" value="Stop"
        onclick="document.getElementById('soundplayer').Stop()" />

If you now load your page, your 2 buttons should start and stop the sound.mp3 loaded into the object file. That's it pretty simple. Oh? What's that? You ask, why is there no "embed" tag version? It's pretty simple really. Mozilla family browsers were really the only browser that supported embed tags, and since Firefox supports the object tag, the embed tag is pretty pointless, so I don't use it. Have fun! View the Demo.