Playing mp3 on my website

Question

So I was wondering what the best way to play an mp3 on my website would be...

I kind of want it to function and appear like the itunes method - a simple play and stop button. like this:

How should I do this? I don't really want to embed a player.

Thanks for the help! Add to Bookmarks

Answer 1

The simplest way to do this is to use:

<embed height="50px" width="100px" src="song.mp3" /> 

But this will also show a visible player in most cases.

Another way to do this is using the audio tag from HTML5 (not supported in older browsers):

<audio id="audio">
    <source src="song.ogg" type="audio/ogg" />
    <source src="song.mp3" type="audio/mp3" />
</audio>

(Using 2 sources here because most browsers either support ogg or mp3. But usually not both)

The tag shown will generate a controllable (invisible) audio element on your page. You could then use JavaScript to control the audio element with a custom button for example:

<button onClick="document.getElementById('audio').play()">Play</button>
<button onClick="document.getElementById('audio').pause()">Pause</button>

Answer 2

You mention - simple play and stop button but HTML5 have pause and play button.Have a try.

<audio controls="controls">
<source src="song.ogg" type="audio/ogg" />
<source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

without using embed player, that's very hard to code the whole player. Have a look at
Jplayer