如何在 JavaScript 中修复 'HTML 5 Audio pool exhausted, returning potentially locked audio object'？

Question

我正在尝试克隆这个名为 patatap.com as I am learning JavaScript. But i keep getting this error that I don't know how to solve it. It directs me to a google website 的特定网站，其中显示 'Auto play Policy Changes' 的政策发生了变化。但是我不太清楚如何在我的代码中应用给定的示例，因为我正在使用对象和 howler.js.

错误： https://i.imgur.com/oybV1Vw.png

我试过不使用对象，而是使用 if..else 直接在 keyDown 函数中定义所有按键事件，它有效，但它变得混乱和混乱。

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Circles</title>
<link rel="stylesheet" href="assets/css/circles.css">
<script type="text/javascript" src="assets/lib/paper-full.js"></script>
<script type="text/javascript" src="assets/lib/howler.js"></script>
<script type="text/paperscript" canvas="canvas">
var circles = [];
var keyData = {
  a:{
    color: "purple",
    sound: new Howl({
      src: ['assets/sounds/bubbles.mp3'],
      html5:true
    })
  },
  s:{
    color: "green",
    sound:new Howl({
      src:['assets/sounds/clay.mp3'],
      html5:true
    })
  },
  d:{
    color:"yellow",
    sound:new Howl({
      src:['assets/sounds/confetti.mp3'],
      html5:true
    })
  }
}
function onKeyDown(event){
  if(keyData[event.key]){
    var maxPoint = new Point(view.size.width, view.size.height);
    var randomPoint = Point.random();
    var point = maxPoint * randomPoint;
    var newCircle = new Path.Circle(point, 500);
    newCircle.fillColor=keyData[event.key].color;
    circles.push(newCircle);
  }
}
function onFrame(event){
  for(var i = 0; i < circles.length; i++) {
    circles[i].fillColor.hue+=2;
    circles[i].scale(.9);
  }
}
</script>
</head>
<body>
<canvas id="canvas" resize></canvas>
</body>
</html>

我希望在我仍然可以使用对象时开始播放声音 howler.js

Answer 1

在函数 onkeyDown 中添加这一行：

keyData[event.key].sound.play();

希望这会奏效。

如何在 JavaScript 中修复 'HTML 5 Audio pool exhausted, returning potentially locked audio object'？

How to fix 'HTML 5 Audio pool exhausted, returning potentially locked audio object' in JavaScript?

html

javascript

css

clone

howler.js