En el código, estoy generando un color aleatorio a partir de la matriz y quiero producir un sonido relacionado con él.

Aquí está el código javascript

 var gamePattern = []; var buttonColours = ["red", "blue", "green", "yellow"]; var randomChosenColour = buttonColours[nextSequence()]; gamePattern.push(randomChosenColour); function nextSequence() { return Math.floor(Math.random() * 4); } $("." + randomChosenColour).fadeOut(100).fadeIn(100); $("." + randomChosenColour).ready(function(){ var audio = new Audio("sounds/"+ randomChosenColour +".mp3"); audio.play(); });

aquí está el código html

 <div class="container"> <div lass="row"> <div type="button" id="green" class="btn green" > <!-- <audio id="sound" src="sounds/green.mp3"></audio> --> </div> <div type="button" id="red" class="btn red" > <!-- <audio id="sound" src="sounds/green.mp3"></audio> --> </div> </div> <div class="row"> <div type="button" id="yellow" class="btn yellow" > <!-- <audio id="sound" src="sounds/green.mp3"></audio> --> </div> <div type="button" id="blue" class="btn blue" > <!-- <audio id="sound" src="sounds/green.mp3"></audio> --> </div> </div> </div>

Intenté muchas formas de producir sonidos, pero recibo errores en la consola.

 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Cualquier ayuda aquí sería apreciada.