Strange audio element behaviour in FireFox

[Entity_]

Hi guys. I'm having a problem with my audio elements while on Firefox, but no other browser. First things first. I've got quite a few audio elements on my page, most of which autoplay. The problem is, they sound vastly louder on firefox than any other browser, and the control that I've created to control them do not work on firefox, but work fine on other browsers. Wierder still, I created this code to check what was happening:

<script type="text/javascript">
    setInterval(function () {
        var birdSound = document.getElementById("player");
        var treeSound = document.getElementById("player1");
        var chimeSound = document.getElementById("player2");
        console.log("BIRDSOUND FOLLOWS" + " " + birdSound.volume);
        console.log("TREESOUND FOLLOWS" + " " + treeSound.volume);
        console.log("CHIMESOUND FOLLOWS" + " " + chimeSound.volume);
    }, 1000);
</script>

These are the offending three elements. The returned value to the console reads as expected - a change in volume of 0.1 every time the button is clicked, but there is no audible change while in internet explorer or chrome the change is immediately obvious.


Here is my initial mix:
I know this mix is working because of the readouts that my above code provides, however this mix sounds vastly louder than IE and GC.

<script type="text/javascript">
    jQuery(document).ready(function () {
        jQuery('#Hidetext').live('click', function (event) {
            jQuery('#logo').fadeOut('slow');
        });

        var playerc = document.getElementById('player');
        playerc.volume = 0.1;

        var player1c = document.getElementById('player1');
        player1c.volume = 0.1;

        var player2c = document.getElementById('player2');
        player2c.volume = 0.1;

        var coverBirdsc = document.getElementById('coverBirds');
        coverBirdsc.volume = 0.1;

        var coverTreesc = document.getElementById('coverTrees');
        coverTreesc.volume = 0.1;

    });

</script>

This mute code appears to work for one button but not the rest (Don't ask me):

<script type="text/javascript">
    function muteCheck() {
        var audioElm = document.getElementById('player');
        if (audioElm.paused) {
            audioElm.play();
        } else {
            audioElm.pause();
        }
    };
            
</script>

You can see the full code along with the readouts provided at www.sweetsunnyvibes.com (the website I'm building). Hopefully you'll be able to spot what I couldn't.

[Entity_]

After further investigation, it seems my sound buttons DO work... there is just a strange 'ghost' sound effect in the background that plays regardless, and at this point I have no idea what it is! Investigating now! Anyone who might have experienced this before is welcome to post!

[Entity_]

It was the autoplay! If I turn off the autoplay feature, there is no 'ghost' audio track. What on earth is going on here?

EDIT: Confirmed. Having autoplay on my audio elements causes a strange 'ghost' background audio to appear from nowhere. Am investigating further.