I am writing a simple HTML5/JS on Google Sites to load and play an mp3 file from Google Drive. The code works on Firefox, Chrome and Safari (Windows, linux and macOS).
However, it does not work on Safari and Chrome (iOS 16). I am fully aware that Apple does not allow media autoplay. Therefore, I have included the button that provides the user's interface. I also tried the code with touchstart event (calling playAudio()). However, it did not work either.
I suspect that iOS does not work well with Google Drive!
I would appreciate your guidance!
<!DOCTYPE html>
<html>
<head>
<title>Play Audio on Button Touch</title>
</head>
<body>
<button id="play-button" onclick="playAudio()">Play Audio</button>
<audio id="audio" src="https://docs.google.com/uc?export=open&id=1Ufkirnaa5mw_TlSO2dTeMDgfE77asDtr"></audio>
<script>
function playAudio() {
var selectedplayer = document.getElementById("audio");
selectedplayer.play();
}
</script>
</body>
</html>