在指定时间后单击按钮和禁用按钮时播放音乐的脚本

Question

我正在尝试使用 onClick 函数使按钮播放音频文件，然后在指定的时间长度后禁用（以与音频文件的末尾对齐）。基本上，我正在尝试设置一个 Mission Impossible 式的东西，当单击按钮时，音频文件会播放，并且在录制结束时按钮会禁用（消息“自毁”）。我可以让文件播放，但我无法弄清楚如何使用脚本代码禁用按钮。这是我到目前为止所得到的。 document.getElementById("briefingButton").this.disabled="true" 和 document.getElementById("briefingButton").style.display="none" 都试过了，但都不行。

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

Answer 1

首先，您的命名函数 disableButton 未在全局范围内命名。这有点奇怪，但我不能确切地告诉你它在什么范围内；但是，我可以告诉你它不是全球性的。 Check here for more information on scopes.

因此，您需要做的第一件事是从超时中删除禁用按钮，并将其置于与 playMusic 相同的范围内。

其次，只需使用禁用按钮函数调用 setTimeout，第一个参数是禁用按钮的匿名函数，如下所示：


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

第三，您的输入文档对象中没有“this”属性（稍后我们将对此进行更多讨论），因此最好将其删除，留下：

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

第四，值true是javascript中的原始数据类型Boolean，所以你应该简单地去掉引号并将值赋给true，引号不会离开我们有：

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

最后，你的html错了。你的 id 在你的 <p> 标签上，所以当你调用 document.getElementById 时，你最终会尝试禁用 <p> 标签。如果您希望它正常工作，您必须为您的 input 标签添加 id。因此，它应该看起来像：

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

另外我想提的一件事是，在 p 标签中使用 script 标签不是典型的约定（尽管这在技术上是允许的。HTML毕竟是标记语言的狂野西部）。更常见的是，您会看到脚本标签嵌套在所有其他标签下方的 body 标签深处。

另外，html 中有一个按钮标签，如果您想使用它的话。看起来像这样：

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

此外，如果你知道你想在音乐播放结束后禁用它，你可以将 setTimeout 函数调用合并到你的播放音乐函数中，并使用媒体持续时间作为超时值，如所以：

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
}

Answer 2

我不太熟悉 HTMLMediaElement API 的工作原理，但我可以为您的问题提供一个通用的解决方案：

<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 个函数中执行您想要的操作，所以我从内联 onClick 中删除了“disableButton()”属性。
您的 setTimeout 函数设置不正确。你必须把它放在一个变量里面（例如：let timer = setTimeout(callback, time);）你试图直接调用 setTimeout 回调函数（disableButton（）），但你必须调用你设置它的变量.
我将 setTimeout 函数放在 playMusic() 函数中。现在，当您调用该函数时，您的音乐开始播放，然后 setTimeout 被激活，这将在 1080 毫秒后禁用该按钮（假设这是音乐播放的时间）。
您试图通过键入 element.THIS.disabled = true 来禁用该按钮。你不需要 THIS 这个词，那会抛出一个错误。只要 element.disabled = true 就可以了。
您的 ID 选择器指向 p 标签，因此它禁用了 p 标签而不是按钮。所以我把 id 放在按钮标签里面。我还从 p 标签中取出了脚本，然后将其放入。只是这样更传统。

我无法测试代码的音频部分，但这应该可以:)

在指定时间后单击按钮和禁用按钮时播放音乐的脚本

Script to play music on button click and disable button after specified time

html

javascript

onclick

settimeout