ios上的音频无法正常工作，它只能在第一次工作

Question

我在IOS设备上播放音频时遇到问题。。。我使用的代码是激活/禁用声音：

<audio id="audio">
<source src="sounds/fart.mp3" type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
<button id="audio-btn" class="audio-btn" onclick="toggleAudio()">
<img id="audio-icon" src="img/sound-off.webp" alt="audio_play/pause" />
</button>

let audioIconPlay = false;
function toggleAudio() {
const audioIcon = document.getElementById('audio-icon');
audio.autoplay = true;
audioIconPlay = !audioIconPlay;
if (audioIconPlay) {
audioIcon.src = 'img/sound-on.webp';
} else {
audioIcon.src = 'img/sound-off.webp';
}
}

当我点击按钮播放音频时：

<button
onmousedown="playMyAudio()"
onmouseup="playMyAudio()"
>
Fart
</button>
function playMyAudio() {
if (audioIconPlay && audio.paused) {
audio.play();
} else {
audio.pause();
audio.currentTime = 0;
}
}

附言：我在onTouch和上都做了

现在，在安卓设备上，它可以工作，每次点击都会播放音频，而在iOS上，它只在第一次点击时工作！有解决方案吗？我试过这样做：允许聊天应用程序的safari上的audio.play((但它不起作用。

Answer 1

单击按钮时，将执行该功能并播放声音。但在mouseup事件中，该函数会再次执行，然后声音会停止。你有没有用onclick尝试过，所以这个函数只会运行一次？还是应该只在按下按钮时播放声音？

顺便说一下，触摸屏设备上onmousedown的等价物是ontouchstart，而onmouseup的等价物则是ontouchend。但我建议用onclick。

Answer 2

我做了一些测试，在实践中它可以工作，但不像android那样立即。。。。我的问题是我使用的音频太短！它会持续一秒钟，甚至更短。。。因此，在iphone上，它没有时间播放这么短的声音，而且似乎只播放一次，但事实上，它总是这样做，只是在其他时候听不到，因为它没有必要的时间停下来重新播放！我试着插入一个更长的音频，它起作用了，问题是，如果我快速点击按钮几次，我不会得到与我在android上相同的结果，即停止音频，重置时间，然后再次播放，我不知道，因为但似乎iphone被延迟了，无法做到这一点，而在android设备上是的。