Audio button : play sound WHEN we click on the button.

[MatthieuFra]

Hi,

Another question, but for another subject so I took the liberty of creating a second discussion.

How can I get an audio played after clicking a button ?
I think I can predict the answer : htmlButtonResponse => audioKeyboardResponse (with NoKeys).

But, once I used the button, I need to keep everything on screen (the button to toggle play I mean).
I prefer to avoid looping with :
htmlButtonResponse => audioKeyboardResponse (with NoKeys) => htmlButtonResponse (identical to Trial A)

But I don't know if it's possible ?

Also, If I need to do something like that (https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all), how can I include some external HTML code into my jsPsych ?
I'm using cognition.run for previewing everything.

Thanks a lot,

[kburkin]

Hi @MatthieuFra! I'm not an expert in jsPsych but I do this in one of my experiments. If you find a free audio file for your button (e.g. through something like the Creator Assets website/youtube, which makes Copyright free sound effects), then you can load it into your project as I've done below, and you can add it to the button_html (see where I did "onclick=bloop.play()"). (As a note, for mine I did wind up trimming the button noise from an audio file of different ones using Audacity.)

        /* Create variable(s) containing button audio */
        var bloop = new Audio("audio/bloop.mp3"); // for navigation buttons
        
        /* Displays a blank instructions page in order to move the user's mouse and/or focus away from 
        where a picture may appear. Not pushed to timeline because it appears as part of the sub-timeline 
        in test_procedure. */
        var mouse_to_bottom = {
            type: jsPsychHtmlButtonResponse,
            stimulus: "<span style='font-size:2vw;'><p>Click the Next button to continue.</p></span>",
            choices: ['Next >'],
            button_html: '<button style="position:fixed; width:8vw; left:calc(50vw - 6vw); bottom:0; margin:2vw;" class="jspsych-btn"; onclick=bloop.play()>%choice%</button>', // specify width as percentage of screen width, calc for left should be 50vw (50% across screen) minus half button width and margin width
            data: {
                test_part: 'mouse_to_bottom'
            },
            post_trial_gap: 240, // inserted to allow the navigation button noise to finish
        };

Re: Keeping everything on the screen after, if you look at the html-button-response instructions page, there is an option you can add to the trial called "response_ends_trial" - you can set that to false.
https://www.jspsych.org/7.1/plugins/html-button-response/

I hope this helps some!
-Kelly