Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Jun 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    autoplay audio after keystroke

    hi there! I'm creating a task where I would like the screen to show a succession of presentations where an image appears and an audio clip automatically plays (with no display of the audio player). The user would then advance to the next presentation of a different image and a different audio clip by pressing a key. I currently only have the image part, and am having trouble with the audio. I'm new to programming so any help would be greatly appreciated!! THANK YOU in advance! I would like to use javascript for the audio and not HTML5, as it seems to best fit what I have so far... though correct me if I'm wrong. Here is what I have so far:



    <script type="text/javascript">

    shuffle = function(o){ //v1.0
    for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
    return o;
    };

    qID = 12;

    document.onkeyup = KeyCheck;

    var input = new Array();
    var correct = new Array();
    var neworder = shuffle([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39]);

    var t = 0;var c = 0;var d;var running = 0;

    input[0]="Reject"; correct[0]=73;
    input[1]="Pass-by"; correct[1]=73;
    input[2]="Skip"; correct[2]=73;
    input[3]="No"; correct[3]=73;

    input[4]="Reject"; correct[4]=73;
    input[5]="Pass-by"; correct[5]=73;
    input[6]="Skip"; correct[6]=73;
    input[7]="No"; correct[7]=73;

    input[8]="Want"; correct[8]=69;
    input[9]="Desire"; correct[9]=69;
    input[10]="Buy"; correct[10]=69;
    input[11]="Need"; correct[11]=69;

    input[12]="Want"; correct[12]=69;
    input[13]="Desire"; correct[13]=69;
    input[14]="Buy"; correct[14]=69;
    input[15]="Need"; correct[15]=69;

    input[16]="Reject"; correct[16]=73;
    input[17]="Pass-by"; correct[17]=73;
    input[18]="Skip"; correct[18]=73;
    input[19]="No"; correct[19]=73;

    input[20]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_5sCddddzWLOkOYB&V=1374009040'>"; correct[20]=69;
    input[21]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4NtwrpSNMCEdZGt&V=1374009049'>"; correct[21]=69;
    input[22]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_3r8ZiVWWzg8ycbb&V=1374009058'>"; correct[22]=69;
    input[23]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_exlMd6GYiSBMGk5&V=1374009065'>"; correct[23]=69;

    input[24]="Want"; correct[24]=69;
    input[25]="Desire"; correct[25]=69;
    input[26]="Buy"; correct[26]=69;
    input[27]="Need"; correct[27]=69;

    input[28]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_0TIvr7w1n73jhwp&V=1374009127'>"; correct[28]=73;
    input[29]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_4Uh8QMFmkxsdAq1&V=1374009002'>"; correct[29]=73;
    input[30]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_38Y8jNXgWTeVoJn&V=1374009012'>"; correct[30]=73;
    input[31]="<img src='https://s.qualtrics.com/ControlPanel/Graphic.php?IM=IM_abBC0IrdJhVbyE5&V=1374009022'>"; correct[31]=73;

    input[32]="Reject"; correct[32]=73;
    input[33]="Pass-by"; correct[33]=73;
    input[34]="Skip"; correct[34]=73;
    input[35]="No"; correct[35]=73;

    input[36]="Want"; correct[36]=69;
    input[37]="Desire"; correct[37]=69;
    input[38]="Buy"; correct[38]=69;
    input[39]="Need"; correct[39]=69;

    function start_it() {
    if (c<40) {
    var day = new Date(); trialstart = day.getTime();
    document.getElementById("Message").innerHTML = "<br>" + input[neworder[c]];
    }
    else {
    clearInterval(t)
    document.getElementById("Message").innerHTML = "<br>You may now proceed to the next section by pressing Shift + p";
    document.getElementById("QR~QID12").value = document.getElementById("QR~QID12").value + "END";
    }
    }

    function KeyCheck(e) {
    var KeyID = (window.event) ? event.keyCode : e.keyCode;
    if (c<40) {
    d=neworder[c]; if (d<=9) {d="0"+d;}
    if(KeyID == 69) {
    var day = new Date(); trialend = day.getTime();
    rt = trialend - trialstart;
    if(correct[neworder[c]] == 69){
    document.getElementById("QR~QID12").value = document.getElementById("QR~QID12").value + d + "C" + rt + ",";
    document.getElementById("Message").innerHTML = "<br> ";
    c=c+1;
    t = setTimeout('start_it();',500);
    }
    else{
    document.getElementById("QR~QID12").value = document.getElementById("QR~QID12").value + d + "X" + rt + ",";
    document.getElementById("Message").innerHTML = "<b style='color:red;font-size:80px'>X</b>";
    t = setTimeout('document.getElementById("Message").innerHTML = "<br> ";',777777);
    t = setTimeout('start_it();',999999);
    }

    }

    if(KeyID == 73) {
    var day = new Date(); trialend = day.getTime();
    rt = trialend - trialstart;
    if(correct[neworder[c]] == 73){
    document.getElementById("QR~QID12").value = document.getElementById("QR~QID12").value + d + "C" + rt + ",";
    document.getElementById("Message").innerHTML = "<br> ";
    c=c+1;
    t = setTimeout('start_it();',500);
    }
    else{
    document.getElementById("QR~QID12").value = document.getElementById("QR~QID12").value + d + "X" + rt + ",";
    document.getElementById("Message").innerHTML = "<b style='color:red;font-size:80px'>X</b>";
    t = setTimeout('document.getElementById("Message").innerHTML = "<br> ";',777777);
    t = setTimeout('start_it();',999999);
    }

    }

    if(KeyID == 32) {
    if (running == 0) {
    document.getElementById('instructions').style.display = "none";
    running = 1;
    start_it();
    }
    }
    }
    }

    </script>
    <center>
    <b style="color:chartreuse;font-size:30px"><span style="color:#000000;">&nbsp;<img height="132" src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_3JFOrjgBLoVEcKN" width="63" /> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; &nbsp; &nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; <img height="130" src="https://qtrial.qualtrics.com/CP/Graphic.php?IM=IM_73bV3guP4jHAysl" width="62" /><br />
    &nbsp;&nbsp;&nbsp; Purchase &nbsp; &nbsp; &nbsp;</span> &nbsp; &nbsp; &nbsp; &nbsp; <span style="color:#000000;">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Don&#39;t Purchase</span></b><br />
    <br />
    <br />
    <h2 id="Message" style="font-size:30px">
    +</h2>
    <br />
    <p id="instructions">
    <br />
    <br />
    When you are ready, please press the [Space] bar to begin.</p>
    </center>

  • #2
    Senior Coder Arbitrator's Avatar
    Join Date
    Mar 2006
    Location
    Splendora, Texas, United States of America
    Posts
    3,387
    Thanks
    32
    Thanked 288 Times in 282 Posts
    Quote Originally Posted by naivivivian View Post
    autoplay audio after keystroke
    You can use the HTML Audio constructor. Example:

    Code:
    <!doctype html>
    <meta charset="utf-8">
    <title>Demo</title>
    <script>
    	var audio = new Audio("song.mp3");
    	function toggle_audio(event) {
    		if (event.key === "Spacebar" || event.charCode === 32 && audio.paused === true) {
    			audio.play();
    		}
    	}
    	document.addEventListener("keypress", toggle_audio);
    </script>
    For every complex problem, there is an answer that is clear, simple, and wrong.


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •