HTML5 <audio> Element with Custom Controls configuration guide in Safari on iOS
I recently switched to Could someone explain I'm stuck on something that should probably be simple... I've been banging my head against this for hours. I'm working on a web application that utilizes the HTML5 `<audio>` element to play music tracks. I've implemented custom controls using JavaScript, but I'm working with an scenario where the play and pause buttons do not respond properly on Safari for iOS. When I tap the buttons, there's no behavior in the console, but the audio does not start or stop as expected. I've tested this on both iOS 15.4 and 16.0, and it works fine on desktop browsers. Here’s a simplified version of my implementation: ```html <audio id="myAudio"> <source src="my-audio-file.mp3" type="audio/mpeg"> Your browser does not support the audio element. </audio> <button id="playBtn">Play</button> <button id="pauseBtn">Pause</button> ``` ```javascript const audio = document.getElementById('myAudio'); const playBtn = document.getElementById('playBtn'); const pauseBtn = document.getElementById('pauseBtn'); playBtn.addEventListener('click', () => { audio.play(); }); pauseBtn.addEventListener('click', () => { audio.pause(); }); ``` I’ve verified that the audio source is valid and plays normally when accessed directly. I’ve also ensured that the `<audio>` element is not being blocked by any content security policies or browser settings. Another thing I’ve noticed is that the buttons are responsive; they change color when tapped, but the audio doesn’t play. Is there any known scenario with the `<audio>` element and event listeners on iOS? I've read through the Apple developer documentation but didn’t find anything that clearly addresses this. Any insights on how to make the custom controls work correctly would be greatly appreciated! Am I missing something obvious? Any advice would be much appreciated. Has anyone else encountered this?