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;
   }
 }

Ps.：我也是在onTouch上完成的

现在，在 android 设备上它可以工作，每次点击都会播放音频，而在 iOS 上它只能在第一次点击时工作？ 有一个解决方案：我试过这个： Allow audio.play() on safari for chat app但它不起作用。

Answer 1

单击按钮时，执行 function 并播放声音。 但是在 mouseup 事件中，再次执行 function 并停止声音。 您是否尝试过使用 onclick，所以 function 只能运行一次？ 还是应该只在按下按钮时播放声音？

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

Answer 2

我做了一些测试，在实践中它可以工作，但不像 android 那样立即生效......我的问题是我使用的音频太短，持续一秒钟。 也许甚至更少..，所以在 iphone 上它没有时间播放这么短的声音，而且它似乎只播放一次，但实际上它总是只在其他时间听不到它没有时间停下来重新播放，我尝试插入更长的音频，它可以工作。 问题是，如果我在按钮上快速单击几次，我得到的结果与在 android 上的结果不同。 即，停止音频，重置时间并再次播放。 我不知道，因为但似乎 iphone 被延迟并且无法做到，而在 android 设备上是的。