javascript - 音频播放完毕后如何停用 IE 中的播放按钮？

Question

以下代码适用于除 IE 之外的所有其他浏览器，其中播放音频并显示下一个按钮后，您还可以单击音频并再次收听。由于这是一项调查，如果有人多次听到它，对参与者来说是不公平的。你能告诉我为什么它在其他浏览器中工作正常但在 IE 中却不能工作以及如何修复它？

我希望用户在出现“单击继续”按钮后无法再次听到(即使他们单击“播放故事”按钮)。

Now that you know how the auditory stories will sound, you are ready to listen to and comprehend the two auditory stories in this study. The first auditory story is titled, “The Honey Gatherer’s Three Sons.” Press the “Play Story” button to begin listening to the story; after you have finished listening to the story, you will answer a set of questions about the story.
<div>&nbsp;
<p>&nbsp;</p>

<audio controls="" id="audio2" style="display:none"><source src="http://langcomplab.net/Honey_Gatherers_Master.webm" style="width:50%" type="audio/webm" /> <source src="http://langcomplab.net/Honey_Gatherers_Master.mp3" style="width:50%" type="audio/mp3" /> Your browser doesn&#39;t support this audio format.</audio>
</div>

<p>&nbsp;</p>

<div><button name="play" onclick="disabled=true" style="height:25px; width:200px" type="button">Play Story</button></div>

这是 JavaScript:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/
    var aud = document.getElementById('audio2');
    this.questionclick = function(event,element){

        if((element.type == "button") && (element.name == "play"))
        {
            aud.play();
        }

    }


});

更新:我将其更改为 HTML 中的以下内容:

<div><button name="play" style="width: 200px; height: 25px;" type="button">Play Story</button>

以及js中的以下内容:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/
    var aud = document.getElementById('audio1');
    this.questionclick = function(event,element){
        if((element.type == "button") && (element.name == "play"))
        {
            aud.play();
            element.disabled = true;
        }
    }

});

但是，在播放音频并显示继续按钮后，用户可以单击 IE 中的播放故事按钮并再次听到它，而在其他浏览器中不会发生这种情况。 JavaScript 或 HTML5 中是否有任何选项可以避免用户在播放音频后播放音频，该选项适用于 IE？

Answer 1

我不确定为什么 IE 不做你想要的事情，但我想人们永远不会真正理解为什么 IE 会做出这样的响应。

但是，您可能希望在 QuestionClick 函数中组合这两个操作。 (也许 onClick 事件处理程序会阻止 onClick 属性触发) 例如:

Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/
    var aud = document.getElementById('audio2');
    this.questionclick = function(event,element){

        if((element.type == "button") && (element.name == "play"))
        {
            aud.play();
            // remove the element
            element.parentNode.removeChild(element);
            // or set it to disabled, what you like
            element.disabled = true;
        }

    }


});

不要忘记从按钮中删除 onClick 属性:

<div><button name="play" style="height:25px; width:200px" type="button">Play Story</button></div>

您还可以在页面加载时设置变量。开始播放前检查一下，然后重新设置。 示例:

// Set a variable
var hasPlayed = false;
Qualtrics.SurveyEngine.addOnload(function()
{
    /*Place Your Javascript Below This Line*/
    var aud = document.getElementById('audio2');
    this.questionclick = function(event,element){

        if((element.type == "button") && (element.name == "play"))
        {
            // Check if audio hasn't played before
            if(hasPlayed == false) aud.play();
            // Flip the variable to make sure it won't play on next click
            hasPlayed = true;
        }

    }


});