Waarom kan JavaScript .play() audiobestanden niet op iPhone safari?

Ik heb een JavaScript-webapp die regelmatig wat audio afspeelt, zoals dit:

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

Dit werkt prima in desktopbrowsers (getest in Edge en Chrome), maar speelt niet af in Safari op iPhone.

Ik heb rond Stack Overflow gekeken en een paar jaar geleden antwoorden gevonden dat het niet mogelijk is om audio van Safari af te spelen, tenzij je in die schermvullende speler zit. Is dit nog steeds het geval?

Antwoord 1, autoriteit 100%

iOS schakelt automatisch afspelen uit, maar vereist dat het afspelen wordt gestart als onderdeel van een gebruikersinteractie (u kunt bijvoorbeeld het afspelen starten met een touchstart-luisteraar). Er is wat documentatie hierover op Apple’s ontwikkelaarsdocumentatie. Er is ook dit artikel De audiobeperkingen van iOS HTML5 overwinnenop de ontwikkelaarssite van IBM met voorbeelden en meer details.

Antwoord 2, autoriteit 98%

Om toe te voegen aan xingliang cai’s reactie, hier is een codevoorbeeld dat ik voor mij heb laten werken (hieronder bewerkt om te werken op iOS14, bedankt @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 = 'path/to/file.mp3';

Antwoord 3, autoriteit 37%

IOS op mobiel schakelt automatisch afspelen van geluid standaard uit. Dus om dit probleem te omzeilen. U kunt de schakelknop in-/uitschakelen ergens op de pagina plaatsen en wat geluid afspelen met een audio-element (“audioElement“) als de gebruiker op de knopschakelaar klikt.

Daarna kan hetzelfde “audioElement” worden gebruikt om toekomstige geluiden af ​​te spelen door het kenmerk “src” te wijzigen en het “play()” methode, zonder verdere gebruikersinteractie.

Antwoord 4, autoriteit 9%

Om de oplossing van @user2415116 te laten werken in iOS 14, deed ik dit:

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 = 'path/to/file.mp3';

Antwoord 5

Ik heb dit gebruikt:

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

Zodra de gebruiker scrolt, wordt het geluid afgespeeld

Antwoord 6

Heel oude vraag, maar iets dat sommige mensen zou kunnen helpen, in mijn geval (dit is natuurlijk niet in alle gevallen haalbaar), hielp het om alle audiobestanden 1 milliseconde af te spelen en ze vervolgens te pauzeren. Als u daarna het afspelen van de audio hervat, werkt het probleemloos.

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

Antwoord 7

Haha, ik was het zo te slim af.

Zet op de pagina de audiotag met autoplay (true)

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

Het zal het geluid afspelen zodra het element is gemonteerd. (Zelfs op Safari iOS)

Het lijkt erop dat je het opnieuw kunt spelen wanneer je maar wilt door te bellen

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

Maar nu zou je kunnen zeggen, maar ik wil het geluid niet als autoplay afspelen.

Ja, ik was het te slim af om de eigenschap “muted”daarop te zetten en deze vervolgens op false te zetten tijdens het spelen.

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

En speel:

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