How do de-activate the play button in IE after the audio has been played?

Question

The following code works fine with all the other browsers except IE, wherein once the audio is played and the next button is shown, you can yet click on the audio and hear it again. As this is a survey it is unfair to the participant if someone can hear it more than once. Can you please tell me how come it is working fine in other browser but not in IE and how it can be fixed? enter image description here

I want the users not to be able to hear again (even if they click on the Play Story button) once the "click to continue" button appears.

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, &ldquo;The Honey Gatherer&rsquo;s Three Sons.&rdquo; Press the &ldquo;Play Story&rdquo; 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>

and here is the 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();
        }

    }


});

UPDATE: I changed it to the following in HTML:

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

and the following in the 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;
        }
    }

});

But yet, after the audio is played and continue button is shown, the user can click on the play story button in IE and hear it again while this doesn't happen in other browsers. Is there any option in JavaScript or HTML5 to avoid the user to play the audio after once it has been played which can work for IE?

what code are you using to bind the listener function to the click event? — levi
I am using the qualtrics and just needed to pass the right audio in js which I have added. I am not sure if it's right all the way, but it's working in other browsers correctly. Can you explain a little more about what you said? — Mona Jalal
Its hard to say what is causing the problem, since I cant see all code. try removing disabled=true from the button, and in the JS add element.disabled = true immediately after aud.play() — levi

Maarten Wolzak Maarten Wolzak · Accepted Answer · 2014-06-25T20:56:15

I'm not sure why IE doesn't do what you want but I guess one never truly understands why IE responds like it does.

However, you might want to combine the two actions in the questionClick function. (Maybe that onClick event handler stops the onClick attribute from firing) For example:

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

    }


});

Don't forget to remove the onClick attribute from the button:

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

You can also set a variable on pageload. Check it before you start playing and then set it again. Example:

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

    }


});

How do de-activate the play button in IE after the audio has been played?

1 Answers