1

I am trying to implement background music on a website using the audio object, which is controlled by a JavaScript, I have posted a question about this before, @LazyOne explained that IIS will not serve unknown MIME types, and neither will the VS development server.

I have now uploaded the site to an IIS 7 server, the MIME type for ogg is in place and when the site in accessed the server returns a 206 partial content (mozilla.org mentions that 206 responses are normal and expected for ogg files) and assessing the file directly works fine in Firefox (i.e. if you go to domain.com/music/file.ogg, it plays in the browser). and the file plays fine in the background if the autoplay attribute is set, but it does not play via JavaScript.

Here is the JavaScript in question and relevant html:

audioMusic.volume = 0.15;

function playMusic(){   
    audioMusic.play();
}

function stopMusic(){
    audioMusic.pause();
}

Relevant html:

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
</head>
<body>

  <a href="javascript:void(0)" onclick="playMusic()">on</a>
  <a href="javascript:void(0)" onclick="stopMusic()">off</a>

 <audio id="audioMusic" loop="loop" preload="auto">
   <source src="/Music/music.ogg" type="audio/ogg" />
   <source src="/Music/music.mp3" type="audio/mp3" />   
  </audio>

  <script type="text/javascript" src="/Scripts/music.js"></script>
</body>
</html>

More interesting facts:

  • the playMusic() function is called in firefox, if you add an alert at the beginning it does off, but it is not able to execute: audioMusic.play()
  • I have also tried document.getElementById("audioMusic").play();
  • Both document.getElementById("audioMusic").play() and audioMusic.play() work in Chrome and IE, but not in firefox
  • I am using Firefox 5.0.1 (the latest)

Question: how to control the audio element via JavaScript in Firefox?

Improve this question
4
  • Please provide full html/js file ready to be tested (I can take my own ogg/mp3) -- use services like pastebin.com if code is too big. Your current code is unreadable -- the editor can easily handle proper HTML if formatted correctly.
    – LazyOne
    Commented Aug 6, 2011 at 18:23
  • @LazyOne pastebin.com/W5EwkNcT pastebin.com/z4Fq6sua
    – broccoli_soup
    Commented Aug 6, 2011 at 18:59
  • Works absolutely fine here -- no problems at all. I've even tried both <html xmlns="http://www.w3.org/1999/xhtml"> (the one you have) and <!DOCTYPE HTML><html lang="en-GB"> (the one generated by PhpStorm for HTML5 documents) -- no difference in behaviour -- able to play and stop.
    – LazyOne
    Commented Aug 6, 2011 at 21:44
  • A bit of a side issue, but... audioMusic.play() would never work in Firefox because Firefox (at least up to version 4, and I suspect ver 5) does not map elements with the id attribute to properties in the window object, as other browsers seem to do. So you can't access any elements in the 'global scope' like this (using the Browser Object Model - BOM) in Firefox. For cross browser compatibility you would need to use the DOM... document.getElementById() as @LazyOne suggests in the comments below.
    – MrWhite
    Commented Aug 9, 2011 at 22:22

2 Answers 2

Reset to default
0

Have you tested your HTML with W3C validator? http://validator.w3.org/

Also, I believe you have to use a normal object tag to play music in firefox 5. So If I were you that would be what I would test (after having valid HTML)

Improve this answer
10
  • yes it validates, audio is an html5 element, which firefox supports, the problem is with it not executing the javascript to control the audio element
    – broccoli_soup
    Commented Aug 6, 2011 at 21:37
  • @Ivan Is there any chance that you have NoScript extension for Firefox or something like that -- it sounds like you have JavaScript disabled/forbidden .. or JavaScript is not loaded (wrong path?).
    – LazyOne
    Commented Aug 6, 2011 at 22:09
  • @LazyOne when i added an alert() to the playMusic() function, it produced the appropriate message box, so it certainly seems like the javascript works and that the function is being called but cannot be successfully executed
    – broccoli_soup
    Commented Aug 6, 2011 at 22:38
  • @Ivan So which JS code have you tried (I assume both, but want to confirm) -- the one in question body .. or the one in comment/pastebin? The one in question body will not work unless you add this line before any other var audioMusic = document.getElementById("audioMusic"); -- I'm pretty sure you know that well... just cannot find anything that would not allow it to work.
    – LazyOne
    Commented Aug 6, 2011 at 23:00
  • @LazyOne it seems to be a problem with the ogg file itself - the same code works with a different ogg file. Although the suspected file plays in Firefox when accessed directly, but not, it would appear, in the audio element. Also the file is the result of a conversion from mp3, so it wouldn't surprise me if that's the problem but of course its odd that it still plays when navigated to directly...
    – broccoli_soup
    Commented Aug 6, 2011 at 23:14
0

Well, I still don't know exactly why Firefox didn't want play that file, but if anyone is having the same issue - I ended up using jPlayer. You can download it from: http://www.jplayer.org/

TODO:

Place the jPlayer files in your scripts folder, then you can use this html page to implement the player on your website: http://pastebin.com/mhdt2m7W

Make sure to change the file names and directories as needed, namely the music file location and the location of your scripts folder.

Good luck.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.