HTML5 Audio tag refuses to stop playing, even after being removed?

Question

So I have this audio tag:

<audio src=".....mp3" autoplay id="aud"></audio>

And 20 seconds later I fire this code:

var obj=$('#aud')
obj[0].volume=0;
obj[0].pause();
obj.prop('volume',0);
obj.trigger('pause');
obj.attr('src','');
obj.remove();
console.log('REMOVED!!');

But after all of this, the audio is still playing??

The audio tag has been successfully removed by obj.remove(), but the audio goes on.

The console.log() logs correctly. I get no errors. But despite using several methods to mute, pause and remove the audio tag, the audio goes on.

Can anyone explain why?

I need to purge this audio with salt and flame. Any help will be most appreciated, this is slowly sending me insane...

Answer 1

So I fiddled with this when writing this as an answer and I conclude the following:

Manually creating the audio tag with autoplay property causes it to play even before being added to the DOM tree 2 times(on older jquery implementations). Even after adding that element to the DOM tree, it will be usually impossible to stop both audio streams - prolly one of the streams gets disconnected from the element when second stream is played. Did not dig into that too deeply. I reproduced the issue here:

http://jsfiddle.net/2gaBs/3/

When you click Create w/o autoplay button you can pause it properly, but when you click Create autoplay it will start immedietally (even before adding to the DOM tree) 2 times! You probably didn't notice the 2nd playback(neither did I) because when mp3 is on the same machine 2 audio streams are almost perfectly in sync. Pressing Try stop will stop one of the audio streams (you need to wait 5 seconds, note the setTimeout).

Also note that if you switch to jQuery ver to 1.8.3 or above this issue no longer occurs, so it seems that both of us were working on old jQuery libs that day^^

So 2 solutions are: update jquery version to 1.8.3 or above, or create the element without autoplay property and start it later.