Pure HTML Music Player

Question

How can I use pure HTML to make a browser-integrated flash-free online music player? Like, you click on a button, and the music starts playing. I have tried everything with <embed> and with(out) <noembed>, but none of it seems to work. I need it to work in Firefox.

I have an MP3 file.

EDIT: Actually, folks, I am SO sorry for asking this question. I have now seen that I simply had not written the path correctly. It all works quite fine with the <embed src="../../path/to/file.mp3" autostart="false" width="20" height="20"/> tag. The thing is, I was trying to write it for browsers that don't support Flash, like e. g. iPad's Safari.

Answer 1

This ought to help. The HTML5 audio tag has decent support with newer versions of Firefox, Safari, Chrome, and Opera (sadly no Internet Explorer). You may need to convert your .mp3 to .ogg or another format because certain browsers only allow certain formats.

Oh, you'll need Javascript for controls like .play(), .pause()...

Answer 2

I don't think this is possible yet (comes with HTML5). You could use the Yahoo Media Player which works with Javascript.

Answer 3

I realize this is not an answer to the question per se, I am adding it for completeness.

This link has every possible permutation you can imagine...

I am not sure if the part below will work in FireFox:

Here is how to embed Windows Media Player into your HTML.

To embed an object in HTML document, the object class ID is required. The class ID for Windows Media Player 7, 9, 10 and 11 is clsid:6BF52A52-394A-11D3-B153-00C04F79FAA6.

Insert the following code into your HTML document to embed Windows Media Player 7 and later:

<OBJECT id="VIDEO" width="320" height="240" 
    style="position:absolute; left:0;top:0;"
    CLASSID="CLSID:6BF52A52-394A-11d3-B153-00C04F79FAA6"
    type="application/x-oleobject">

    <PARAM NAME="URL" VALUE="your file or url">
    <PARAM NAME="SendPlayStateChangeEvents" VALUE="True">
    <PARAM NAME="AutoStart" VALUE="True">
    <PARAM name="uiMode" value="none">
    <PARAM name="PlayCount" value="9999">
</OBJECT>

In the URL parameter, you can specify a URL (for streaming) or a local file.