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

User · Answer

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.

User · Answer

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    lt audio controls src  intro mp3  gt      lt a href  intro mp3  gt Introduction to HTML5  10 12  - MP3 - 3 2MB lt  a gt   lt  audio gt    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

User · Answer

lt html gt    lt head gt     lt H1 gt        Automatically play music files on your website when a page loads      lt  H1 gt   lt  head gt    lt body gt     lt embed src  YourMusic mp3  autostart  true  loop  true  width  2  height  0  gt     lt  embed gt   lt  body gt    lt  html gt

User · Answer

If you are using HTML 5  there is the  lt audio gt  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

User · Answer

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

User · Answer

You can use plenty of things    If you re a standards junkie  you can use the HTML5  lt audio gt  tag    Here is the official W3C specification for the audio tag   Usage    lt audio controls gt    lt source src  http   media w3 org 2010 07 bunny 04-Death Becomes Fur mp4           type  audio mp4  gt    lt  -- The next two lines are only executed if the browser doesn t support MP4 files -- gt    lt source src  http   media w3 org 2010 07 bunny 04-Death Becomes Fur oga           type  audio ogg  codecs vorbis  gt    lt  -- The next line will only be executed if the browser doesn t support the  lt audio gt  tag-- gt    lt p gt Your user agent does not support the HTML5 Audio element  lt  p gt   lt  audio gt    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  lt audio gt  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

[html] Embedding a media player in a website using HTML

Examples related to html

Examples related to embed

Examples related to audio-player