问题描述:

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?

网友答案:

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.

网友答案:

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.

网友答案:
<!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>
相关阅读:
Top