I'm trying to use the onClick function to make a button play an audio file and then disable after a specified length of time (to line up with the end of the audio file). Basically I'm trying to set up a Mission Impossible-esque thing where, when the button is clicked, the audio file plays and at the end of the recording the button disables (the message "self-destructing"). I can get the file to play but I can't figure out how to get the button to disable using the script code. This is what I've got so far. I tried both document.getElementById("briefingButton").this.disabled="true" and document.getElementById("briefingButton").style.display="none" and neither works.

<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>

CodePudding user response：

Firstly, your named function disableButton isn't named in the global scope. It's sort of bizarre, but I couldn't tell you exactly what scope it's in; however, I can tell you that it's not global. Check here for more information on scopes.

So the first thing you need to do is remove your disable button from the timeout and have it in the same scope as playMusic.

Secondly, just use the disable button function to call setTimeout with the first argument being an anonymous function which disables the button, like so:

function disableButton() {
  setTimeout(function () {
    document.getElementById("briefingButton").this.disabled = "true";
  }, 1080)
}

Thirdly, there is no "this" property on your input document object (we'll discuss more about this later), so it's best just to remove it, leaving us with:

document.getElementById("briefingButton").disabled = "true";

Fourthly, the value true is of the primitive data type Boolean in javascript, so you should simply remove the quotes and assign the value to true without the quotes leaving us with:

document.getElementById("briefingButton").disabled = true;

Lastly, your html is mistaken. Your id is on your <p> tag, so when you call document.getElementById, you end up trying to disable a <p> tag. You have to id your input tag if you want it to work correctly. As such, it should look like:

<input id="briefingButton" value="Click for briefing" onclick="playMusic(); disableButton()" />

One thing I'd like to mention in addition is that it's not typical convention to use a script tag within a p tag (although this is technically permissible. HTML is after all the wild west of markup languages). More usually, you'll see the script tags nested one level deep in the body tag under all the other tags.

Also, there is a button tag in html if you'd like to use that instead. That would look like this:

<button id="briefingButton"onclick="playMusic(); disableButton()">Click for briefing</button>

Furthermore, if you know that you want to disable it after the music has finished playing, you can just incorporate the setTimeout function call into your play music function and use the media duration as the timeout value like so:

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
}

CodePudding user response：

I'm not really familiar with how the HTMLMediaElement API works, but I can give you a general solution for your problem:

<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>

1. You can do the actions you want in 1 function, so I got rid of "disableButton()" from the inline onClick property.

2. Your setTimeout function wasn't setup right. You have to put it inside of a variable (Ex: let timer = setTimeout(callback, time);) You were attempting to call the setTimeout callback function (disableButton()) directly, but you have to call the variable you set it to.

3. I put the setTimeout function inside of the playMusic() function. Now when you call the function, your music plays, and then setTimeout is activated, which will disable the button after 1080ms (assuming that's how long the music plays for).

4. You were trying to disable the button by typing element.THIS.disabled = true. You don't need the THIS word, that will throw up an error. Just element.disabled = true is good.

5. Your id selector was pointing to the p tag, so it was disabling the p tag and not the button. So I put the id inside of the button tag. Also I took the script out of the p tag and put it afterwards. It's just more conventional that way.

I wasn't able to test out the audio portion of the code, but this should work :)