Play audio on android but not on iphone-CodePudding

I got application build in vue3. Whenever a qr-code is scanned it trigger a function that plays a sound. This works fine on android and on the web but not when using the browser on ios. I cannot figure out what is wrong. Anyone who has a clue?

  <qrcode-stream
    :camera="camera"
    @decode="onDecode"
    :torch="torch"
    :track="drawoutline"
  >
  </qrcode-stream>

Trigger the function:

async function onDecode(data) {
  new Audio(require("../assets/audio.mp3")).play();
}

If i trigger it with a button it plays the audio however but not on the fly when the qr-code is detected:

<q-btn
  label="play sound"
  @click="onDecode('Audio')"
></q-btn>

This is very much simplified. It works fine on android and on the web however but when running it on the web on ios it wont play any audio unless you press the button. Why?

CodePudding user response：

You can not automatically play audio on iOS without the user initiating it via an interaction. This is an iOS imposed limitation.

the JavaScript play() and load() methods are also inactive until the user initiates playback, unless the play() or load() method is triggered by user action. In other words, a user-initiated Play button works, but an onl oad="play()" event does not.