Question

我制作了这段代码，用于在我正在制作的游戏中打开/关闭声音。它适用于谷歌Chrome和IE。我很自豪，我把代码交给了在Firefox上试过的朋友。

但他说，它不适合在Firefox上工作让我感到难过......

我不知道为什么它不起作用，有人可以告诉我什么是错的，或者我可能要改变什么？

P.S。：＆＃34; geluidknop＆＃34;是荷兰语＆＃34; soundbutton＆＃34;。

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

我认为您忘记将event传递给您的事件处理函数。 Chrome会填写此内容，但Firefox不会。

应该是：

function MouseClick(event) {}

Answer 2

这个问题可能不是你的代码，但在firefox中支持更多.mp3支持.mp3。取决于他使用.mp3文件的Firefox版本可能不受支持

查看audio support

上的mozilla文档

mouseclick事件JavaScript在Firefox中不起作用

2 个答案: