Warum kann JavaScript keine .play()-Audiodateien auf der iPhone-Safari verwenden?

Ich habe eine JavaScript-Web-App, die regelmäßig etwas Audio abspielt:

var SOUND_SUCCESS = new Audio('success.mp3');
SOUND_SUCCESS.play();

Dies funktioniert hervorragend auf Desktop-Browsern (getestet in Edge und Chrome), aber es spielt nicht auf Safari auf dem iPhone.

Ich habe mich in Stack Overflow umgesehen und einige Antworten von vor ein paar Jahren gefunden, dass es nicht möglich ist, Audio von Safari abzuspielen, es sei denn, Sie befinden sich in diesem Vollbild-Player. Ist das immer noch so?

Um die Antwort von xingliang cai zu ergänzen, hier ist ein Codebeispiel, das ich für mich arbeiten lassen muss (unten bearbeitet, um auf iOS14 zu funktionieren, danke @AndrewL!):

const soundEffect = new Audio();
soundEffect.autoplay = true;

// onClick of first interaction on page before I need the sounds
// (This is a tiny MP3 file that is silent and extremely short - retrieved from https://bigsoundbank.com and then modified)
soundEffect.src = "data:audio/mpeg;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFTb25vdGhlcXVlLm9yZwBURU5DAAAAHQAAA1N3aXRjaCBQbHVzIMKpIE5DSCBTb2Z0d2FyZQBUSVQyAAAABgAAAzIyMzUAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAAAAD/80DEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQsRbAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQMSkAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src="https://stackoverflow.com/questions/31776548/path/to/file.mp3";

iOS deaktiviert die automatische Wiedergabe und erfordert stattdessen, dass die Wiedergabe als Teil einer Benutzerinteraktion initiiert wird (z. B. können Sie die Wiedergabe innerhalb eines Touchstart-Listeners starten). Es gibt eine kleine Dokumentation darüber auf Entwicklerdokumentation von Apple. Es gibt auch diesen Artikel Überwindung von iOS-HTML5-Audioeinschränkungen auf der Entwickler-Website von IBM mit Beispielen und weiteren Details.

IOS auf Mobilgeräten deaktiviert die automatische Tonwiedergabe standardmäßig. Also um dieses Problem zu umgehen. Sie könnten irgendwo auf der Seite eine Schaltfläche zum Aktivieren / Deaktivieren platzieren und mithilfe eines Audioelements einen Ton abspielen (“audioElement“), wenn der Benutzer auf die Schaltfläche switch klickt.

Danach das gleiche “audioElement” kann verwendet werden, um zukünftige Sounds abzuspielen, indem seine “Quelle“attributiere und nenne es”abspielen()“-Methode ohne weitere Benutzerinteraktion.

Um die Lösung von @ user2415116 in iOS 14 zum Laufen zu bringen, habe ich Folgendes getan:

const soundEffect = new Audio();
soundEffect.autoplay = true;

// onClick of first interaction on page before I need the sounds
// (This is a tiny MP3 file that is silent and extremely short - retrieved from https://bigsoundbank.com and then modified)
soundEffect.src = "data:audio/mpeg;base64,SUQzBAAAAAABEVRYWFgAAAAtAAADY29tbWVudABCaWdTb3VuZEJhbmsuY29tIC8gTGFTb25vdGhlcXVlLm9yZwBURU5DAAAAHQAAA1N3aXRjaCBQbHVzIMKpIE5DSCBTb2Z0d2FyZQBUSVQyAAAABgAAAzIyMzUAVFNTRQAAAA8AAANMYXZmNTcuODMuMTAwAAAAAAAAAAAAAAD/80DEAAAAA0gAAAAATEFNRTMuMTAwVVVVVVVVVVVVVUxBTUUzLjEwMFVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQsRbAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVf/zQMSkAAADSAAAAABVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVVV";

// later on when you actually want to play a sound at any point without user interaction
soundEffect.src="https://stackoverflow.com/questions/31776548/path/to/file.mp3";

Ich habe das verwendet:

useEffect(() => {
  window.addEventListener('touchstart', () => {
    document.getElementById('audio').muted = false
    document.getElementById('audio').play()
  })
})

Sobald der Benutzer scrollt, wird der Ton abgespielt

Sehr alte Frage, aber etwas, das einigen Leuten helfen könnte, in meinem Fall (natürlich ist dies möglicherweise nicht in allen Fällen möglich), hat es geholfen, alle Audiodateien für 1 Millisekunde abzuspielen und dann anzuhalten. Wenn Sie danach die Wiedergabe des Audios fortsetzen, funktioniert es ohne Probleme.

   playButton.addEventListener('click', function(){
      introVid.play();
      audioPlayers[0].play(); //every array element is constructed using new Audio("yourlink");
      audioPlayers[1].play();
      audioPlayers[2].play();
      audioPlayers[3].play();
      window.setTimeout(function(){
        audioPlayers[0].pause();
        audioPlayers[1].pause();
        audioPlayers[2].pause();
        audioPlayers[3].pause();
      },1);
    })

Haha, ich habe es so überlistet.

Legen Sie die Seite ein Audio-Tag mit Autoplay (true)

<audio id="beep" src={Assets.SOUND_BEEP} autoPlay />

Der Ton wird abgespielt, sobald das Element montiert ist. (Auch auf Safari iOS)

Dann scheint es, dass Sie es jederzeit wieder spielen können, indem Sie anrufen

document.getElementById('beep').play();

Aber jetzt sagst du vielleicht, aber ich möchte den Sound nicht als Autoplay abspielen.

Ja, ich habe es überlistet, das zu setzen “stumm” Eigenschaft darauf und setze es dann beim Spielen auf false.

<audio id="beep" src={Assets.SOUND_BEEP} autoPlay muted />

Und Spiel:

document.getElementById('beep').muted = false;
document.getElementById('beep').play();