HTML5音频播放器仅在双击后才能在移动浏览器中播放

Question

I am creating a custom HTML5 audio player. The player plays audio when the user clicks a button.

$("#buttonPlay").click(function () {
var player = document.getElementById("player");
player.play();
});

It works fine on desktop, but requires a double-click on mobile browsers. What could the problem be?

Answer 1

Try to use like below:

var btnplay = document.getElementById("buttonPlay");
var player = document.getElementById("player");

btnplay.addEventListener('touchstart', function(ev) {
   player.play();
})