basically I have this javascript that presents multiple audio as shown below.

var audio = [];

audio["blue"] = new Audio("piano-blue.wav.mp3");
audio["red"] = new Audio("piano-red.wav.mp3");

I use the audio to be heard when a specific image is clicked

         document.querySelector(".red-wheel").addEventListener("click", () => {
            document.querySelector(".red-wheel").innerHTML = "<img src='red-light.svg.svg'>";
            setTimeout(setWheels, 500);
            console.log("red");
            playColor("red");
            
          });

          document.querySelector(".blue-wheel").addEventListener("click", () => {
              document.querySelector(".blue-wheel").innerHTML = "<img src='blue-light.svg.svg'>";
              setTimeout(setWheels, 500);
              console.log("blue");
              playColor("blue");
              
          });

The playColour() function is presented below

 function playColor(color) {
            audio[color].load();
            audio[color].play();
        }

When checking the result the sound is heard which is great but the error is found - Uncaught (in promise) DOMException: The play() request was interrupted by a new load request.