mouseclick event JavaScript doesn't work in Firefox

Question

I made this piece of code for turning sound on/off in a game I'm making. It works great with Google Chrome and IE. Proud as I was I gave the code to my friend who tried it on Firefox..

But he made me sad by saying it didn't work on Firefox...

I don't know why it doesn't work, can somebody tell me what's wrong or maybe what I have to change?

PS: "geluidknop" is Dutch for "soundbutton".

var audio = new Audio('Beep.mp3'); 

function playAudio() {
audio.play();

}

function pauseAudio() {
audio.pause();
audio.currentTime = 0;
} 


window.addEventListener('keydown', playAudio);
audio.play();

function CanvasApp() { 
'use strict'
var canvas = document.getElementById("canvas"),
    style = window.getComputedStyle(canvas),
    context = canvas.getContext("2d"),
    source1 = "geluidaan.png",
    source2 = "geluiduit.png",
    click = false,
    geluidknop = {x: 0, y: 0, width: 1024, height: 768};

geluidknop.aspect = geluidknop.height / geluidknop.width;
geluidknop.width = 500;
geluidknop.height = geluidknop.width * geluidknop.aspect;

canvas.width = parseInt(style.width, 10);
canvas.height = parseInt(style.height, 10);

var img = new Image();

img.onload = function () {
context.drawImage (img, geluidknop.x, geluidknop.y, geluidknop.width, geluidknop.height);
};

img.src = source1;

function changeImage() {
    if (click) {
        img.src = source2;
    } else {
        img.src = source1;
    } 
}

function MouseClick() {
    var rect = canvas.getBoundingClientRect(),
        x = event.clientX - rect.left,
        y = event.clientY - rect.top;

    if (x >= geluidknop.x && x <= geluidknop.x + geluidknop.width) {
        if (y >= geluidknop.y && y <= geluidknop.y + geluidknop.height) {
            if  (click) {
                click = false;
                playAudio();
                changeImage();
            }else { 
            click = true;
            pauseAudio();
            changeImage();
    }
        }   
    }
    context.save();
    context.setTransform(1, 0, 0, 1, 0, 0);
    context.clearRect(0, 0, canvas.width, canvas.height);
    context.restore();
}



canvas.addEventListener('click', MouseClick); 

function restartAudio() { 
audio.currentTime = 0;
audio.play();
}
audio.addEventListener('ended', restartAudio);
}

function WindowLoaded() {
'use strict';
CanvasApp();
}

window.addEventListener("load", WindowLoaded);

Answer 1

I think you forgot to pass event to your event handler function. Chrome will fill this in, but Firefox will not.

It should be:

function MouseClick(event) {}

Answer 2

This issue might not be your code, but more likley .mp3 support in firefox. Dependant on the version of firefox he was using a .mp3 file might not be supported

check out the mozilla docs on audio support