Question

What I want to do is to embed music files within a website (Have something a’la little mp3 player on the site). I want the audience to be able to play, stop etc the songs by using custom made controllers.

How do I code those custom made buttons so that they all work fine?

Answer 1

You can use plenty of things.

• If you’re a standards junkie, you can use the HTML5 <audio> tag:

Here is the official W3C specification for the audio tag.

Usage:

<audio controls>
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.mp4"
         type='audio/mp4'>
 <!-- The next two lines are only executed if the browser doesn't support MP4 files -->
 <source src="http://media.w3.org/2010/07/bunny/04-Death_Becomes_Fur.oga"
         type='audio/ogg; codecs=vorbis'>
 <!-- The next line will only be executed if the browser doesn't support the <audio> tag-->
 <p>Your user agent does not support the HTML5 Audio element.</p>
</audio>

jsFiddle here.

• Or, if you want to support older browsers, you can use many of the free audio flash players available. Such as:

  • Dewplayer
  • MP3 Player (boring name… right? 🙂 )
  • Website Music Player (even more boring… right?)
  • Zanorg Player

Note: I’m not sure which are the best ones, as I have never used one (yet).

---

UPDATE: As mentioned in another answer’s comment, you are using XHTML 1.0 Transitional. You might be able to get <audio> to work with some hack.

---

UPDATE 2: I just remembered another way to do play audio. This will work in XHTML!!! This is fully standards-compliant.

You use this JavaScript:

var aud = document.createElement("iframe");
aud.setAttribute('src', "http://yoursite.com/youraudio.mp4"); // replace with actual file path
aud.setAttribute('width', '1px');
aud.setAttribute('height', '1px');
aud.setAttribute('scrolling', 'no');
aud.style.border = "0px";
document.body.appendChild(aud);

This is my answer to another question.

---

UPDATE 3: To customise the controls, you can use something like this.