I am trying to clone this particular website called 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 where it says that there was a policy change for 'Auto play Policy Changes'. But I can't quite figure out how to apply the given example in my code as I am using objects and howler.js.
error: https://i.sstatic.net/oKatq.png
I have tried not using objects and directly defining all key press events inside keyDown function using if..else and it works but it gets confusing and messy.
<!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>
I expect that the sounds start playing while I can still make use of objects and howler.js
In function onkeyDown add this line:
keyData[event.key].sound.play();
Hope this will work.