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?
I found the that either IE or Chrome choked on most of these, or they required external libraries. I just wanted to play an MP3, and I found the page http://www.w3schools.com/html/html_sounds.asp very helpful.
<audio controls>
<source src="horse.mp3" type="audio/mpeg">
<embed height="50" width="100" src="horse.mp3">
</audio>
Worked for me in the browsers I tried, but I didn't have some of the old ones around at this time.
You can use plenty of things.
<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:
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With