[whatwg] HTML Audio Element removal from DOM

Tue Jun 5 14:51:10 PDT 2012

On Wed, 18 Jan 2012, Michael A. Puls II wrote:
> On Tue, 17 Jan 2012 16:19:37 -0500, Charles Pritchard <chuck at jumis.com> wrote:
> 
> > When an <audio> element is removed from the DOM while playing, is that 
> > element paused? That seems to be the behavior in Chrome. I'm looking 
> > for clarification.
> 
> It's the behavior in Firefox and Opera too.
> 
> In both cases below, the audio is paused when removed from the document. 
> When added back it's still paused and when you call play(), it continues 
> playing from where it left off.
> 
> <!DOCTYPE html>
> <html lang="en">
>    <head>
>        <meta charset="utf-8">
>        <title></title>
>        <script>
>            window.addEventListener("DOMContentLoaded", function() {
>                var player = document.createElement("audio");
>                player.controls = true;
>                player.autoplay = true;
>                player.src = "test.oga";
>                document.body.appendChild(player);
>                setTimeout(function() {
>                    document.body.removeChild(player);
>                    setTimeout(function() {
>                        document.body.appendChild(player);
>                        player.play();
>                    }, 3000);
>                }, 7000);
>            }, false);
>        </script>
>    </head>
>    <body>
> 
>    </body>
> </html>
> 
> 
> <!DOCTYPE html>
> <html lang="en">
>    <head>
>        <meta charset="utf-8">
>        <title></title>
>        <script>
>            window.addEventListener("DOMContentLoaded", function() {
>                var player = document.getElementsByTagName("audio")[0];
>                setTimeout(function() {
>                    player = document.body.removeChild(player);
>                    setTimeout(function() {
>                        player = document.body.appendChild(player);
>                        player.play();
>                    }, 3000);
>                }, 7000);
>            }, false);
>        </script>
>    </head>
>    <body>
>        <audio controls autoplay src="test.oga"></audio>
>    </body>
> </html>

This is correct behaviour.

On Tue, 17 Jan 2012, Charles Pritchard wrote:
>
> The issue I'm having with webkit is with running play() immediately 
> after removeChild. Are you hearing an audible pause when doing so in 
> Opera and FF? I believe there should be no audible pause even though 
> there is an event pause and a loop/queue cycle.

It shouldn't play at all in that situation. At the time you call play(), 
the media element is still playing. It's only when the script ends that it 
pauses.

On Wed, 18 Jan 2012, Michael A. Puls II wrote:
>
> In that situation (shown below), I hear a very quick blip in both Opera and
> Chrome. In Firefox, I don't. In Firefox, it's completely seamless (as good as
> if it were never paused).
> 
> <!DOCTYPE html>
> <html lang="en">
>    <head>
>        <meta charset="utf-8">
>        <title></title>
>        <script>
>            window.addEventListener("DOMContentLoaded", function() {
>                var player = document.getElementsByTagName("audio")[0];
>                setTimeout(function() {
>                    player = document.body.removeChild(player);
>                    player.play();
>                }, 7000);
>            }, false);
>        </script>
>    </head>
>    <body>
>        <audio controls autoplay src="test.oga"></audio>
>    </body>
> </html>

This example should cause the audio to pause after 7 seconds.

On Wed, 18 Jan 2012, Simon Pieters wrote:
>
> We could change the spec so that play() sets a flag on the element that 
> the algorithm above checks before pausing the element, or some such, to 
> make the above do the intended.

What's the use case for removing an element from a document and not 
readding it and having it continue to play? Can't you just mark it 
"hidden" instead?

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'