JavaScript is an ideal programming language best known for creating interactivity across websites as well applications. A website that users see when they visit, they see the interactive design with a better user interface and user experience. All this that they see has multiple programs in JavaScript in the backend that programmers spend time to create it. It is a language that keeps developers and programmers hooked by offering a number of features and updated version that makes the programming simpler. JavaScript programming is always fun when you know how to tackle the programs. The case is a bit different for beginners as they are just in the initial phase of learning JavaScript. They often encounter errors, and “uncaught in Promise DOM Exception failed to load because no supported source was found” is of one those.
When you see this error message popping up, don’t panic as we are here to assist you with the best solutions to remove the error. Let’s figure out how the error shows up
How the error occurs
When you try a project to play an audio file in wav format in the browser, it doesn’t work in the Chrome browser. Check out the code that results in the error message
<script>
window.onload = function () { document.getElementById("audio").play(); }
window.addEventListener("load", function () { document.getElementById("audio").play(); });
</script>
<body>
<audio id='audio' controls autoplay>
<source src="Sounds/DPM317.wav" type="audio/wav" />
Your browser does not support the audio element.
</audio>
</body>You get the following exception in return
Uncaught (in promise) DOMException: Failed to load because no supported source was foundSolutions To Handle the Error “uncaught in Promise DOM Exception failed to load because no supported source was found”
The solutions we are going to highlight are ideal for solving the error warning. Have a look
Solution 1
Applying a code can help you remove the promise DOM exception warning. A <audio> or <video> is called by a play() that results in a promise. The promise is fulfilled if your playback succeeds. In case the playback fails, the promise doesn’t approve, which shows an error warning. Check out the code to solve the error
var playPromise = document.querySelector('video').play();
// In browsers that don’t yet support this functionality,
// playPromise won’t be defined.
if (playPromise !== undefined) {
playPromise.then(function() {
// Automatic playback started!
}).catch(function(error) {
// Automatic playback failed.
// Show a UI element to let the user manually start playback.
});
}Solution 2
The catch block using a callback can also help you fix the error efficiently. Check out the code
document.getElementById("audio").play().catch(function() {
// do something
});Conclusion
We discussed solutions that are effective when it comes to handling the error “uncaught in Promise DOM Exception failed to load because no supported source was found”. Both solutions can fix the error. So, it’s on you to choose the one that fits your project’s needs or you can also try both one by one.
I hope it helps!