Estoy tratando de usar la función onClick para hacer que un botón reproduzca un archivo de audio y luego deshabilitarlo después de un período de tiempo específico (para alinearlo con el final del archivo de audio). Básicamente, estoy tratando de configurar una cosa al estilo de Misión Imposible donde, cuando se hace clic en el botón, se reproduce el archivo de audio y al final de la grabación, el botón se desactiva (el mensaje "autodestrucción"). Puedo hacer que el archivo se reproduzca, pero no puedo averiguar cómo hacer que el botón se deshabilite usando el código de secuencia de comandos. Esto es lo que tengo hasta ahora. document.getElementById("briefingButton").this.disabled="true" y document.getElementById("briefingButton").style.display="none" y ninguno funciona.
<p id="briefingButton"><input type="button" value="Click for briefing" onclick="playMusic(); disableButton()" /> <script> function playMusic(){ var music = new Audio('/Users/devonhunt/Documents/ADVENTURE WEDDING/Mission briefings/dom mk1.mp3'); music.play(); } setTimeout(function disableButton() { document.getElementById("briefingButton").this.disabled="true"; }, 1080) </script></p>En primer lugar, su función con nombre disableButton no se nombra en el ámbito global. Es un poco extraño, pero no podría decirte exactamente en qué ámbito está; sin embargo, puedo decirles que no es global. Consulte aquí para obtener más información sobre los alcances .
Entonces, lo primero que debe hacer es eliminar el botón de desactivación del tiempo de espera y tenerlo en el mismo alcance que playMusic .
En segundo lugar, simplemente use la función del botón de desactivación para llamar a setTimeout con el primer argumento como una función anónima que desactiva el botón, así:
function disableButton() { setTimeout(function () { document.getElementById("briefingButton").this.disabled = "true"; }, 1080) }En tercer lugar, no existe la propiedad "this" en su objeto de documento de entrada (hablaremos más sobre esto más adelante), por lo que es mejor simplemente eliminarlo, dejándonos con:
document.getElementById("briefingButton").disabled = "true"; En cuarto lugar, el valor true es del tipo de datos primitivo booleano en javascript, por lo que simplemente debe eliminar las comillas y asignar el valor a true sin las comillas dejándonos con:
document.getElementById("briefingButton").disabled = true; Por último, su html está equivocado. Su id está en su etiqueta <p> , por lo que cuando llama a document.getElementById , termina intentando deshabilitar una etiqueta <p> . Debe identificar su etiqueta de input si desea que funcione correctamente. Como tal, debería verse como:
<input id="briefingButton" value="Click for briefing" onclick="playMusic(); disableButton()" /> Una cosa que me gustaría mencionar además es que no es una convención típica usar una etiqueta de script dentro de una etiqueta p (aunque esto es técnicamente permisible. Después de todo, HTML es el salvaje oeste de los lenguajes de marcado). Por lo general, verá las etiquetas de script anidadas en un nivel de profundidad en la etiqueta del cuerpo debajo de todas las demás etiquetas.
Además, hay una etiqueta de botón en html si desea usarla en su lugar. Eso se vería así:
<button id="briefingButton"onclick="playMusic(); disableButton()">Click for briefing</button> Además, si sabe que desea deshabilitarlo después de que la música haya terminado de reproducirse, puede simplemente incorporar la llamada a la función setTimeout en su función de reproducción de música y usar la duración de los medios como el valor de tiempo de espera de la siguiente manera:
function playMusic() { var music = new Audio('/Users/devonhunt/Documents/ADVENTURE WEDDING/Mission briefings/dom mk1.mp3'); music.play(); setTimeout(function () { document.getElementById("briefingButton").disabled = true; }, music.duration * 1000) // times 1000 because it gives you the duration in seconds and setTimeout take milliseconds as an argument }No estoy muy familiarizado con el funcionamiento de la API de HTMLMediaElement, pero puedo brindarle una solución general para su problema:
<p><input type="button" id="briefingButton" value="Click for briefing" onclick="playMusic()" /></p> <script> function playMusic() { var music = new Audio('/Users/devonhunt/Documents/ADVENTURE WEDDING/Mission briefings/dom mk1.mp3'); music.play(); let timer = setTimeout(function () { document.getElementById("briefingButton").disabled="true"; }, 1080) } </script>Puede realizar las acciones que desee en 1 función, por lo que me deshice de "disableButton ()" de la propiedad onClick en línea.
Su función setTimeout no se configuró correctamente. Tienes que ponerlo dentro de una variable (Ej: let timer = setTimeout(callback, time);) Estabas intentando llamar a la función de devolución de llamada setTimeout (disableButton()) directamente, pero tienes que llamar a la variable en la que la configuraste .
Puse la función setTimeout dentro de la función playMusic(). Ahora, cuando llama a la función, su música se reproduce y luego se activa setTimeout, lo que deshabilitará el botón después de 1080 ms (suponiendo que ese sea el tiempo de reproducción de la música).
Intentabas deshabilitar el botón escribiendo element.THIS.disabled = true . No necesita ESTA palabra, eso generará un error. Solo element.disabled = true es bueno.
Su selector de identificación apuntaba a la etiqueta p, por lo que estaba deshabilitando la etiqueta p y no el botón. Entonces puse la identificación dentro de la etiqueta del botón. También saqué el script de la etiqueta p y lo puse después. Es más convencional de esa manera.
No pude probar la parte de audio del código, pero esto debería funcionar :)