Tengo una aplicación muy simple que mostrará el audio de escritura cuando el usuario escriba algo y detendrá el audio cuando el usuario deje de escribir.
Aquí está el código:
let audio = new Audio('https://www.fesliyanstudios.com/play-mp3/768') let timeout; let input = document.querySelector('input') input.onkeydown=function(){ window.clearTimeout(timeout) audio.play() } input.onkeyup= function(){ window.clearTimeout(timeout) timeout = setTimeout(()=>{audio.pause()},1000); } <input></input>Sin embargo, descubrí que hay una tecla de inicio/detención de audio/video (tecla F8 en algunos teclados) en mi teclado y si el usuario presiona esta tecla, se reproducirá el audio de escritura. "
¿Hay alguna manera de que pueda evitar que esto suceda?
¡Gracias por cualquier respuesta!
¡Esta es una buena pregunta! La respuesta es que el navegador asume que cualquier cosa en un elemento multimedia estándar se puede controlar externamente, por lo que el control de reproducción/pausa se puede realizar mediante teclados, controladores Bluetooth, controles de pantalla de bloqueo, etc.
Una solución es usar Web Audio API para la reproducción. De todos modos, esto probablemente sea mejor para su caso de uso, ya que le brinda más control sobre el almacenamiento en búfer y el tiempo de su muestra de audio.
Primero obtendrá los datos de la fuente de audio, los decodificará en un búfer PCM y luego los reproducirá a través de un AudioBufferSourceNode . Código no probado, pero intente algo como esto en una función asíncrona :
// Set up audio context and source node const audioContext = new AudioContext(); const sourceNode = audioContext.createBufferSource(); sourceNode.connect(audioContext.destination); // Make HTTP request for audio data const res = await fetch('https://www.fesliyanstudios.com/play-mp3/768'); if (!res.ok) { throw res.status; } // Get the raw data and decode it to PCM sourceNode.buffer = await audioContext.decodeAudioData( await res.arrayBuffer() ); // Start playback sourceNode.start(); Tenga en cuenta que solo debe crear este contexto de audio cuando haya interacción del usuario. Si desea crearlo antes, siempre puede llamar a .resume() con la interacción del usuario. Esto es necesario para evitar problemas con la política de reproducción automática.
¡Espero que esto te ayude a empezar!