I am using howler.js in a simple component which renders a button to play an audio file
In the console I am receiving the below warning:
"The AudioContext was not allowed to start. It must be resumed (or created) after a user gesture on the page.
The sound is playing without any issue, but I cannot get rid of this warning
According to the warning a gesture needs to be performed, which I thought clicking the button would provide
Here is the code from the component:
import React from "react";
import { useState } from "react";
import { Howl } from "howler";
export const Sound = ({ name, path }) => {
const [playing, setPlaying] = useState(false);
const Sound = new Howl({
src: [path],
});
const playSound = () => {
setPlaying(true);
Sound.play();
};
return (
<div>
<button onClick={() => playSound()}>{name}</button>
<p>{playing ? "playing" : "Not playing"}</p>
</div>
);
};
I have checked multiple questions / forums / github issues but I can't find a solution
Any help or information on why this is showing up is appreciated!
Thanks!
I think in this case you can ignore this warning. It's triggered because howler.js creates an AudioContext upfront.
That AudioContext gets automatically resumed when calling play().
Therefore the warning is annoying but already taken care of by the authors of howler.js. But if you really want to get rid of the warning you can lazily initialize the Sound variable right before playing it.
// ...
let Sound;
const playSound = () => {
setPlaying(true);
if (Sound === undefined) {
Sound = new Howl({
src: [path]
});
}
Sound.play();
};
// ...
That should make the warning go away.