run command while MediaRecorder is recording

[bta]

I am working with a MediaRecorder to record audio, and I’d like to make the user stay on the screen whenever the recorder is recording.

I’m using newMediaRecorder(…).wait() to prevent the ‘continue’ button from appearing until *one* recording is done, and that works great.

But what I want to do is prevent the ‘continue’ button from working if the recorder is running (again). So the case I’m envisioning is that the user comes to a recording screen, they record once, they stop the recording, (the continue button appears,) they decide they want to re-record so they hit ‘record’ again, but they (accidentally) hit ‘continue’ without hitting ‘stop’ first. In my tests, this leads to the original recording being uploaded (and the second recording that was made without hitting ‘stop’ gets lost to the ether).

I can imagine two possible ways of tackling this that would involve running some command while the MediaRecorder is recording, but don’t know if/how it would be possible to use either. Solution #1 would be to run a command that makes the ‘continue’ button disappear whenever ‘record’ is hit, but I can’t figure out how to test if ‘record’ is pressed. Solution #2 would be to run a command to test if the MediaRecorder is recording (clearly PCIbex knows when this is happening, since ‘recording’ appears at the top of the screen) inside of the ‘continue’ button’s “.wait()”, but I don’t know how to do that testing.

Thanks in advance!

• This topic was modified 1 year, 4 months ago by bta.

[Jeremy]

Hi,

The most straightforward solution that will give you the most control is probably to code the recording interface yourself. Here’s an example:

newTrial(
    // create the elements but don't print/start them yet
    newButton("Done"),
    newMediaRecorder("audio").log()
    ,
    newButton("Stop recording")
        .callback(
            // Whenever stop is clicked we remove it, stop+print the recorder, and (re-)print record and done
            getButton("Stop recording").remove(),
            getMediaRecorder("audio").stop().print(),
            getButton("Record").print(),
            getButton("Done").print()
        )
    ,
    newButton("Record")
        .callback(
            // Whenever record is clicked we remove it, remove done, remove+start the recorder and print stop
            getButton("Record").remove(),
            getButton("Done").remove(),
            getMediaRecorder("audio").remove().record(),
            getButton("Stop recording").print()
        )
        .print() // start the trial by printing record
    ,
    // the script will stay on this line until done is clicked
    getButton("Done").wait()
)

Since you handle recording manually, you’ll want to hide the default “Record” button printed along with the MediaRecorder element. Just add this to Aesthetics/PennController.css:

.MediaRecorder-record {
    display: none;
}

Jeremy

[bta]

Great that worked perfectly!

[Author]

Posts