javascript - ClickEvent上的JavaScript声音仅适用于Google Chrome

Question

我在ff和safari上播放声音有问题。仅 Chrome 有效。
我想在 Canvas 上单击时播放声音。我有两种声音。
但声音仅适用于Google Chrome。

index.php

<div style="display:none">
        <audio id="soundTrue" class="soundTrue" controls preload="none"> 
            <source src="fx/true.ogg" type="audio/ogg">
            <source src="fx/true.wav" type="audio/wav">
            <source src="fx/true.mp3" type="audio/mpeg">
        </audio>
        <audio id="soundFalse" class="soundFalse" controls preload="none"> 
            <source src="fx/false.ogg" type="audio/ogg">
            <source src="fx/false.wav" type="audio/wav">
            <source src="fx/false.mp3" type="audio/mpeg">
        </audio>
    </div>

game.js:

var playSound = function (sound) {
    sound.trigger('play');
}

var stopSound = function (sound) {
    sound.trigger('pause');
    sound.prop("currentTime", 0);
}

$('#gameCanvas').click(function (e) {
document.getElementById('soundTrue').play();

var clickedX = e.pageX - this.offsetLeft;
var clickedY = e.pageY - this.offsetTop;
var found = false;

for (var i = 0; i < circles.length; i++) {
    if (clickedX < circles[i].right && clickedX > circles[i].left && clickedY > circles[i].top && clickedY < circles[i].bottom) {
        if (coordinates[i][2] === 0) {
            coordinates[i][2] = 1;
            drawFoundCupcake(coordinates[i][0], coordinates[i][1]);
            stopSound(soundTrue);
            playSound(soundTrue);

            countOfFound++;
       }
        found = true;
    }
}

if (!found) {
    stopSound(soundTrue);
    playSound(soundFalse);
} else{
    $('#countCupcakes').val(countOfFound);
}
});

Answer 1

这适用于Chrome和Firefox，但不适用于ie和Safari。有任何想法吗？

var soundTrue = document.createElement('audio');
soundTrue.setAttribute('src', '/fx/true.mp3');
soundTrue.setAttribute('autoplay:false', 'autoplay');

var soundFalse = document.createElement('audio');
soundFalse.setAttribute('src', '/fx/false.mp3');
soundFalse.setAttribute('autoplay:false', 'autoplay');

var playSound = function (sound) {
    sound.play();
}

var stopSound = function (sound) {
    sound.pause();
    sound.currentTime = 0;
}

$('#gameCanvas').click(function (e) {
    var clickedX = e.pageX - this.offsetLeft;
    var clickedY = e.pageY - this.offsetTop;
    var found = false;

    for (var i = 0; i < circles.length; i++) {
        if (clickedX < circles[i].right && clickedX > circles[i].left && clickedY > circles[i].top && clickedY < circles[i].bottom) {
            if (coordinates[i][2] === 0) {
                coordinates[i][2] = 1;
                drawFoundCupcake(coordinates[i][0], coordinates[i][1]);
                stopSound(soundTrue);
                stopSound(soundFalse);
                playSound(soundTrue);

                countOfFound++;
            }
            found = true;
        }
    }

    if (!found) {
        stopSound(soundTrue);
        stopSound(soundFalse);
        playSound(soundFalse);
    } else {
        $('#countCupcakes').val(countOfFound);
    }