１９．音声を提示（jspsych@7.3.0）
https://gyazo.com/45ae613e47844637b7f06131b659dc4b
音声を表示するコードです。
まず，コードの骨格を見ていきます。
fixation，画像の提示と同様の構造であることを確認してください。<html>，</html>，<head>，</head>，<body>，</body>，<script>~</script>があります。
ヘッダーを見ていきます。
まず，jsPsychのライブラリーを読み込みます。
次に，音声を呈示するためのプラグイン，plugin-audio-keyboard-response.jsを読み込みます。
次に，テキストを呈示するためのプラグインを読み込んでいます（注）。
次に，読込に時間がかかるので先に読み込むプラグイン，plugin-preload.jsを読み込みます。
最後に，jsPsychのスタイルシートを読み込みます。
（注）最近のwebブラウザでは，初めに音声を提示することができません。閲覧者の何かしらのアクションによって音声・動画を提示する必要があります。そこで今回は，音声を提示する前に文字を提示します。
<script>~</script>を見ていきます。
var jsPsych = initJsPsychで，jsPsychを定義していきます。
今回は今までにない設定です。default_itiでinter-trial intervalを設定します。トライアル間の空白の時間を設定できます。デフォルトでは，０m秒で設定されていますので前の刺激が終わるとすぐに次の刺激が提示されますが，これを設定すると設定した時間だけトライアル間に空白の時間を設定できます。今回は，1000（ｍ秒）とします。
on_finishでは，jsPsych.data.displayData('csv');とjsPsych.data.get().localSave('csv', 'data.csv');を同時に設定しました。
jsPsych.data.displayData('csv');は，計測終了後ブラウザにcsv形式で結果を表示します。
jsPsych.data.get().localSave('csv', 'data.csv');は，計測終了後に結果をcsv形式でdata.csvの名前でローカルに保存します。
timelineの定義です。
これまでは，定義した変数は，最後のjsPsych.runで提示する順番に追加していましたが，今回は，var timeline = [];でtimelineという名前の変数を最初に定義し，それぞれ提示する変数を定義した直後にtimeline.pushを使ってtimelineに追加していくことにします。そして，最後のjsPsych.runではtimelineだけを走らせる様にします。
次に，画像の時と同様にpreloadを定義しています。
このpreloadも定義後，timeline.push(preload);でtimelineに追加します。
次に，pre_audio を定義しました。
最近のwebブラウザでは，初めから音声を提示することができませんので，先に文章を提示し，閲覧者がボタン押しをすることにより音声が提示されるように設定します。
timeline.push(pre_audio);でtimelineに追加します。
次に，音声を提示するための変数を定義します（var trial_1，var trial_2）。
typeは，jsPsychAudioKeyboardResponseとなります。
trial_1では，trial_duration: 2000,とし，音声の提示時間を2000（m秒）としました。
trial_2では，choices: "ALL_KEYS",でどれでも良いのでキーを押すと次に進むようにしました。
ただし，response_allowed_while_playing: falseと設定することにより，音声が終わるまでキーは反応しないことにしています。
timeline.pushでtrial_1，trial_2を追加します。
最後にjsPsych.runで，timelineを走らせます。
code:AudioTest.html
<!DOCTYPE html>
<html>
<head>
<script src="dist/jspsych.js"></script>
<script src="dist/plugin-audio-keyboard-response.js"></script>
<script src="dist/plugin-html-button-response.js"></script>
<script src="dist/plugin-preload.js"></script>
<link href="dist/jspsych.css" rel="stylesheet" type="text/css" />
</head>
<body></body>
<script>
var jsPsych = initJsPsych({
default_iti: 1000,
on_finish: function () {
jsPsych.data.displayData('csv'); //終了後CSV形式でデータを画面上に表示
jsPsych.data.get().localSave('csv', 'data.csv');
}
});
/* create timeline */
var timeline = [];
var preload = {
type: jsPsychPreload,
auto_preload: true
};
timeline.push(preload);
var pre_audio = {
type: jsPsychHtmlButtonResponse,
stimulus: '<div style="max-width:450px;"><p>最近のブラウザは視聴者の操作なしで音声や動画を再生することができない設定になっています。' +
'音声や動画を提示する場合は，このページの様な指示画面を事前に挟む必要があります。</p><p>下の「続ける」のボタンを押すと音声が流れます。</p></div>',
}
timeline.push(pre_audio);
var trial_1 = {
type: jsPsychAudioKeyboardResponse,
stimulus: 'examples/sound/tone.mp3',
trial_duration: 2000,
}
timeline.push(trial_1);
var trial_2 = {
type: jsPsychAudioKeyboardResponse,
stimulus: 'examples/sound/speech_joke.mp3',
choices: "ALL_KEYS",
prompt: '<p>音声を停止したい場合はどれでも良いのでキーを押してください。</p><p>ただし，音声が停止するまでキーは反応しません。</p>',
response_allowed_while_playing: false
}
timeline.push(trial_2);
jsPsych.run(timeline);
</script>
</html>
それでは，AudioTest.htmlをresearchesに保存後，ダブルクリックして実際に動かしてみましょう。
次は動画の提示方法について説明していきます。
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】