As @Unmitigated mentioned in the comment, user interaction is mandatory to play an audio. If you want to play the user interaction, modify the code as below
audio.addEventListener("canplaythrough", () => {
audio.play().catch(e => {
window.addEventListener('click', () => {
audio.play()
})
})
});
Edited
Add { once: true } to trigger only once.
audio.addEventListener("canplaythrough", () => {
audio.play().catch(e => {
window.addEventListener('click', () => {
audio.play()
}, { once: true })
})
});
As @Unmitigated mentioned in the comment, user interaction is mandatory to play an audio. If you want to play the user interaction, modify the code as below
audio.addEventListener("canplaythrough", () => {
audio.play().catch(e => {
window.addEventListener('click', () => {
audio.play()
})
})
});
Edited
Add { once: true } to trigger only once.
audio.addEventListener("canplaythrough", () => {
audio.play().catch(e => {
window.addEventListener('click', () => {
audio.play()
}, { once: true })
})
});
In order to be allowed to autoplay, either the user needs to have interacted with the page or the audio/video needs to be muted.
You can try:
let audio = new Audio('a_file');
audio.muted = true;
audio.addEventListener("canplaythrough", () => {
audio.play()
});
Hello,
Im writing a wordpress plugin that monitors woocommerces shop_orders page. When a new order comes in the page is supposed to play a tada sound.
Everything is hooked into the shop_orders page in the admin. The idea is the user navigates to that page, every 30 seconds the page refreshes, during the refresh a filter is triggered and we check for the presence of a new order. This all works perfectly.
Now, when the new order is found, during this load we also output some javascript to play the notification sound:
if (($sounds) && (self::$new_order)) {
$plugin_dir = plugin_dir_url("mgd-woorestaurants-orderpickups/assets/") . "assets/tada.mp3";
echo "<script type='text/javascript'>let notifi= new Audio('$plugin_dir'); notifi.play();</script>";
}
I see the code in the page source, but no sound is every played. The console shows an error that reads:
"Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first."
I've read about the chrome policies for audio and video, and I cant seem to work out a way to get this audio file to play when a new order is found.
How do I set the browser to ignore its policies for this specific purpose?
Thanks in advance.
javascript - Is it possible to play audio without the user interact with the web before? how would I do that? - Stack Overflow
html - How to play background music in JavaScript without user interaction? - Stack Overflow
How to play audio autoplay without user interaction in - Help & Support - PlayCanvas Discussion
Audio Without User Interaction?
You can do it without html markup.
But keep in mind that audio file need to be load before the user minimize the screen. And the user have to interact (scroll, click, or any touch or click event) with document before minimize (as any autoplay feature).
Or you gonna have following error: Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first
Take a look to google about autoplay: https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
So if you try something like that it's will not work:
$(element).on('your-event', function(){
var audio = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3');
audio.play();
}
But this way should work
var audio = new Audio('https://file-examples-com.github.io/uploads/2017/11/file_example_MP3_700KB.mp3');
$(element).on('your-event', function(){
audio.play();
}
Here is a working example on codepen: https://codepen.io/zecka/pen/VwjxGbE
well you can user Howl library to play the sound with user interaction I will share you my code
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
HOWL CDN
<script src="https://cdnjs.cloudflare.com/ajax/libs/howler/2.1.2/howler.core.min.js">
setTimeout(() => {
var sound = new Howl({
src: ['{{ asset('assets/mp3/notification.mp3') }}']
});
sound.play();
}, 600);
I think the reason is that chrome and probably other browsers (firefox, edge, opera, etc.) don't want to surprise the user with a random sound. So as this thread explains, you need to first mute your audio and then you can play. After that you should be able to adjust the volume.
The thing is without user interaction(button click or something else) browser will not let you play an audio/video but you can disable the autoplay policy in google chrome.you can do that but there's almost no point of doing that because it will only work in your own browser but still if it helps. For ubuntu version -20.04
1. Open the terminal write sudo apt update
2. sudo apt install google-chrome
3 google-chrome --no-sandbox --autoplay-policy=no-user-gesture-required
We are installing the google-chrome package and then we are launching google chrome instance and removing sandbox feature which is chrome's security feature and removing autoplay-policy.
Source :- https://developer.chrome.com/blog/autoplay/
Hope it helps!!