I am creating a website and I would like to be able to play audio on various browsers. I am getting the two errors above on Safari and Chrome respectively on my deployed site, but audio plays fine locally. Here are the full errors:
(Safari)Unhandled Promise Rejection: NotSupportedError: The operation is not supported.Unhandled Promise Rejection: AbortError: The operation was aborted.
(Chrome)Uncaught (in promise) DOMException: Failed to load because no supported source was found.
When I tried to run my app locally, the audio failed until I implemented the following workaround: I included a button that was necessary to access the site and effectively did
viewSiteButton.addEventListener('click', f);
function f(){
silentSound.play();
}
where silentSound is an HTMLAudioElement initialized (in another file, then exported) via
let silentSound = new Audio("Sounds/silence.wav");
silentSound.autoplay="";
silentSound.muted="";
silentSound.playsinline=""
silentSound.load();
(I don't know what any of the assignments to "" do.)
The app has been tested both with and without the last line that attempts to load the sound. Basically I make the user click a button which has an onClick that plays a silentSound, which locally opened the door for me to autoplay all sorts of sounds. However, once deployed I get the above errors when I even try to play silentSound onclick. I have tried a lot of stuff including replacing the body of "f", the function from before, with
var playPromise = silentSound.play();
if (playPromise !== undefined)
{playPromise.then(function() {// Automatic playback started!}).catch(
function(error) {
console.log(error);
console.log("try to reload");
silentSound.load();
silentSound.play();}
);
(from Audio player returns Uncaught (In promise): (DOMException) The element has no supported sources ) and have glanced at basically every stack overflow article that you can get to by searching one of the three errors above. I will note that the abort error (see above) only showed up once I tried to handle the promise rejection error as in the code block directly above this block of text. To be concise, I believe that most of the answers I found online didn't run into the particular issue that I'm running into where the audio works locally but not once deployed. I deployed via netlify and can share a link to my site if that would help (not sure on the rules surrounding this.) Any help is appreciated.
UPDATE: I don't know what I changed, but now, any sound generated by onclick still generates the
Unhandled Promise Rejection: NotSupportedError: The operation is not supported.
error, but now sounds not directly generated as an onclick event but rather generated as a response to the server create an
Unhandled Promise Rejection: NotAllowedError: The request is not allowed by the user agent or the platform in the current context, possibly because the user denied permission.
error. I had not seen this second error prior to this edit. I have tried initializing the audio events in my html file (and retrieving them via document.getElementById) rather than via the new Audio() constructor; this doesn't fix the issue.
