Tengo una página que no tiene interacción humana alguna. La página está en blanco y registra una entrada a través del escaneo, por lo que cada vez que el usuario escanea algo, se supone que se reproduce un sonido de éxito. He agregado un botón oculto para activar cada vez que se lee un escaneo, y se supone que debe activar el sonido.

La aplicación se usa en tabletas, por lo que el mouseover no funcionará.

Simplifiqué mi código para reproducir el sonido en la carga de la página de la siguiente manera:

Mi html:

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

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

Cuando cargo mi página, el sonido no funciona y me sale el error:

No detectada (en promesa) DOMException: play() falló porque el usuario no interactuó primero con el documento.

¿Hay alguna manera de activar el botón la primera vez que cargo la página y reproduzco el sonido sin interacción humana?

Intenté silenciar el HTML pero no funcionó porque no tengo un componente de video o audio en mi html.