I have a page that has no human interaction whatsoever. The page is blank and registers an input via scanning, so everytime the user scans something, a success sound is supposed to be played. I've added a hidden button to trigger everytime a scan is read, and it is supposed to trigger the sound.

The app is used on Tablets so mouseover will not work.

I simplified my code to play the sound on the page load as it follows:

My html:

<template>
  <div id="app" v-on:datainput="dataInput">
     <q-btn label="hiddenButton" @click="playsound" id="hiddenBtn" style="visibility: hidden" />
  </div>
</template>

My JS:

   import sound from 'file'    
   export const notifications = {
    data() {
       return { 
         audio: new Audio(sound), 
       }
    },
    methods: {
      playsound: function () { 
        this.audio.play();
      },
    },
    async mounted() { 
      document.getElementById("hiddenBtn").click();
    }
   }

When I load my page the sound does not work and I get the error :

Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first.

Is there a way to trigger the button the first time I load the page and play the sound with no human interaction?

I did try to mute the HTML but it did not work since I do not have a video or audio component in my html.