HTML 5 Audio (Firefox)

Question

I'm somewhat of an HTML 5 newbie. The problem I'm having is with the tag working in Firefox.

The code I used was:

<audio src="Repipe-WebsiteNevada_06-24-08.ogg" controls autoplay>  
  <span class="style19"><a href="Repipe-WebsiteNevada_06-24-08.mp3">
      A message from Repipe Specialists</a></span>
</audio>

It works locally, but when I upload and test it. The audio player doesn't show up at all.

This is the page:

http://www.repipespecialists.com/landing/ctc/repipe_specialists_usa_test.html

Can someone help please?

http://stackoverflow.com/questions/4923136/why-doesnt-firefox-support-mp3-file-format-in-audio — Andrius Naruševičius, Jun 13 '12 at 23:33

score 1 · Answer 1 · edited May 23 '17 at 11:50

1

You need to use the type tag to specify you're using audio/ogg. Something like

<audio controls autoplay>
  <source src="file.ogg" type="audio/ogg" />
  <source src="file.mp3" type="audio/mp3" />
</audio>

(Note how you can list multiple files as fallbacks for different browsers.)

After that, you still have to configure your server. This StackOverflow answer in particular may he helpful.

edited May 23 '17 at 11:50

Community

1
1

answered Jun 13 '12 at 23:41

Arithmomaniac

4,604
3
38
58

Thanks for the response, I tried that. Won't work still in firefox: [link](http://www.repipespecialists.com/landing/ctc/repipe_specialists_usa_test.html) – user1454988 Jun 13 '12 at 23:47

score 0 · Answer 2 · answered Jun 14 '12 at 02:17

0

I think this has to do with your server side mine type configurations and how the browser interpret different content types of response.

The response content-type of your ogg file is text/plain, I guess for some browsers like Chrome, it is able to predict the really content type is ogg but Firefox cannot do that. As a result, Firefox will fail to load this file as an ogg audio.

answered Jun 14 '12 at 02:17

Yudong Li

1,784
2
17
32

You tried text/plain or you change from text/plain to audio/ogg? – Yudong Li Jun 15 '12 at 00:42

score 0 · Answer 3 · answered Jul 17 '12 at 08:45

<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Tryit Editor v1.5</title>
<link rel="stylesheet" type="text/css" href="/tryit.css" />
<script type="text/javascript">
</script>
<style type="text/css">
body
{
color:#000000;
background-color:#ffffff;
margin:4px;
margin-top:0px;
}

</style>
</head>

<body>
<div style="position:relative;width:100%;margin-top:50px;margin-bottom:0px;">
<div style="width:960px;height:94px;position:relative;margin:0px;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;padding:0px;overflow:hidden">
<audio controls="controls">
  <source src="song.ogg" type="audio/ogg" />
  <source src="song.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>

</body>
</html>

HTML 5 Audio (Firefox)

3 Answers3