Javascript alert block audio loop only in chrome

Question

i'm having a very strange issue here

i want to display an alert with javascript with an audio looping on the background

i managed to do it but it won't work in Chrome

it works perfectly in Firefox, Edge, IE but not Chrome -_-

in chrome the audio is looping only when you clic OK on the alert

Here is the code :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="description" content="popup alert">
<title>This is a popup alert</title>
<style type="text/css">
    body 
    {
        background-image: url('image.png');
        background-repeat: no-repeat;
        background-size: cover;
    }
</style>
</head>
<body>
<div align="center" id="text">
    <h1>title text</h1>
    <br>
    <h1>title 2 text 2</h1>
    <iframe src="silence.mp3" allow="autoplay" id="audio" 
style="display:none"></iframe>
    <audio controls autoplay loop style="display:none">
        <source src="0564.ogg" type="audio/ogg">
    </audio>


</div>
<script type="text/javascript">
    function popup()
    {
        window.alert("Hello");
    }
    window.onload = setTimeout("popup()", 500);
</script>
</body>
</html>

Can you tell me why Chrome is making it soooooo hard ?

thank you

I don't know exactly why Chrome has this, but I suspect the issue wouldn't occur if you used something other than the native javascript alert, which is crude and generally not used these days for alerts. It would be fairly simple to use some kind of jquery popup or other prebuilt solution. Like this for instance: https://codepen.io/timothylong/pen/HhAer/ — see sharper, Feb 20 '19 at 01:11
i want my code to be as light as possible ans without dependencies or external libraries — Gaston, Feb 20 '19 at 01:16

score 2 · Accepted Answer · edited Feb 20 '19 at 01:53

2

It is simply not possible:

In chrome, an alert pauses all processes. With that being said it is impossible to play a sound while an alert is happening on chrome.

Thanks to MarsAndBack I now have this tip:

There is an alternative to make your own prompt.

edited Feb 20 '19 at 01:53

see sharper

11,505
8
46
65

answered Feb 20 '19 at 01:17

Jaime Argila

408
3
13

So, the alternative is to build your own prompt (ie modal) allowing you more control over the experience. – Kalnode Feb 20 '19 at 01:26
in chrome ? so why is this working in firefox, edge and IE ? it's the same javascript alert, it should work the same way in all of them, with some tweeks at least – Gaston Feb 20 '19 at 01:31
1

The other browsers have slightly different rules when it comes to alerts. – Jaime Argila Feb 20 '19 at 01:33
1

Alerts aren't good to use @Gaston. They are very low level and no modern website or web app would use them because you can't style them or control their behaviour in any way, and because they can block everything, as you experienced. A pure CSS modal such as the one I gave you is lightweight and simple and you have much more flexibility with it. – see sharper Feb 20 '19 at 01:45
"it's the same javascript alert, it should work the same way in all of them, with some tweeks at least" Welcome to web development my friend. – see sharper Feb 20 '19 at 01:46
thank you for the solution @seesharper i'm going to try that to see if it works like i want too :) – Gaston Feb 20 '19 at 01:53

score 0 · Answer 2 · answered Feb 20 '19 at 12:07

0

so a jQuery alert will have the same issue with chrome ?

because i'm trying to do a jQuery alert and it's the same issue on my side ?

answered Feb 20 '19 at 12:07

Gaston

23
5

Javascript alert block audio loop only in chrome

2 Answers2