www.webdeveloper.com
Results 1 to 8 of 8

Thread: autoplay audio after keystroke

Hybrid View

  1. #1
    Join Date
    Jun 2013
    Posts
    11

    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 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! 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. #2
    Join Date
    Jun 2008
    Posts
    106
    Here's a little function I wrote: http://pastebin.com/GKRx0GDk
    It works in HTML5. Just pass it a source url (local or remote, don't forget the protocol http/file) and it should play the file, assuming your browser can handle the file format you passed it.
    It's ok to have spaces in the source url too, in-case you were wondering. They just get converted to %20

    Example usage:
    Code:
    play('http://developer.mozilla.org/@api/deki/files/2926/=AudioTest_(1).ogg');
    Last edited by tenfold; 08-06-2013 at 05:22 PM.

  3. #3
    Join Date
    Jun 2013
    Posts
    11
    So how does this fit with my current code? Will it prevent my functions from working? Where would I insert your code? sorry for the many questions- I am very new at this!

    Cheers!

  4. #4
    Join Date
    Jun 2008
    Posts
    106
    Quote Originally Posted by naivivivian View Post
    So how does this fit with my current code? Will it prevent my functions from working? Where would I insert your code?
    It won't prevent anything from working. Place the function at the beginning of your script tag, then just call play() wherever you want it to play. You said you wanted it to play after they pressed a key, so put the function call right after where you advance to the next presentation.



    Quote Originally Posted by naivivivian View Post
    sorry for the many questions- I am very new at this!
    Don't worry, we were all new once

  5. #5
    Join Date
    Jun 2013
    Posts
    11
    Quote Originally Posted by tenfold View Post
    You said you wanted it to play after they pressed a key, so put the function call right after where you advance to the next presentation.
    Thanks so much for your help!! I'm still a little bit confused

    https://qtrial.qualtrics.com/SE/?SID=SV_bvZZ3S3cfitkOUt
    ^^^
    This is an example of what I'm trying to do, except when you see the picture or word, a short audio clip will play in the background at the same time. Then after you press the correct button (E or I), it will move to the next word or picture where the same thing will happen but with a different audio clip. How would I go about doing this with the function that you wrote and combining it with what I have so far?

    Thanks again for all of your help, I really appreciate it

  6. #6
    Join Date
    Jun 2008
    Posts
    106
    Your code is so confusing to me that I don't know what to recommend. You seem to use a lot of arrays, so maybe make a new array containing a right & wrong for each presentation, just like you do for the right & wrong keys.

  7. #7
    Join Date
    Jun 2013
    Posts
    11
    Okay, I'll give it a shot. So the audio file has to end with .wav or .mp3 or a audio file type name right? Where do you paste your audio source into the code? after src?

  8. #8
    Join Date
    Jun 2008
    Posts
    106
    I'm not too familiar with the html5 audio tag, you may want to read up on it. I know it can accept mp3, wav, and ogg. Maybe others, not sure.

    As for the code... you can take my function and paste it before your code (at the beginning, inside your &lt;script&gt; tag). Then you'll be able to use play() anywhere inside of it. Maybe you can have some arrays with different audio file urls that play whenever you need them.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles