2015-02-23 80 views
0

我在ie,ff和safari上播放聲音時遇到問題。只有鉻的作品。 我想在畫布中點擊時播放聲音。我有兩個聲音。 但聲音只適用於谷歌瀏覽器。ClickEvent上的JavaScript聲音僅適用於谷歌瀏覽器

的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); 
} 
}); 
+0

檢查控制檯中是否有錯誤(如果有)。 – Jai 2015-02-23 09:44:22

+0

你能告訴我變量'''soundTrue'''和''''soundFalse'''是什麼?如果他們是JQuery對象,你可以嘗試'''sound [0] .play()'''而不是''sound.trigger('play')''' – mido 2015-02-23 10:05:33

+0

/*加載聲音*/ soundTrue = $ ( 「.soundTrue」); soundFalse = $(「。soundFalse」); soundTrue.trigger('load'); soundFalse.trigger('load'); – chuebert 2015-02-23 10:26:12

回答

0

這個作品在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); 
    } 
相關問題