I'm experiencing an occasional issue with the pause() command of <audio> elements not functioning... Codepen example: https://codepen.io/hartman/pen/ZEameXW?editors=1111 The reproduction conditions are as follows: 1. The audio sample needs to be supported by the device. MP3 qualifies. 2. The audio sample uses preload="none" 3. The audio sample is played. 4. The audio sample is paused from the promise of the play 5. The audio sample keeps playing, even thought the pause() was sent. Things I have noticed: 1. I can only trigger it on the initial playback when first opening the page. This might indicate that the load phase is very important, once in the resource cache, I can no longer trigger it (play not delayed because of the load?) 2. The load phase is probably also why preload="none" is a good trigger for this. 3. I've only been able to reproduce with mp3, but this might be a coincidence as I haven't tested a lot of mp4. 4. This happens quite often, say 1 in 10 or 1 in 20 or so playbacks, but definitely not all the time. 5. My older hardware like my 2015 MacBook Pro and my iPhone SE seem to trigger it more easily than my new 2021 MacBook Pro for instance, again indicating something about a racecondition due to performance. 6. Similarly, my reduced testcase on codepen seems to trigger this left often then a full blown website like https://commons.wikimedia.org/wiki/File:Armstrong_Small_Step.ogg (if this fails, you might hear the audio clip being played twice, until I have applied the workaround to production). 7. Wrapping the pause inside the play promise with a setTimeout, kicking it to the next cycle, also seems to fix this behaviour.
Linking back to Wikimedia issue: https://phabricator.wikimedia.org/T301740
<rdar://problem/89966322>
Created attachment 462751 [details] Demonstrates Safari seemingly unpausing an audio element on its own I believe I have a self-contained test case that reproduces the "audio playing twice" issue after an initial audio element is paused.