mirror of
https://github.com/jspsych/jsPsych.git
synced 2025-05-10 11:10:54 +00:00
Merge pull request #2350 from jspsych/plugin-audio-input-plugins
New plugins: audio response
This commit is contained in:
Josh de Leeuw
GitHub
commit
36397244df
5
.changeset/calm-books-wink.md
Normal file
5
.changeset/calm-books-wink.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"jspsych": minor
|
||||||
|
---
|
||||||
|
|
||||||
|
Added microphone related features to the `pluginAPI` module: `initializeMicrophoneRecorder()` and `getMicrophoneRecorder()`. These allow sharing of the `MediaRecorder` object attached to the microphone's `MediaStream` across trials.
|
||||||
5
.changeset/green-buttons-suffer.md
Normal file
5
.changeset/green-buttons-suffer.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@jspsych/plugin-initiliaze-microphone": major
|
||||||
|
---
|
||||||
|
|
||||||
|
Initial release of the `initialize-microphone` plugin. This plugin handles getting permission to use the microphone and selecting which microphone to use. See [the plugin's documentation](https://www.jspsych.org/latest/plugins/initialize-microphone) for details.
|
||||||
5
.changeset/rich-parents-relax.md
Normal file
5
.changeset/rich-parents-relax.md
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
---
|
||||||
|
"@jspsych/plugin-html-audio-response": major
|
||||||
|
---
|
||||||
|
|
||||||
|
Initial release of the `html-audio-response` plugin. Allows recording audio responses from the participant via a microphone. See [the plugin's documentation](https://www.jspsych.org/latest/plugins/html-audio-response) for details.
|
||||||
62
docs/demos/jspsych-html-audio-response-demo1.html
Normal file
62
docs/demos/jspsych-html-audio-response-demo1.html
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://unpkg.com/jspsych@7.1.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.0"></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.0/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var jsPsych = initJsPsych();
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: function() {
|
||||||
|
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||||
|
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||||
|
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||||
|
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||||
|
},
|
||||||
|
choices: ['Repeat demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var init_mic = {
|
||||||
|
type: jsPsychInitializeMicrophone
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `
|
||||||
|
<p style="font-size:48px; color:red;">GREEN</p>
|
||||||
|
<p>Speak the color of the ink.</p>`,
|
||||||
|
recording_duration: 3500
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.run([start, init_mic, trial_loop]);
|
||||||
|
} else {
|
||||||
|
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
70
docs/demos/jspsych-html-audio-response-demo2.html
Normal file
70
docs/demos/jspsych-html-audio-response-demo2.html
Normal file
@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://unpkg.com/jspsych@7.1.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.0"></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.0/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var jsPsych = initJsPsych();
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: function() {
|
||||||
|
var trial_data = jsPsych.data.getLastTrialData().values();
|
||||||
|
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||||
|
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||||
|
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||||
|
},
|
||||||
|
choices: ['Repeat demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var init_mic = {
|
||||||
|
type: jsPsychInitializeMicrophone
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `
|
||||||
|
<p>Please sing the first few seconds of a song and click the button when you are done.</p>`,
|
||||||
|
recording_duration: 15000,
|
||||||
|
allow_playback: true,
|
||||||
|
on_finish: function(data){
|
||||||
|
/*fetch('/save-my-data.php', { audio_base64: data.response })
|
||||||
|
.then((audio_id){
|
||||||
|
data.response = audio_id;
|
||||||
|
});*/
|
||||||
|
// need to fake the server part of this.
|
||||||
|
data.response = "584j29d01a";
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.run([start, init_mic, trial_loop]);
|
||||||
|
} else {
|
||||||
|
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
82
docs/demos/jspsych-html-audio-response-demo3.html
Normal file
82
docs/demos/jspsych-html-audio-response-demo3.html
Normal file
@ -0,0 +1,82 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://unpkg.com/jspsych@7.1.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.1.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-html-audio-response@1.0.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-audio-button-response@1.1.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.0"></script>
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.1.0/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var jsPsych = initJsPsych();
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: function() {
|
||||||
|
var trial_data = jsPsych.data.get().last(2).values();
|
||||||
|
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||||
|
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||||
|
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||||
|
},
|
||||||
|
choices: ['Repeat demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var init_mic = {
|
||||||
|
type: jsPsychInitializeMicrophone
|
||||||
|
}
|
||||||
|
|
||||||
|
var instruction = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: `
|
||||||
|
<img src='img/10.gif' style="width:100px; padding: 20px;"></img>
|
||||||
|
<p>Make up a name for this shape. When you have one in mind, click the button and then say the name aloud.</p>`,
|
||||||
|
choices: ['I am ready.']
|
||||||
|
}
|
||||||
|
|
||||||
|
var record = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `
|
||||||
|
<img src='img/10.gif' style="width:100px; padding: 20px;"></img>
|
||||||
|
<p>Recording...</p>`,
|
||||||
|
recording_duration: 1500,
|
||||||
|
save_audio_url: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var playback = {
|
||||||
|
type: jsPsychAudioButtonResponse,
|
||||||
|
stimulus: ()=>{
|
||||||
|
return jsPsych.data.get().last(1).values()[0].audio_url;
|
||||||
|
},
|
||||||
|
prompt: '<p>Click the object the matches the spoken name.</p>',
|
||||||
|
choices: ['img/9.gif','img/10.gif','img/11.gif','img/12.gif'],
|
||||||
|
button_html: '<img src="%choice%" style="width:100px; padding: 20px;"></img>'
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [instruction, record, playback, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.run([start, init_mic, trial_loop]);
|
||||||
|
} else {
|
||||||
|
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
53
docs/demos/jspsych-initialize-microphone-demo1.html
Normal file
53
docs/demos/jspsych-initialize-microphone-demo1.html
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="https://unpkg.com/jspsych@7.0.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-html-button-response@1.0.0"></script>
|
||||||
|
<script src="https://unpkg.com/@jspsych/plugin-initialize-microphone@1.0.0"></script>-->
|
||||||
|
<link rel="stylesheet" href="https://unpkg.com/jspsych@7.0.0/css/jspsych.css">
|
||||||
|
<style>
|
||||||
|
.jspsych-btn {margin-bottom: 10px;}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var jsPsych = initJsPsych();
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: '',
|
||||||
|
choices: ['Run demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var show_data = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: function() {
|
||||||
|
var trial_data = jsPsych.data.get().last(1).values();
|
||||||
|
var trial_json = JSON.stringify(trial_data, null, 2);
|
||||||
|
return `<p style="margin-bottom:0px;"><strong>Trial data:</strong></p>
|
||||||
|
<pre style="margin-top:0px;text-align:left;">${trial_json}</pre>`;
|
||||||
|
},
|
||||||
|
choices: ['Repeat demo']
|
||||||
|
};
|
||||||
|
|
||||||
|
var init_mic = {
|
||||||
|
type: jsPsychInitializeMicrophone
|
||||||
|
}
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [init_mic, show_data],
|
||||||
|
loop_function: function() {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
if (typeof jsPsych !== "undefined") {
|
||||||
|
jsPsych.run([start, trial_loop]);
|
||||||
|
} else {
|
||||||
|
document.body.innerHTML = '<div style="text-align:center; margin-top:50%; transform:translate(0,-50%);">You must be online to view the plugin demo.</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
</html>
|
||||||
148
docs/plugins/html-audio-response.md
Normal file
148
docs/plugins/html-audio-response.md
Normal file
@ -0,0 +1,148 @@
|
|||||||
|
# html-audio-response
|
||||||
|
|
||||||
|
This plugin displays HTML content and records audio from the participant via a microphone.
|
||||||
|
|
||||||
|
In order to get access to the microphone, you need to use the [initialize-microphone plugin](initialize-microphone.md) on your timeline prior to using this plugin.
|
||||||
|
Once access is granted for an experiment you do not need to get permission again.
|
||||||
|
|
||||||
|
This plugin records audio data in [base 64 format](https://developer.mozilla.org/en-US/docs/Glossary/Base64).
|
||||||
|
This is a text-based representation of the audio which can be coverted to various audio formats using a variety of [online tools](https://www.google.com/search?q=base64+audio+decoder) as well as in languages like python and R.
|
||||||
|
|
||||||
|
**This plugin will generate a large amount of data, and you will need to be careful about how you handle this data.**
|
||||||
|
Even a few seconds of audio recording will add 10s of kB to jsPsych's data.
|
||||||
|
Multiply this by a handful (or more) of trials, and the data objects will quickly get large.
|
||||||
|
If you need to record a lot of audio, either many trials worth or just a few trials with longer responses, we recommend that you save the data to your server immediately after the trial and delete the data in jsPsych's data object.
|
||||||
|
See below for an example of how to do this.
|
||||||
|
|
||||||
|
This plugin also provides the option to store the recorded audio files as [Object URLs](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) via `save_audio_url: true`.
|
||||||
|
This will generate a URL that is storing a copy of the recorded audio, which can be used for subsequent playback.
|
||||||
|
See below for an example where the recorded audio is used as the stimulus in a subsequent trial.
|
||||||
|
This feature is turned off by default because it uses a relatively large amount of memory compared to most jsPsych features.
|
||||||
|
If you are running an experiment where you need this feature and you are recording lots of audio snippets, you may want to manually revoke the URLs when you no longer need them using [`URL.revokeObjectURL(objectURL)`](https://developer.mozilla.org/en-US/docs/Web/API/URL/revokeObjectURL).
|
||||||
|
|
||||||
|
!!! warning
|
||||||
|
When recording from a microphone your experiment will need to be running over `https://` protocol. If you try to run the experiment locally using the `file://` protocol or over `http://` protocol you will not be able to access the microphone because of [potential security problems](https://blog.mozilla.org/webrtc/camera-microphone-require-https-in-firefox-68/).
|
||||||
|
|
||||||
|
## Parameters
|
||||||
|
|
||||||
|
In addition to the [parameters available in all plugins](../overview/plugins.md#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||||
|
|
||||||
|
Parameter | Type | Default Value | Description
|
||||||
|
----------|------|---------------|------------
|
||||||
|
stimulus | HTML string | undefined | The HTML content to be displayed.
|
||||||
|
recording_duration | numeric | 2000 | The maximum length of the recording, in milliseconds. The default value is intentionally set low because of the potential to accidentally record very large data files if left too high. You can set this to `null` to allow the participant to control the length of the recording via the done button, but be careful with this option as it can lead to crashing the browser if the participant waits too long to stop the recording.
|
||||||
|
stimulus_duration | numeric | null | How long to display the stimulus in milliseconds. The visibility CSS property of the stimulus will be set to `hidden` after this time has elapsed. If this is null, then the stimulus will remain visible until the trial ends.
|
||||||
|
show_done_button | bool | true | Whether to show a button on the screen that the participant can click to finish the recording.
|
||||||
|
done_button_label | string | 'Continue' | The label for the done button.
|
||||||
|
allow_playback | bool | false | Whether to allow the participant to listen to their recording and decide whether to rerecord or not. If `true`, then the participant will be shown an interface to play their recorded audio and click one of two buttons to either accept the recording or rerecord. If rerecord is selected, then stimulus will be shown again, as if the trial is starting again from the beginning.
|
||||||
|
record_again_button_label | string | 'Record again' | The label for the record again button enabled when `allow_playback: true`.
|
||||||
|
accept_button_label | string | 'Continue' | The label for the accept button enabled when `allow_playback: true`.
|
||||||
|
save_audio_url | bool | false | If `true`, then an [Object URL](https://developer.mozilla.org/en-US/docs/Web/API/URL/createObjectURL) will be generated and stored for the recorded audio. Only set this to `true` if you plan to reuse the recorded audio later in the experiment, as it is a potentially memory-intensive feature.
|
||||||
|
|
||||||
|
|
||||||
|
## Data Generated
|
||||||
|
|
||||||
|
In addition to the [default data collected by all plugins](../overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
||||||
|
|
||||||
|
Name | Type | Value
|
||||||
|
-----|------|------
|
||||||
|
rt | numeric | The time, since the onset of the stimulus, for the participant to click the done button. If the button is not clicked (or not enabled), then `rt` will be `null`.
|
||||||
|
response | base64 string | The base64-encoded audio data.
|
||||||
|
stimulus | string | The HTML content that was displayed on the screen.
|
||||||
|
estimated_stimulus_onset | number | This is an estimate of when the stimulus appeared relative to the start of the audio recording. The plugin is configured so that the recording should start prior to the display of the stimulus. We have not yet been able to verify the accuracy of this estimate with external measurement devices.
|
||||||
|
audio_url | string | A URL to a copy of the audio data.
|
||||||
|
|
||||||
|
## Simulation Mode
|
||||||
|
|
||||||
|
This plugin does not yet support [simulation mode](../overview/simulation.md).
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
???+ example "Simple spoken response to a stimulus"
|
||||||
|
=== "Code"
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `
|
||||||
|
<p style="font-size:48px; color:red;">GREEN</p>
|
||||||
|
<p>Speak the color of the ink.</p>`,
|
||||||
|
recording_duration: 3500
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Demo"
|
||||||
|
<div style="text-align:center;">
|
||||||
|
<iframe src="../../demos/jspsych-html-audio-response-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-audio-response-demo1.html">Open demo in new tab</a>
|
||||||
|
|
||||||
|
???+ example "Allow playback and rerecording; save data to server immediately"
|
||||||
|
=== "Code"
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `
|
||||||
|
<p>Please sing the first few seconds of a song and click the button when you are done.</p>
|
||||||
|
`,
|
||||||
|
recording_duration: 15000,
|
||||||
|
allow_playback: true,
|
||||||
|
on_finish: function(data){
|
||||||
|
fetch('/save-my-data.php', { audio_base64: data.response })
|
||||||
|
.then((audio_id){
|
||||||
|
data.response = audio_id;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
This example assumes that there is a script on your experiment server that accepts the data called `save-my-data.php`. It also assumes that the script will generate a response with an ID for the stored audio file (`audio_id`). In the example, we replace the very long base64 representation of the audio file with the generated ID, which could be just a handful of characters. This would let you link files to responses in data analysis, without having to store long audio files in memory during the experiment.
|
||||||
|
|
||||||
|
=== "Demo"
|
||||||
|
<div style="text-align:center;">
|
||||||
|
<iframe src="../../demos/jspsych-html-audio-response-demo2.html" width="90%;" height="600px;" frameBorder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-audio-response-demo2.html">Open demo in new tab</a>
|
||||||
|
|
||||||
|
???+ example "Use recorded audio as a subsequent stimulus"
|
||||||
|
=== "Code"
|
||||||
|
```javascript
|
||||||
|
var instruction = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: `
|
||||||
|
<img src='img/10.gif' style="width:100px; padding: 20px;"></img>
|
||||||
|
<p>Make up a name for this shape. When you have one in mind, click the button and then say the name aloud.</p>
|
||||||
|
`,
|
||||||
|
choices: ['I am ready.']
|
||||||
|
}
|
||||||
|
|
||||||
|
var record = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `
|
||||||
|
<img src='img/10.gif' style="width:100px; padding: 20px;"></img>
|
||||||
|
<p>Recording...</p>
|
||||||
|
`,
|
||||||
|
recording_duration: 1500,
|
||||||
|
save_audio_url: true
|
||||||
|
};
|
||||||
|
|
||||||
|
var playback = {
|
||||||
|
type: jsPsychAudioButtonResponse,
|
||||||
|
stimulus: ()=>{
|
||||||
|
return jsPsych.data.get().last(1).values()[0].audio_url;
|
||||||
|
},
|
||||||
|
prompt: '<p>Click the object the matches the spoken name.</p>',
|
||||||
|
choices: ['img/9.gif','img/10.gif','img/11.gif','img/12.gif'],
|
||||||
|
button_html: '<img src="%choice%" style="width:100px; padding: 20px;"></img>'
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Demo"
|
||||||
|
<div style="text-align:center;">
|
||||||
|
<iframe src="../../demos/jspsych-html-audio-response-demo3.html" width="90%;" height="600px;" frameBorder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-html-audio-response-demo3.html">Open demo in new tab</a>
|
||||||
|
|
||||||
|
|
||||||
49
docs/plugins/initialize-microphone.md
Normal file
49
docs/plugins/initialize-microphone.md
Normal file
@ -0,0 +1,49 @@
|
|||||||
|
# initialize-microphone
|
||||||
|
|
||||||
|
This plugin asks the participant to grant permission to access a microphone.
|
||||||
|
If multiple microphones are connected to the participant's device, then it allows the participant to pick which device to use.
|
||||||
|
Once access is granted for an experiment you do not need to get permission again.
|
||||||
|
|
||||||
|
Once the microphone is selected with this plugin it can be accessed with [`jsPsych.pluginAPI.getMicrophoneRecorder()`](dead-link.md).
|
||||||
|
|
||||||
|
!!! warning
|
||||||
|
When recording from a microphone your experiment will need to be running over `https://` protocol. If you try to run the experiment locally using the `file://` protocol or over `http://` protocol you will not be able to access the microphone because of [potential security problems](https://blog.mozilla.org/webrtc/camera-microphone-require-https-in-firefox-68/).
|
||||||
|
|
||||||
|
## Parameters
|
||||||
|
|
||||||
|
In addition to the [parameters available in all plugins](../overview/plugins.md#parameters-available-in-all-plugins), this plugin accepts the following parameters. Parameters with a default value of *undefined* must be specified. Other parameters can be left unspecified if the default value is acceptable.
|
||||||
|
|
||||||
|
Parameter | Type | Default Value | Description
|
||||||
|
----------|------|---------------|------------
|
||||||
|
device_select_message | html string | `<p>Please select the microphone you would like to use.</p>` | The message to display when the user is presented with a dropdown list of available devices.
|
||||||
|
button_label | sting | 'Use this microphone.' | The label for the select button.
|
||||||
|
|
||||||
|
|
||||||
|
## Data Generated
|
||||||
|
|
||||||
|
In addition to the [default data collected by all plugins](../overview/plugins.md#data-collected-by-all-plugins), this plugin collects the following data for each trial.
|
||||||
|
|
||||||
|
Name | Type | Value
|
||||||
|
-----|------|------
|
||||||
|
device_id | string | The [device ID](https://developer.mozilla.org/en-US/docs/Web/API/MediaDeviceInfo/deviceId) of the selected microphone.
|
||||||
|
|
||||||
|
## Simulation Mode
|
||||||
|
|
||||||
|
This plugin does not yet support [simulation mode](../overview/simulation.md).
|
||||||
|
|
||||||
|
## Examples
|
||||||
|
|
||||||
|
???+ example "Ask for microphone permission"
|
||||||
|
=== "Code"
|
||||||
|
```javascript
|
||||||
|
var trial = {
|
||||||
|
type: jsPsychInitializeMicrophone
|
||||||
|
};
|
||||||
|
```
|
||||||
|
|
||||||
|
=== "Demo"
|
||||||
|
<div style="text-align:center;">
|
||||||
|
<iframe src="../../demos/jspsych-initialize-microphone-demo1.html" width="90%;" height="600px;" frameBorder="0"></iframe>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<a target="_blank" rel="noopener noreferrer" href="../../demos/jspsych-initialize-microphone-demo1.html">Open demo in new tab</a>
|
||||||
@ -24,6 +24,7 @@ Plugin | Description
|
|||||||
[external‑html](external-html.md) | Displays an external HTML page (such as a consent form) and lets the subject respond by clicking a button or pressing a key. Plugin can validate their response, which is useful for making sure that a subject has granted consent before starting the experiment.
|
[external‑html](external-html.md) | Displays an external HTML page (such as a consent form) and lets the subject respond by clicking a button or pressing a key. Plugin can validate their response, which is useful for making sure that a subject has granted consent before starting the experiment.
|
||||||
[free‑sort](free-sort.md) | Displays a set of images on the screen in random locations. Subjects can click and drag the images to move them around the screen. Records all the moves made by the subject, so the sequence of moves can be recovered from the data.
|
[free‑sort](free-sort.md) | Displays a set of images on the screen in random locations. Subjects can click and drag the images to move them around the screen. Records all the moves made by the subject, so the sequence of moves can be recovered from the data.
|
||||||
[fullscreen](fullscreen.md) | Toggles the experiment in and out of fullscreen mode.
|
[fullscreen](fullscreen.md) | Toggles the experiment in and out of fullscreen mode.
|
||||||
|
[html‑audio‑response](html-audio-response.md) | Display an HTML-formatted stimulus and records an audio response via a microphone.
|
||||||
[html‑button‑response](html-button-response.md) | Display an HTML-formatted stimulus and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
|
[html‑button‑response](html-button-response.md) | Display an HTML-formatted stimulus and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
|
||||||
[html‑keyboard‑response](html-keyboard-response.md) | Display an HTML-formatted stimulus and allow the subject to respond by pressing a key.
|
[html‑keyboard‑response](html-keyboard-response.md) | Display an HTML-formatted stimulus and allow the subject to respond by pressing a key.
|
||||||
[html‑slider‑response](html-slider-response.md) | Display an HTML-formatted stimulus and allow the subject to respond by moving a slider to indicate a value.
|
[html‑slider‑response](html-slider-response.md) | Display an HTML-formatted stimulus and allow the subject to respond by moving a slider to indicate a value.
|
||||||
@ -32,6 +33,7 @@ Plugin | Description
|
|||||||
[image‑button‑response](image-button-response.md) | Display an image and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
|
[image‑button‑response](image-button-response.md) | Display an image and allow the subject to respond by choosing a button to click. The button can be customized extensively, e.g., using images in place of standard buttons.
|
||||||
[image‑keyboard‑response](image-keyboard-response.md) | Display an image and allow the subject to respond by pressing a key.
|
[image‑keyboard‑response](image-keyboard-response.md) | Display an image and allow the subject to respond by pressing a key.
|
||||||
[image‑slider‑response](image-slider-response.md) | Display an image and allow the subject to respond by moving a slider to indicate a value.
|
[image‑slider‑response](image-slider-response.md) | Display an image and allow the subject to respond by moving a slider to indicate a value.
|
||||||
|
[initialize‑microphone](initialize-microphone.md) | Request permission to use the subject's microphone to record audio and allows the subject to choose which microphone to use if multiple devices are enabled.
|
||||||
[instructions](instructions.md) | For displaying instructions to the subject. Allows the subject to navigate between pages of instructions using keys or buttons.
|
[instructions](instructions.md) | For displaying instructions to the subject. Allows the subject to navigate between pages of instructions using keys or buttons.
|
||||||
[maxdiff](maxdiff.md) | Displays rows of alternatives to be selected for two mutually-exclusive categories, typically as 'most' or 'least' on a particular criteria (e.g. importance, preference, similarity). The participant responds by selecting one radio button corresponding to an alternative in both the left and right response columns.
|
[maxdiff](maxdiff.md) | Displays rows of alternatives to be selected for two mutually-exclusive categories, typically as 'most' or 'least' on a particular criteria (e.g. importance, preference, similarity). The participant responds by selecting one radio button corresponding to an alternative in both the left and right response columns.
|
||||||
[preload](preload.md) | This plugin loads images, audio, and video files into the browser's memory before they are needed in the experiment, in order to improve stimulus and response timing, and to avoid disrupting the flow of the experiment.
|
[preload](preload.md) | This plugin loads images, audio, and video files into the browser's memory before they are needed in the experiment, in order to improve stimulus and response timing, and to avoid disrupting the flow of the experiment.
|
||||||
|
|||||||
@ -325,6 +325,63 @@ jsPsych.pluginAPI.getAutoPreloadList(timeline);
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
### getMicrophoneRecorder
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
jsPsych.pluginAPI.getMicrophoneRecorder()
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
None
|
||||||
|
|
||||||
|
#### Return value
|
||||||
|
|
||||||
|
A `MediaRecorder` object connected to the `MediaStream` for the active microphone.
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Provides access to the `MediaRecorder` created by [initializeMicrophoneRecorder()](#initializemicrophonerecorder).
|
||||||
|
If no microphone recorder exists, it returns `null`.
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const recorder = jsPsych.pluginAPI.getMicrophoneRecorder();
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### initializeMicrophoneRecorder
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
jsPsych.pluginAPI.initializeMicrophoneRecorder(stream)
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Parameters
|
||||||
|
|
||||||
|
Parameter | Type | Description
|
||||||
|
----------|------|------------
|
||||||
|
stream | `MediaStream` | The `MediaStream` object from an active microphone device.
|
||||||
|
|
||||||
|
#### Return value
|
||||||
|
|
||||||
|
None.
|
||||||
|
|
||||||
|
#### Description
|
||||||
|
|
||||||
|
Generates a `MediaRecorder` object from provided `MediaStream` and stores this for access via [getMicrophoneRecorder()](#getmicrophonerecorder).
|
||||||
|
|
||||||
|
#### Example
|
||||||
|
|
||||||
|
```javascript
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: mic_id } });
|
||||||
|
|
||||||
|
jsPsych.pluginAPI.initializeMicrophoneRecorder(stream);
|
||||||
|
```
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
### preloadAudio
|
### preloadAudio
|
||||||
|
|
||||||
```javascript
|
```javascript
|
||||||
|
|||||||
30
examples/jspsych-initialize-microphone.html
Normal file
30
examples/jspsych-initialize-microphone.html
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="../packages/jspsych/dist/index.browser.js"></script>
|
||||||
|
<script src="../packages/plugin-initialize-microphone/dist/index.browser.js"></script>
|
||||||
|
<script src="../packages/plugin-html-audio-response/dist/index.browser.js"></script>
|
||||||
|
<link rel="stylesheet" href="../packages/jspsych/css/jspsych.css">
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var jsPsych = initJsPsych();
|
||||||
|
|
||||||
|
let init_mic = {
|
||||||
|
type: jsPsychInitializeMicrophone,
|
||||||
|
}
|
||||||
|
|
||||||
|
let ar = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: '<div style="width:400px; height: 400px; background-color: red;"></div>',
|
||||||
|
allow_playback: true,
|
||||||
|
on_finish: (data) => {
|
||||||
|
console.log(data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
jsPsych.run([init_mic, ar]);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
@ -87,6 +87,7 @@ nav:
|
|||||||
- 'external-html': 'plugins/external-html.md'
|
- 'external-html': 'plugins/external-html.md'
|
||||||
- 'free-sort': 'plugins/free-sort.md'
|
- 'free-sort': 'plugins/free-sort.md'
|
||||||
- 'fullscreen': 'plugins/fullscreen.md'
|
- 'fullscreen': 'plugins/fullscreen.md'
|
||||||
|
- 'html-audio-response': 'plugins/html-audio-response.md'
|
||||||
- 'html-button-response': 'plugins/html-button-response.md'
|
- 'html-button-response': 'plugins/html-button-response.md'
|
||||||
- 'html-keyboard-response': 'plugins/html-keyboard-response.md'
|
- 'html-keyboard-response': 'plugins/html-keyboard-response.md'
|
||||||
- 'html-slider-response': 'plugins/html-slider-response.md'
|
- 'html-slider-response': 'plugins/html-slider-response.md'
|
||||||
@ -95,6 +96,7 @@ nav:
|
|||||||
- 'image-button-response': 'plugins/image-button-response.md'
|
- 'image-button-response': 'plugins/image-button-response.md'
|
||||||
- 'image-keyboard-response': 'plugins/image-keyboard-response.md'
|
- 'image-keyboard-response': 'plugins/image-keyboard-response.md'
|
||||||
- 'image-slider-response': 'plugins/image-slider-response.md'
|
- 'image-slider-response': 'plugins/image-slider-response.md'
|
||||||
|
- 'initialize-microphone': 'plugins/initialize-microphone.md'
|
||||||
- 'instructions': 'plugins/instructions.md'
|
- 'instructions': 'plugins/instructions.md'
|
||||||
- 'maxdiff': 'plugins/maxdiff.md'
|
- 'maxdiff': 'plugins/maxdiff.md'
|
||||||
- 'preload': 'plugins/preload.md'
|
- 'preload': 'plugins/preload.md'
|
||||||
|
|||||||
76
package-lock.json
generated
76
package-lock.json
generated
@ -2502,6 +2502,10 @@
|
|||||||
"resolved": "packages/plugin-fullscreen",
|
"resolved": "packages/plugin-fullscreen",
|
||||||
"link": true
|
"link": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@jspsych/plugin-html-audio-response": {
|
||||||
|
"resolved": "packages/plugin-html-audio-response",
|
||||||
|
"link": true
|
||||||
|
},
|
||||||
"node_modules/@jspsych/plugin-html-button-response": {
|
"node_modules/@jspsych/plugin-html-button-response": {
|
||||||
"resolved": "packages/plugin-html-button-response",
|
"resolved": "packages/plugin-html-button-response",
|
||||||
"link": true
|
"link": true
|
||||||
@ -2534,6 +2538,10 @@
|
|||||||
"resolved": "packages/plugin-image-slider-response",
|
"resolved": "packages/plugin-image-slider-response",
|
||||||
"link": true
|
"link": true
|
||||||
},
|
},
|
||||||
|
"node_modules/@jspsych/plugin-initiliaze-microphone": {
|
||||||
|
"resolved": "packages/plugin-initialize-microphone",
|
||||||
|
"link": true
|
||||||
|
},
|
||||||
"node_modules/@jspsych/plugin-instructions": {
|
"node_modules/@jspsych/plugin-instructions": {
|
||||||
"resolved": "packages/plugin-instructions",
|
"resolved": "packages/plugin-instructions",
|
||||||
"link": true
|
"link": true
|
||||||
@ -2913,6 +2921,12 @@
|
|||||||
"@babel/types": "^7.3.0"
|
"@babel/types": "^7.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/dom-mediacapture-record": {
|
||||||
|
"version": "1.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.11.tgz",
|
||||||
|
"integrity": "sha512-ODVOH95x08arZhbQOjH3no7Iye64akdO+55nM+IGtTzpu2ACKr9CQTrI//CCVieIjlI/eL+rK1hQjMycxIgylQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/@types/estree": {
|
"node_modules/@types/estree": {
|
||||||
"version": "0.0.39",
|
"version": "0.0.39",
|
||||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
||||||
@ -3022,6 +3036,12 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
|
||||||
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
|
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
|
||||||
},
|
},
|
||||||
|
"node_modules/@types/resize-observer-browser": {
|
||||||
|
"version": "0.1.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz",
|
||||||
|
"integrity": "sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"node_modules/@types/resolve": {
|
"node_modules/@types/resolve": {
|
||||||
"version": "1.17.1",
|
"version": "1.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||||
@ -15636,7 +15656,8 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@jspsych/config": "^1.0.0",
|
"@jspsych/config": "^1.0.0",
|
||||||
"@jspsych/test-utils": "^1.0.0"
|
"@jspsych/test-utils": "^1.0.0",
|
||||||
|
"@types/dom-mediacapture-record": "^1.0.11"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"packages/plugin-animation": {
|
"packages/plugin-animation": {
|
||||||
@ -15835,6 +15856,19 @@
|
|||||||
"jspsych": ">=7.0.0"
|
"jspsych": ">=7.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"packages/plugin-html-audio-response": {
|
||||||
|
"name": "@jspsych/plugin-html-audio-response",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@jspsych/config": "^1.0.0",
|
||||||
|
"@jspsych/test-utils": "^1.0.0",
|
||||||
|
"@types/resize-observer-browser": "^0.1.6"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"jspsych": ">=7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"packages/plugin-html-button-response": {
|
"packages/plugin-html-button-response": {
|
||||||
"name": "@jspsych/plugin-html-button-response",
|
"name": "@jspsych/plugin-html-button-response",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
@ -15931,6 +15965,18 @@
|
|||||||
"jspsych": ">=7.0.0"
|
"jspsych": ">=7.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"packages/plugin-initialize-microphone": {
|
||||||
|
"name": "@jspsych/plugin-initiliaze-microphone",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"license": "MIT",
|
||||||
|
"devDependencies": {
|
||||||
|
"@jspsych/config": "^1.0.0",
|
||||||
|
"@jspsych/test-utils": "^1.0.0"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"jspsych": ">=7.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"packages/plugin-instructions": {
|
"packages/plugin-instructions": {
|
||||||
"name": "@jspsych/plugin-instructions",
|
"name": "@jspsych/plugin-instructions",
|
||||||
"version": "1.0.0",
|
"version": "1.0.0",
|
||||||
@ -18140,6 +18186,14 @@
|
|||||||
"@jspsych/test-utils": "^1.0.0"
|
"@jspsych/test-utils": "^1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@jspsych/plugin-html-audio-response": {
|
||||||
|
"version": "file:packages/plugin-html-audio-response",
|
||||||
|
"requires": {
|
||||||
|
"@jspsych/config": "^1.0.0",
|
||||||
|
"@jspsych/test-utils": "^1.0.0",
|
||||||
|
"@types/resize-observer-browser": "^0.1.6"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@jspsych/plugin-html-button-response": {
|
"@jspsych/plugin-html-button-response": {
|
||||||
"version": "file:packages/plugin-html-button-response",
|
"version": "file:packages/plugin-html-button-response",
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -18196,6 +18250,13 @@
|
|||||||
"@jspsych/test-utils": "^1.0.0"
|
"@jspsych/test-utils": "^1.0.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@jspsych/plugin-initiliaze-microphone": {
|
||||||
|
"version": "file:packages/plugin-initialize-microphone",
|
||||||
|
"requires": {
|
||||||
|
"@jspsych/config": "^1.0.0",
|
||||||
|
"@jspsych/test-utils": "^1.0.0"
|
||||||
|
}
|
||||||
|
},
|
||||||
"@jspsych/plugin-instructions": {
|
"@jspsych/plugin-instructions": {
|
||||||
"version": "file:packages/plugin-instructions",
|
"version": "file:packages/plugin-instructions",
|
||||||
"requires": {
|
"requires": {
|
||||||
@ -18594,6 +18655,12 @@
|
|||||||
"@babel/types": "^7.3.0"
|
"@babel/types": "^7.3.0"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
"@types/dom-mediacapture-record": {
|
||||||
|
"version": "1.0.11",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/dom-mediacapture-record/-/dom-mediacapture-record-1.0.11.tgz",
|
||||||
|
"integrity": "sha512-ODVOH95x08arZhbQOjH3no7Iye64akdO+55nM+IGtTzpu2ACKr9CQTrI//CCVieIjlI/eL+rK1hQjMycxIgylQ==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"@types/estree": {
|
"@types/estree": {
|
||||||
"version": "0.0.39",
|
"version": "0.0.39",
|
||||||
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
"resolved": "https://registry.npmjs.org/@types/estree/-/estree-0.0.39.tgz",
|
||||||
@ -18703,6 +18770,12 @@
|
|||||||
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/prettier/-/prettier-2.4.1.tgz",
|
||||||
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
|
"integrity": "sha512-Fo79ojj3vdEZOHg3wR9ksAMRz4P3S5fDB5e/YWZiFnyFQI1WY2Vftu9XoXVVtJfxB7Bpce/QTqWSSntkz2Znrw=="
|
||||||
},
|
},
|
||||||
|
"@types/resize-observer-browser": {
|
||||||
|
"version": "0.1.6",
|
||||||
|
"resolved": "https://registry.npmjs.org/@types/resize-observer-browser/-/resize-observer-browser-0.1.6.tgz",
|
||||||
|
"integrity": "sha512-61IfTac0s9jvNtBCpyo86QeaN8qqpMGHdK0uGKCCIy2dt5/Yk84VduHIdWAcmkC5QvdkPL0p5eWYgUZtHKKUVg==",
|
||||||
|
"dev": true
|
||||||
|
},
|
||||||
"@types/resolve": {
|
"@types/resolve": {
|
||||||
"version": "1.17.1",
|
"version": "1.17.1",
|
||||||
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
"resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
|
||||||
@ -24110,6 +24183,7 @@
|
|||||||
"requires": {
|
"requires": {
|
||||||
"@jspsych/config": "^1.0.0",
|
"@jspsych/config": "^1.0.0",
|
||||||
"@jspsych/test-utils": "^1.0.0",
|
"@jspsych/test-utils": "^1.0.0",
|
||||||
|
"@types/dom-mediacapture-record": "^1.0.11",
|
||||||
"auto-bind": "^4.0.0",
|
"auto-bind": "^4.0.0",
|
||||||
"random-words": "^1.1.1"
|
"random-words": "^1.1.1"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -44,6 +44,7 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@jspsych/config": "^1.0.0",
|
"@jspsych/config": "^1.0.0",
|
||||||
"@jspsych/test-utils": "^1.0.0"
|
"@jspsych/test-utils": "^1.0.0",
|
||||||
|
"@types/dom-mediacapture-record": "^1.0.11"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -323,4 +323,15 @@ export class MediaAPI {
|
|||||||
}
|
}
|
||||||
this.preload_requests = [];
|
this.preload_requests = [];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
private microphone_recorder: MediaRecorder = null;
|
||||||
|
|
||||||
|
initializeMicrophoneRecorder(stream: MediaStream) {
|
||||||
|
const recorder = new MediaRecorder(stream);
|
||||||
|
this.microphone_recorder = recorder;
|
||||||
|
}
|
||||||
|
|
||||||
|
getMicrophoneRecorder(): MediaRecorder {
|
||||||
|
return this.microphone_recorder;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
113
packages/jspsych/tests/timing-tests/audio-input.html
Normal file
113
packages/jspsych/tests/timing-tests/audio-input.html
Normal file
@ -0,0 +1,113 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<script src="../../dist/index.browser.js"></script>
|
||||||
|
<script src="../../../plugin-html-button-response/dist/index.browser.js"></script>
|
||||||
|
<script src="../../../plugin-html-audio-response/dist/index.browser.js"></script>
|
||||||
|
<script src="../../../plugin-initialize-microphone/dist/index.browser.js"></script>
|
||||||
|
<script src="../../../plugin-survey-text/dist/index.browser.js"></script>
|
||||||
|
<link rel="stylesheet" type="text/css" href="../../css/jspsych.css" />
|
||||||
|
<style>
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
background: black;
|
||||||
|
color: white;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body></body>
|
||||||
|
<script>
|
||||||
|
|
||||||
|
var jsPsych = initJsPsych();
|
||||||
|
var timeline = [];
|
||||||
|
var n_trials = 5;
|
||||||
|
var buffer_length = 1000;
|
||||||
|
var trial_count = 0;
|
||||||
|
var iti_durations = [500,600,700,800,900,1000];
|
||||||
|
|
||||||
|
jsPsych.data.addProperties({version: 'event.timeStamp'});
|
||||||
|
|
||||||
|
var enter_trial_info = {
|
||||||
|
type: jsPsychSurveyText,
|
||||||
|
preamble: '<p>Timing test for audio recordings: event.timeStamp method</p>',
|
||||||
|
questions: [
|
||||||
|
{prompt: '<p>Enter the number of trials to run, e.g. 100:</p>', required: true, name: 'n_trials', columns: 6, rows: 1},
|
||||||
|
{prompt: '<p>Enter the recording duration in ms, e.g. 1000:<br>Must be at least 300 ms.</p>', required: true, name: 'buffer_length', columns: 6, rows: 1},
|
||||||
|
{prompt: '<p>Enter the browser info.</p>', required: true, name: 'browser', columns: 40, rows: 1},
|
||||||
|
{prompt: '<p>Enter the device and OS info.</p>', required: true, name: 'device_os', columns: 40, rows: 1},
|
||||||
|
{prompt: '<p>Enter the intended RT.</p>', required: true, name: 'intended_rt', columns: 6, rows: 1}
|
||||||
|
],
|
||||||
|
button_label: 'Next',
|
||||||
|
on_finish: function(data) {
|
||||||
|
n_trials = parseInt(data.response.n_trials, 10);
|
||||||
|
buffer_length = parseInt(data.response.buffer_length, 10);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
timeline.push(enter_trial_info);
|
||||||
|
|
||||||
|
var audio_check_start = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: '<p>Now you will be able to record a test sound<br>and then play it back to check that the audio has been captured clearly.</p>'+
|
||||||
|
'<p>After you press the "Start the recording check" button,<br>you will be need to approve the browser's request to use the mic.</p>'+
|
||||||
|
'<p>Then the browser will record audio for 2 seconds.</p>'+
|
||||||
|
'<p>You will then see an audio player and you will be able to play back your recording.</p>'+
|
||||||
|
'<p>You can re-record as many times as necessary to ensure that,<br>during the test, the audio will be captured clearly.</p>',
|
||||||
|
choices: ['Start the recording check']
|
||||||
|
};
|
||||||
|
timeline.push(audio_check_start);
|
||||||
|
|
||||||
|
var init_mic = {
|
||||||
|
type: jsPsychInitializeMicrophone,
|
||||||
|
}
|
||||||
|
timeline.push(init_mic);
|
||||||
|
|
||||||
|
var audio_check = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `<div style="width:200px; height: 200px; background: white;"></div>`,
|
||||||
|
recording_duration: 2000,
|
||||||
|
allow_playback: true,
|
||||||
|
};
|
||||||
|
timeline.push(audio_check);
|
||||||
|
|
||||||
|
var start = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: '<p>Press the "Start" button to start the audio recording test.</p>',
|
||||||
|
choices: ['Start'],
|
||||||
|
post_trial_gap: 1000
|
||||||
|
};
|
||||||
|
timeline.push(start);
|
||||||
|
|
||||||
|
var trial = {
|
||||||
|
type: jsPsychHtmlAudioResponse,
|
||||||
|
stimulus: `<div style="width:200px; height: 200px; background: white;"></div>`,
|
||||||
|
stimulus_duration: 100,
|
||||||
|
show_done_button: false,
|
||||||
|
recording_duration: function() {return buffer_length;},
|
||||||
|
post_trial_gap: function() {
|
||||||
|
return jsPsych.randomization.sampleWithoutReplacement(iti_durations,1)[0];
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
var trial_loop = {
|
||||||
|
timeline: [trial],
|
||||||
|
loop_function: function() {
|
||||||
|
trial_count++;
|
||||||
|
if (trial_count == n_trials) {
|
||||||
|
return false;
|
||||||
|
} else {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
timeline.push(trial_loop);
|
||||||
|
|
||||||
|
var end = {
|
||||||
|
type: jsPsychHtmlButtonResponse,
|
||||||
|
stimulus: '<p>The test has finished.</p>',
|
||||||
|
choices: ['Done']
|
||||||
|
};
|
||||||
|
timeline.push(end);
|
||||||
|
|
||||||
|
jsPsych.run(timeline);
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
1
packages/plugin-html-audio-response/jest.config.cjs
Normal file
1
packages/plugin-html-audio-response/jest.config.cjs
Normal file
@ -0,0 +1 @@
|
|||||||
|
module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);
|
||||||
44
packages/plugin-html-audio-response/package.json
Normal file
44
packages/plugin-html-audio-response/package.json
Normal file
@ -0,0 +1,44 @@
|
|||||||
|
{
|
||||||
|
"name": "@jspsych/plugin-html-audio-response",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "jsPsych plugin for displaying a stimulus and recording an audio response through the microphone",
|
||||||
|
"type": "module",
|
||||||
|
"main": "dist/index.cjs",
|
||||||
|
"exports": {
|
||||||
|
"import": "./dist/index.js",
|
||||||
|
"require": "./dist/index.cjs"
|
||||||
|
},
|
||||||
|
"typings": "dist/index.d.ts",
|
||||||
|
"unpkg": "dist/index.browser.min.js",
|
||||||
|
"files": [
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"source": "src/index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "jest --passWithNoTests",
|
||||||
|
"test:watch": "npm test -- --watch",
|
||||||
|
"tsc": "tsc",
|
||||||
|
"build": "rollup --config",
|
||||||
|
"build:watch": "npm run build -- --watch"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/jspsych/jsPsych.git",
|
||||||
|
"directory": "packages/plugin-html-audio-response"
|
||||||
|
},
|
||||||
|
"author": "Josh de Leeuw",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/jspsych/jsPsych/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://www.jspsych.org/latest/plugins/html-audio-response",
|
||||||
|
"peerDependencies": {
|
||||||
|
"jspsych": ">=7.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@jspsych/config": "^1.0.0",
|
||||||
|
"@jspsych/test-utils": "^1.0.0",
|
||||||
|
"@types/resize-observer-browser": "^0.1.6"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
packages/plugin-html-audio-response/rollup.config.mjs
Normal file
3
packages/plugin-html-audio-response/rollup.config.mjs
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { makeRollupConfig } from "@jspsych/config/rollup";
|
||||||
|
|
||||||
|
export default makeRollupConfig("jsPsychHtmlAudioResponse");
|
||||||
244
packages/plugin-html-audio-response/src/index.ts
Normal file
244
packages/plugin-html-audio-response/src/index.ts
Normal file
@ -0,0 +1,244 @@
|
|||||||
|
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
|
||||||
|
|
||||||
|
const info = <const>{
|
||||||
|
name: "html-audio-response",
|
||||||
|
parameters: {
|
||||||
|
/** The HTML string to be displayed */
|
||||||
|
stimulus: {
|
||||||
|
type: ParameterType.HTML_STRING,
|
||||||
|
default: undefined,
|
||||||
|
},
|
||||||
|
/** How long to show the stimulus. */
|
||||||
|
stimulus_duration: {
|
||||||
|
type: ParameterType.INT,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
/** How long to show the trial. */
|
||||||
|
recording_duration: {
|
||||||
|
type: ParameterType.INT,
|
||||||
|
default: 2000,
|
||||||
|
},
|
||||||
|
show_done_button: {
|
||||||
|
type: ParameterType.BOOL,
|
||||||
|
default: true,
|
||||||
|
},
|
||||||
|
done_button_label: {
|
||||||
|
type: ParameterType.STRING,
|
||||||
|
default: "Continue",
|
||||||
|
},
|
||||||
|
record_again_button_label: {
|
||||||
|
type: ParameterType.STRING,
|
||||||
|
default: "Record again",
|
||||||
|
},
|
||||||
|
accept_button_label: {
|
||||||
|
type: ParameterType.STRING,
|
||||||
|
default: "Continue",
|
||||||
|
},
|
||||||
|
allow_playback: {
|
||||||
|
type: ParameterType.BOOL,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
save_audio_url: {
|
||||||
|
type: ParameterType.BOOL,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
type Info = typeof info;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* html-audio-response
|
||||||
|
* jsPsych plugin for displaying a stimulus and recording an audio response through a microphone
|
||||||
|
* @author Josh de Leeuw
|
||||||
|
* @see {@link https://www.jspsych.org/plugins/jspsych-html-audio-response/ html-audio-response plugin documentation on jspsych.org}
|
||||||
|
*/
|
||||||
|
class HtmlAudioResponsePlugin implements JsPsychPlugin<Info> {
|
||||||
|
static info = info;
|
||||||
|
private stimulus_start_time;
|
||||||
|
private recorder_start_time;
|
||||||
|
private recorder: MediaRecorder;
|
||||||
|
private audio_url;
|
||||||
|
private response;
|
||||||
|
private load_resolver;
|
||||||
|
private rt: number = null;
|
||||||
|
private start_event_handler;
|
||||||
|
private stop_event_handler;
|
||||||
|
private data_available_handler;
|
||||||
|
private recorded_data_chunks = [];
|
||||||
|
|
||||||
|
constructor(private jsPsych: JsPsych) {}
|
||||||
|
|
||||||
|
trial(display_element: HTMLElement, trial: TrialType<Info>) {
|
||||||
|
this.recorder = this.jsPsych.pluginAPI.getMicrophoneRecorder();
|
||||||
|
|
||||||
|
this.setupRecordingEvents(display_element, trial);
|
||||||
|
|
||||||
|
this.startRecording();
|
||||||
|
}
|
||||||
|
|
||||||
|
private showDisplay(display_element, trial) {
|
||||||
|
const ro = new ResizeObserver((entries, observer) => {
|
||||||
|
this.stimulus_start_time = performance.now();
|
||||||
|
observer.unobserve(display_element);
|
||||||
|
//observer.disconnect();
|
||||||
|
});
|
||||||
|
|
||||||
|
ro.observe(display_element);
|
||||||
|
|
||||||
|
let html = `<div id="jspsych-html-audio-response-stimulus">${trial.stimulus}</div>`;
|
||||||
|
|
||||||
|
if (trial.show_done_button) {
|
||||||
|
html += `<p><button class="jspsych-btn" id="finish-trial">${trial.done_button_label}</button></p>`;
|
||||||
|
}
|
||||||
|
|
||||||
|
display_element.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
private hideStimulus(display_element: HTMLElement) {
|
||||||
|
const el: HTMLElement = display_element.querySelector("#jspsych-html-audio-response-stimulus");
|
||||||
|
if (el) {
|
||||||
|
el.style.visibility = "hidden";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private addButtonEvent(display_element, trial) {
|
||||||
|
const btn = display_element.querySelector("#finish-trial");
|
||||||
|
if (btn) {
|
||||||
|
btn.addEventListener("click", () => {
|
||||||
|
const end_time = performance.now();
|
||||||
|
this.rt = Math.round(end_time - this.stimulus_start_time);
|
||||||
|
this.stopRecording().then(() => {
|
||||||
|
if (trial.allow_playback) {
|
||||||
|
this.showPlaybackControls(display_element, trial);
|
||||||
|
} else {
|
||||||
|
this.endTrial(display_element, trial);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
private setupRecordingEvents(display_element, trial) {
|
||||||
|
this.data_available_handler = (e) => {
|
||||||
|
if (e.data.size > 0) {
|
||||||
|
this.recorded_data_chunks.push(e.data);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.stop_event_handler = () => {
|
||||||
|
const data = new Blob(this.recorded_data_chunks, { type: "audio/webm" });
|
||||||
|
this.audio_url = URL.createObjectURL(data);
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.addEventListener("load", () => {
|
||||||
|
const base64 = (reader.result as string).split(",")[1];
|
||||||
|
this.response = base64;
|
||||||
|
this.load_resolver();
|
||||||
|
});
|
||||||
|
reader.readAsDataURL(data);
|
||||||
|
};
|
||||||
|
|
||||||
|
this.start_event_handler = (e) => {
|
||||||
|
// resets the recorded data
|
||||||
|
this.recorded_data_chunks.length = 0;
|
||||||
|
|
||||||
|
this.recorder_start_time = e.timeStamp;
|
||||||
|
this.showDisplay(display_element, trial);
|
||||||
|
this.addButtonEvent(display_element, trial);
|
||||||
|
|
||||||
|
// setup timer for hiding the stimulus
|
||||||
|
if (trial.stimulus_duration !== null) {
|
||||||
|
this.jsPsych.pluginAPI.setTimeout(() => {
|
||||||
|
this.hideStimulus(display_element);
|
||||||
|
}, trial.stimulus_duration);
|
||||||
|
}
|
||||||
|
|
||||||
|
// setup timer for ending the trial
|
||||||
|
if (trial.recording_duration !== null) {
|
||||||
|
this.jsPsych.pluginAPI.setTimeout(() => {
|
||||||
|
// this check is necessary for cases where the
|
||||||
|
// done_button is clicked before the timer expires
|
||||||
|
if (this.recorder.state !== "inactive") {
|
||||||
|
this.stopRecording().then(() => {
|
||||||
|
if (trial.allow_playback) {
|
||||||
|
this.showPlaybackControls(display_element, trial);
|
||||||
|
} else {
|
||||||
|
this.endTrial(display_element, trial);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}, trial.recording_duration);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
this.recorder.addEventListener("dataavailable", this.data_available_handler);
|
||||||
|
|
||||||
|
this.recorder.addEventListener("stop", this.stop_event_handler);
|
||||||
|
|
||||||
|
this.recorder.addEventListener("start", this.start_event_handler);
|
||||||
|
}
|
||||||
|
|
||||||
|
private startRecording() {
|
||||||
|
this.recorder.start();
|
||||||
|
}
|
||||||
|
|
||||||
|
private stopRecording() {
|
||||||
|
this.recorder.stop();
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
this.load_resolver = resolve;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private showPlaybackControls(display_element, trial) {
|
||||||
|
display_element.innerHTML = `
|
||||||
|
<p><audio id="playback" src="${this.audio_url}" controls></audio></p>
|
||||||
|
<button id="record-again" class="jspsych-btn">${trial.record_again_button_label}</button>
|
||||||
|
<button id="continue" class="jspsych-btn">${trial.accept_button_label}</button>
|
||||||
|
`;
|
||||||
|
|
||||||
|
display_element.querySelector("#record-again").addEventListener("click", () => {
|
||||||
|
// release object url to save memory
|
||||||
|
URL.revokeObjectURL(this.audio_url);
|
||||||
|
this.startRecording();
|
||||||
|
});
|
||||||
|
display_element.querySelector("#continue").addEventListener("click", () => {
|
||||||
|
this.endTrial(display_element, trial);
|
||||||
|
});
|
||||||
|
|
||||||
|
// const audio = display_element.querySelector('#playback');
|
||||||
|
// audio.src =
|
||||||
|
}
|
||||||
|
|
||||||
|
private endTrial(display_element, trial) {
|
||||||
|
// clear recordering event handler
|
||||||
|
|
||||||
|
this.recorder.removeEventListener("dataavailable", this.data_available_handler);
|
||||||
|
this.recorder.removeEventListener("start", this.start_event_handler);
|
||||||
|
this.recorder.removeEventListener("stop", this.stop_event_handler);
|
||||||
|
|
||||||
|
// kill any remaining setTimeout handlers
|
||||||
|
this.jsPsych.pluginAPI.clearAllTimeouts();
|
||||||
|
|
||||||
|
// gather the data to store for the trial
|
||||||
|
var trial_data: any = {
|
||||||
|
rt: this.rt,
|
||||||
|
stimulus: trial.stimulus,
|
||||||
|
response: this.response,
|
||||||
|
estimated_stimulus_onset: Math.round(this.stimulus_start_time - this.recorder_start_time),
|
||||||
|
};
|
||||||
|
|
||||||
|
if (trial.save_audio_url) {
|
||||||
|
trial_data.audio_url = this.audio_url;
|
||||||
|
} else {
|
||||||
|
URL.revokeObjectURL(this.audio_url);
|
||||||
|
}
|
||||||
|
|
||||||
|
// clear the display
|
||||||
|
display_element.innerHTML = "";
|
||||||
|
|
||||||
|
// move on to the next trial
|
||||||
|
this.jsPsych.finishTrial(trial_data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default HtmlAudioResponsePlugin;
|
||||||
7
packages/plugin-html-audio-response/tsconfig.json
Normal file
7
packages/plugin-html-audio-response/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"extends": "@jspsych/config/tsconfig.core.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "."
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
1
packages/plugin-initialize-microphone/jest.config.cjs
Normal file
1
packages/plugin-initialize-microphone/jest.config.cjs
Normal file
@ -0,0 +1 @@
|
|||||||
|
module.exports = require("@jspsych/config/jest").makePackageConfig(__dirname);
|
||||||
43
packages/plugin-initialize-microphone/package.json
Normal file
43
packages/plugin-initialize-microphone/package.json
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "@jspsych/plugin-initiliaze-microphone",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"description": "jsPsych plugin for getting permission to initialize the user's microphone",
|
||||||
|
"type": "module",
|
||||||
|
"main": "dist/index.cjs",
|
||||||
|
"exports": {
|
||||||
|
"import": "./dist/index.js",
|
||||||
|
"require": "./dist/index.cjs"
|
||||||
|
},
|
||||||
|
"typings": "dist/index.d.ts",
|
||||||
|
"unpkg": "dist/index.browser.min.js",
|
||||||
|
"files": [
|
||||||
|
"src",
|
||||||
|
"dist"
|
||||||
|
],
|
||||||
|
"source": "src/index.ts",
|
||||||
|
"scripts": {
|
||||||
|
"test": "jest --passWithNoTests",
|
||||||
|
"test:watch": "npm test -- --watch",
|
||||||
|
"tsc": "tsc",
|
||||||
|
"build": "rollup --config",
|
||||||
|
"build:watch": "npm run build -- --watch"
|
||||||
|
},
|
||||||
|
"repository": {
|
||||||
|
"type": "git",
|
||||||
|
"url": "git+https://github.com/jspsych/jsPsych.git",
|
||||||
|
"directory": "packages/plugin-initialize-microphone"
|
||||||
|
},
|
||||||
|
"author": "Josh de Leeuw",
|
||||||
|
"license": "MIT",
|
||||||
|
"bugs": {
|
||||||
|
"url": "https://github.com/jspsych/jsPsych/issues"
|
||||||
|
},
|
||||||
|
"homepage": "https://www.jspsych.org/latest/plugins/initialize-microphone",
|
||||||
|
"peerDependencies": {
|
||||||
|
"jspsych": ">=7.0.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@jspsych/config": "^1.0.0",
|
||||||
|
"@jspsych/test-utils": "^1.0.0"
|
||||||
|
}
|
||||||
|
}
|
||||||
3
packages/plugin-initialize-microphone/rollup.config.mjs
Normal file
3
packages/plugin-initialize-microphone/rollup.config.mjs
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
import { makeRollupConfig } from "@jspsych/config/rollup";
|
||||||
|
|
||||||
|
export default makeRollupConfig("jsPsychInitializeMicrophone");
|
||||||
111
packages/plugin-initialize-microphone/src/index.ts
Normal file
111
packages/plugin-initialize-microphone/src/index.ts
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
import { JsPsych, JsPsychPlugin, ParameterType, TrialType } from "jspsych";
|
||||||
|
|
||||||
|
const info = <const>{
|
||||||
|
name: "initialize-microphone",
|
||||||
|
parameters: {
|
||||||
|
/** Function to call */
|
||||||
|
device_select_message: {
|
||||||
|
type: ParameterType.HTML_STRING,
|
||||||
|
default: `<p>Please select the microphone you would like to use.</p>`,
|
||||||
|
},
|
||||||
|
/** Is the function call asynchronous? */
|
||||||
|
button_label: {
|
||||||
|
type: ParameterType.STRING,
|
||||||
|
default: "Use this microphone",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
type Info = typeof info;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* **initialize-microphone**
|
||||||
|
*
|
||||||
|
* jsPsych plugin for getting permission to initialize a microphone
|
||||||
|
*
|
||||||
|
* @author Josh de Leeuw
|
||||||
|
* @see {@link https://www.jspsych.org/plugins/jspsych-initialize-microphone/ initialize-microphone plugin documentation on jspsych.org}
|
||||||
|
*/
|
||||||
|
class InitializeMicrophonePlugin implements JsPsychPlugin<Info> {
|
||||||
|
static info = info;
|
||||||
|
|
||||||
|
constructor(private jsPsych: JsPsych) {}
|
||||||
|
|
||||||
|
trial(display_element: HTMLElement, trial: TrialType<Info>) {
|
||||||
|
this.run_trial(display_element, trial).then((id) => {
|
||||||
|
this.jsPsych.finishTrial({
|
||||||
|
device_id: id,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private async run_trial(display_element: HTMLElement, trial: TrialType<Info>) {
|
||||||
|
await this.askForPermission();
|
||||||
|
|
||||||
|
this.showMicrophoneSelection(display_element, trial);
|
||||||
|
|
||||||
|
this.updateDeviceList(display_element);
|
||||||
|
|
||||||
|
navigator.mediaDevices.ondevicechange = (e) => {
|
||||||
|
this.updateDeviceList(display_element);
|
||||||
|
};
|
||||||
|
|
||||||
|
const mic_id = await this.waitForSelection(display_element);
|
||||||
|
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: { deviceId: mic_id } });
|
||||||
|
|
||||||
|
this.jsPsych.pluginAPI.initializeMicrophoneRecorder(stream);
|
||||||
|
|
||||||
|
return mic_id;
|
||||||
|
}
|
||||||
|
|
||||||
|
private async askForPermission() {
|
||||||
|
const stream = await navigator.mediaDevices.getUserMedia({ audio: true, video: false });
|
||||||
|
return stream;
|
||||||
|
}
|
||||||
|
|
||||||
|
private showMicrophoneSelection(display_element, trial: TrialType<Info>) {
|
||||||
|
let html = `
|
||||||
|
${trial.device_select_message}
|
||||||
|
<select name="mic" id="which-mic" style="font-size:14px; font-family: 'Open Sans', 'Arial', sans-serif; padding: 4px;">
|
||||||
|
</select>
|
||||||
|
<p><button class="jspsych-btn" id="btn-select-mic">${trial.button_label}</button></p>`;
|
||||||
|
display_element.innerHTML = html;
|
||||||
|
}
|
||||||
|
|
||||||
|
private waitForSelection(display_element) {
|
||||||
|
return new Promise((resolve) => {
|
||||||
|
display_element.querySelector("#btn-select-mic").addEventListener("click", () => {
|
||||||
|
const mic = display_element.querySelector("#which-mic").value;
|
||||||
|
resolve(mic);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
private updateDeviceList(display_element) {
|
||||||
|
navigator.mediaDevices.enumerateDevices().then((devices) => {
|
||||||
|
const mics = devices.filter(
|
||||||
|
(d) =>
|
||||||
|
d.kind === "audioinput" && d.deviceId !== "default" && d.deviceId !== "communications"
|
||||||
|
);
|
||||||
|
|
||||||
|
// remove entries with duplicate groupID
|
||||||
|
const unique_mics = mics.filter(
|
||||||
|
(mic, index, arr) => arr.findIndex((v) => v.groupId == mic.groupId) == index
|
||||||
|
);
|
||||||
|
|
||||||
|
// reset the list by clearing all current options
|
||||||
|
display_element.querySelector("#which-mic").innerHTML = "";
|
||||||
|
|
||||||
|
unique_mics.forEach((d) => {
|
||||||
|
let el = document.createElement("option");
|
||||||
|
el.value = d.deviceId;
|
||||||
|
el.innerHTML = d.label;
|
||||||
|
|
||||||
|
display_element.querySelector("#which-mic").appendChild(el);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default InitializeMicrophonePlugin;
|
||||||
7
packages/plugin-initialize-microphone/tsconfig.json
Normal file
7
packages/plugin-initialize-microphone/tsconfig.json
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
{
|
||||||
|
"extends": "@jspsych/config/tsconfig.core.json",
|
||||||
|
"compilerOptions": {
|
||||||
|
"baseUrl": "."
|
||||||
|
},
|
||||||
|
"include": ["src"]
|
||||||
|
}
|
||||||
Loading…
Reference in New Issue
Block a user