Bug 212117

Summary: Audio is not allowed to start in touchend/mouseup events if dragged on iOS
Product: WebKit Reporter: Jonathan Deutsch <jonathan>
Component: UI EventsAssignee: Nobody <webkit-unassigned>
Status: NEW    
Severity: Normal CC: eric.carlson, jer.noble, jonathan, webkit-bug-importer
Priority: P2 Keywords: InRadar
Version: Safari 13   
Hardware: iPhone / iPad   
OS: iOS 13   
Attachments:
Description Flags
Reproduction case (html + mp3) none

Jonathan Deutsch
Reported 2020-05-19 18:01:40 PDT
Created attachment 399795 [details] Reproduction case (html + mp3) Audio is typically allowed to play from user events like a touchend or mouseup. However, if the touchend is preceded with a finger movement (like a drag/swipe), then it will not allow the audio to playback. This is illustrated in this simple code: ``` <audio id="myaudio" src = "suspiro.mp3" controls></audio><br><br> <div id = "touchmebox" style = "width: 600px; height: 200px; background-color: #ccc">drag then touchend</div> <script> touchmebox.addEventListener("touchend", function () { // or "mouseup" myaudio.play(); console.log("" + window.event.type); }); </script> ``` (repro case with audio attached) If you just "tap" the touchmebox target, the audio will play. If you drag on the target (still ending on the touchmebox), audio will not be allowed to play. The event is definitely being fired evident from the console log. And of course, once there is an initial successful playback of the audio on the page, it unlocks it to work. This only occurs on iOS. Audio is allowed to playback in this manner on Desktop Safari (via mouseup, since there is no touchend). This affects documents made with Tumult Hype [https://tumult.com/hype/] since swiping actions use mouseup/touchend.
Attachments
Reproduction case (html + mp3) (13.11 KB, application/zip)
2020-05-19 18:01 PDT, Jonathan Deutsch
no flags
Radar WebKit Bug Importer
Comment 1 2020-05-20 16:59:45 PDT
Note You need to log in before you can comment on or make changes to this bug.