0

I am making an audio site for fun, but I find it that the loop property to the audio tag doesnt work in firefox. I also know that conditional statements only work for IE, is there another way to accomplish the same goal?

<![if firefox]>
<script src="script.js"></script>
<![endif]>

EDIT: This is my current HTML code.

<audio id="song_1" name="audio" autobuffer loop>
<source src="song.ogg" />
<source src="song.mp3" />
<source src="song.wav" />
<div class="white_text">Your browser does not support the audio file formats or does not support HTML5.</div>
</audio>
<audio id="song_2" name="audio" autobuffer loop>

<source src="song2.ogg" />
<source src="song2.mp3" />
<source src="song2.wav" />
</audio>
<audio id="song_3" name="audio" autobuffer loop>
<source src="song3.ogg" />
<source src="song3.mp3" />
<source src="song3.wav" />
</audio>

<audio id="song_4" name="audio" autobuffer loop>
<source src="song4.ogg" />
<source src="song4.mp3" />
<source src="song4.wav" />
</audio>
<script>
var music = document.getElementsByName('audio'), i;
for (i = 0; i < n; ++i)
music[i].addEventListener('ended', function(){this.currentTime = 0;}, false);
</script>

Problem with this is that when 'loop' is added to audio tag, firefox wont loop. When 'loop' is not there, safari (or at least safari mobile, cuz thats what i have) wont loop.

Kanurame
  • 1
  • 1
  • Well as long as you include the script, you can edit the script and check via javascript if the browser's firefox or not, or any browser you want. – XCS Feb 14 '12 at 17:57

3 Answers3

4

You shouldn't test if the browser is Firefox but if the browser supports a feature. Also, I recommend to read: http://forestmist.org/2010/04/html5-audio-loops/ HTML5 audio loops are bad right now.

Edit:

You can try this: https://stackoverflow.com/a/6452884/259517

Community
  • 1
  • 1
Tae
  • 1,611
  • 4
  • 24
  • 43
  • You can use [Modernizr](http://morderniz.com) to test if browser supports a feature. They just released v2.5 which includes 60+ features detection. – elclanrs Feb 14 '12 at 18:12
  • Oh thanks for second link, I think that'll work. I didn't see that one answer on my phone, must've not directed me to it. – Kanurame Feb 14 '12 at 19:34
0

You can just check in JS what browser the user is using.

<script type="text/javascript">
if(navigator.appName == "Netscape") {
// it's Firefox.. do sth..
}
</script>
Kobra
  • 510
  • 5
  • 15
  • 1
    While this is *possible*, it's not recommended. Not only can it break if the user agent string changes (either in the official build, in a fork, or manually by the user), but it completely ignores other browsers that may have the same set of features. Also, simply checking for the browser ignores the version, and blocks the feature for future versions that may support it. – 0b10011 Feb 14 '12 at 18:05
  • I agree with you, but user1209655 asked how to check if 'it is firefox', not if 'your browser has this feature' ;) – Kobra Feb 14 '12 at 18:08
-1

These are called conditional comments.

Per Conditional Comments Firefox:

No, they are only supported by IE.

There are CSS hacks though. See: http://perishablepress.com/press/2009/06/28/css-hacks-for-different-versions-of-firefox/

EDIT: Removed note per comment below. See above.

Community
  • 1
  • 1
Blaker
  • 719
  • 1
  • 8
  • 12