Embedding a media player in a website using HTML

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?

score 29 · Accepted Answer · edited May 23 '17 at 11:55

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.

Do you know how I could customise the controller buttons? P.S. I think 'MP3 Player' name is more boring than 'Website Music Player' :-P — Vetaxili, Apr 06 '12 at 10:20
@Vetaxili This question might help you: http://stackoverflow.com/questions/7638754/html-5-audio-tag-custom-controls — Anish Gupta, Apr 06 '12 at 10:27
I believe your answer is the one that I am looking for and will work. I have to go out now but I definitely will let you know whether it solved my problem. :-) — Vetaxili, Apr 06 '12 at 10:30
Update 2 may be fully standards compliant, for whatever that's worth, but it doesn't play in Chrome. — quillbreaker, Mar 17 '14 at 22:04

score 4 · Answer 2 · answered Apr 06 '12 at 10:11

Definitely the HTML5 element is the way to go. There's at least basic support for it in the most recent versions of almost all browsers:

http://caniuse.com/#feat=audio

And it allows to specify what to do when the element is not supported by the browser. For example you could add a link to a file by doing:

<audio controls src="intro.mp3">
   <a href="intro.mp3">Introduction to HTML5 (10:12) - MP3 - 3.2MB</a>
</audio>

You can find this examples and more information about the audio element in the following link:

http://hacks.mozilla.org/2012/04/enhanceyourhtml5appwithaudio/

Finally, the good news are that mozilla's April's dev Derby is about this element so that's probably going to provide loads of great examples of how to make the most out of this element:

http://hacks.mozilla.org/2012/04/april-dev-derby-show-us-what-you-can-do-with-html5-audio/

If you want to customize the controls of the player you could have a look at an explanation on how to do it [here](http://terrillthompson.com/blog/32) — txominpelu, Apr 06 '12 at 10:17

Charles-Édouard Coste · Answer 3 · 2012-11-23T14:23:05.473

Here is a solution to make an accessible audio player with valid xHTML and non-intrusive javascript thanks to W3C Web Audio API :

What to do :

If the browser is able to read, then we display controls
If the browser is not able to read, we just render a link to the file

First of all, we check if the browser implements Web Audio API:

if (typeof Audio === 'undefined') {
    // abort
}

Then we instanciate an Audio object:

var player = new Audio('mysong.ogg');

Then we can check if the browser is able to decode this type of file :

if(!player.canPlayType('audio/ogg')) {
    // abort
}

Or even if it can play the codec :

if(!player.canPlayType('audio/ogg; codecs="vorbis"')) {
    // abort
}

Then we can use player.play(), player.pause();

I have done a tiny JQuery plugin that I called nanodio to test this.

You can check how it works on my demo page (sorry, but text is in french :p )

Just click on a link to play, and click again to pause. If the browser can read it natively, it will. If it can't, it should download the file.

This is just a little example, but you can improve it to use any element of your page as a control button or generate ones on the fly with javascript... Whatever you want.

score 1 · Answer 4 · answered Dec 30 '13 at 16:06

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.

score 1 · Answer 5 · edited Jun 07 '16 at 00:57

1

<html>

<head>
  <H1>
      Automatically play music files on your website when a page loads
    </H1>
</head>

<body>
  <embed src="YourMusic.mp3" autostart="true" loop="true" width="2" height="0">
  </embed>
</body>

</html>

edited Jun 07 '16 at 00:57

Michael Gaskill

7,913
10
38
43

answered Nov 17 '14 at 22:31

Qais Yousuf

11
3

Oded · Answer 6 · 2012-04-06T09:58:35.057

0

If you are using HTML 5, there is the <audio> element.

On MDN:

The audio element is used to embed sound content in an HTML or XHTML document. The audio element was added as part of HTML5.

Update:

In order to play audio in the browser in HTML versions before 5 (including XHTML), you need to use one of the many flash audio players.

edited Apr 06 '12 at 09:58

answered Apr 06 '12 at 09:44

Oded

489,969
99
883
1,009

Sorry, I forgot to mention. I have to use XHTML 1.0 Transitional. Do you know how I would have to code the controllers? So that the custom ones can be used rather that default ones? – Vetaxili Apr 06 '12 at 09:57
@Vetaxili - small detail, eh? Please _edit_ your question and add this detail. – Oded Apr 06 '12 at 09:57

Embedding a media player in a website using HTML

6 Answers6