CODEWITHSUNDEEP
javascripthtmlaudiobrowser
user2148427
user2148427

Reputation: 5

Html5 Audio with JavaScript won't work any browser other than chrome

Html5 Audio with JavaScript won't work any browser other than chrome

Basically on button press I want to be able to switch the current track to another. This works fine in Chrome but not in any other browser?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<title>MediaPlayer Won't Work in Any browser other than chrome</title>
<script type="text/javascript">
function Test(){
var Mp3Me= document.getElementById('Mp3Me');
Mp3Me.src = "http://media.rolandus.com/mp3/v-piano_vintage_piano_1.mp3";
}

</script>

</head>

<body>
    <audio id="Mp3Me" autoplay autobuffer controls>
  <source src="Batman.mp3"  type="audio/mpeg">
</audio>

<a href="javascript:Test()">Start Piano Track</a>

</body>

</html>

Upvotes: 0

Views: 304

Answers (3)

soyuka
soyuka

Reputation: 9105

See browser audio compatibility here.

Firefox and Opera aren't able to read mp3 files. You should have the same file in Ogg or Wav to have it work on every browser.

For example the w3schools code :

<audio controls>
  <source src="horse.ogg" type="audio/ogg"> <!--OGG-->
  <source src="horse.mp3" type="audio/mpeg"> <!--MP3-->
Your browser does not support the audio element.
</audio>

Upvotes: 1

MJQ
MJQ

Reputation: 1786

You have to use this tag differently as in firefox you can't play MP3 files with such a code. Here is the link for your help. http://support.mozilla.org/en-US/questions/758978

Firefox doesn't support mp3. See this http://www.codingforums.com/showthread.php?t=231069

Here is another related question, Why doesn't Firefox support the MP3 file format in <audio>

Upvotes: 0

Olical
Olical

Reputation: 41352

Probably due to the browsers not being able to play MP3s. This table shows what browsers support what formats: https://developer.mozilla.org/en-US/docs/HTML/Supported_media_formats

Upvotes: 0

Related Questions