audio.play() 无需等待前一个声音结束？

如何解决audio.play() 无需等待前一个声音结束？

我正在编写一个游戏，我有一个射击机制的粗略草稿，但我想让它播放声音，有时它不会播放，因为它已经是，无论我制作的时间有多短声音，它仍然在某种程度上这样做。我的代码在下面，有什么建议吗？我希望它能够随时播放，而不管之前执行的 audio.play() 方法的状态如何，我尝试将 audio.play() 方法放在一个单独的函数中并调用该函数，但它什么都没做。

var canvas = document.getElementById('imlonely');
var ctx = canvas.getContext('2d');
var crosshairs = {
x: 250,y: 250,r: 20,s: 0,e: Math.PI * 2 
} 
var lives = 5;
var audio = new Audio('https://freesound.org/people/RSilveira_88/sounds/216317/download/216317__rsilveira-88__gunshot-09.wav');
function soundGo(){
audio.play();  
}
var l1 = crosshairs.x - 20
var l2 = crosshairs.x + 20
var l3 = crosshairs.y - 20
var l4 = crosshairs.y + 20
var l5 = crosshairs.y;
var l6 = crosshairs.x
var e1 = {
x: 20,y: 20,w: 20,h: 20
}
var e2 = {
x: 20,h: 20
}
function renderEnemy(){
ctx.fillRect(e1.x,e1.y,e1.w,e1.w);
if(e1.w<300){
e1.w = e1.w + e1.w/200;
}
ctx.fillRect(e2.x,e2.y,e2.w,e2.w);
if(e2.w<300){
e2.w = e1.w + e1.w/200;
}
else{
e1.w = 20;
generateEnemyOne(); 
lives--; 
}
}
function generateEnemyOne(){
e1.x = Math.floor(Math.random() * 500)
e1.y = Math.floor(Math.random() * 500)
}
generateEnemyOne()
function renderCrosshairs(){
  ctx.strokeStyle = 'crimson';
ctx.beginPath();
ctx.arc(crosshairs.x,crosshairs.y,crosshairs.r,crosshairs.s,crosshairs.e);
ctx.stroke();
ctx.moveto(l1,l5);
ctx.lineto(l2,l5);
ctx.stroke();
ctx.moveto(l6,l3);
ctx.lineto(l6,l4);
ctx.stroke();
l1 = crosshairs.x - 20
l2 = crosshairs.x + 20
 l3 = crosshairs.y - 20
 l4 = crosshairs.y + 20
 l5 = crosshairs.y;
l6 = crosshairs.x
}
function moveIt(event){
crosshairs.x = event.clientX;
crosshairs.y = event.clientY ;  
}




function draw(){
if (lives <= 0){
alert('game over');  
return;
}
  ctx.beginPath();
  ctx.clearRect(0,1000,1000)
renderEnemy();
renderCrosshairs();
setTimeout(draw,2)
}
draw();
function shoot(){
soundGo();
}
canvas.addEventListener("mousemove",moveIt);
canvas.addEventListener("mousedown",shoot);

<!DOCTYPE html>
<html>
  <canvas id = 'imlonely' width = '500' height = '500' style = 'border-style: solid;'> Sorry,there was a problem dispaying the canvas. Maybe your browser doesen't support the canvas element,maybe it's something else.</canvas>
    <script src="script.js"></script>
</html>

解决方法

单个音频不能在多个实例中播放。音频必须结束才能再次播放。

您必须替换此代码：

var audio = new Audio('https://freesound.org/people/RSilveira_88/sounds/216317/download/216317__rsilveira-88__gunshot-09.wav');
function soundGo(){
audio.play();  
}

有了这个：

// In each instance,a new audio is created.
function soundGo(){
  var audio = new Audio('https://freesound.org/people/RSilveira_88/sounds/216317/download/216317__rsilveira-88__gunshot-09.wav');
  audio.play();  
}

如果每次都在本地创建一个新音频，它会立即播放。

audio.play() 无需等待前一个声音结束？

如何解决audio.play() 无需等待前一个声音结束？

解决方法

相关推荐