如何在播放音频后停用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>

您还可以在pageload上设置变量。在开始播放之前检查它，然后再次设置。 例如：

// 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;
        }

    }


});