Search code examples
htmlfirefoxaudioogg

HTML5 <audio> doesn't work with Firefox even if I use .ogg


I am trying to put some music on my website, so I have decided to use the HTML5 balise, . I learned that I must use .mp3 + .ogg if I want the player works on most of the browsers. So I made this :

<audio controls="">
 <source src="http://maxinthebox.fr/files/167d9a8aaf49fbf1bc226045c8f6920e.ogg"/>
 <source src="http://maxinthebox.fr/files/3d4fafe76fbbfd5cba1b5ec181a35b94.mp3"/>
</audio>

It works perfectly with Chrome or Safari, even if I put only the .ogg or the .mp3 either. But with Firefox, no way! I have tried to open only the .ogg, but Firefox shows me a video player. I have searched the web, but I haven't found any solution which works.

So if you can help me to resolve my problem, it would be great !

Thank you in advance !

EDIT: The problem was not from Firefox, not from the .ogg file but from me ! I had a .aif file that I re-encoded with VLC in order to make a .ogg file. And when it asks me if I want to transcode the audio, I checked MP3 instead of Vorbis ! But with your help, I realized my mistake ! Thank you a lot !


Solution

  • Try specifying the type attribute:

    <source src="http://maxinthebox.fr/files/167d9a8aaf49fbf1bc226045c8f6920e.ogg" type="audio/ogg"/>
    

    Else, it is a mime-type issue, with your web-host, causing the video player to open instead. See this answer.

    EDIT: The ogg file itself may not be compatible with firefox. Check with some of the samples here, to identify if it is a server-issue or an ogg-file issue.

    https://developer.mozilla.org/En/Media_formats_supported_by_the_audio_and_video_elements