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 設備上是的。