１４．音声を提示（jspsych@7.0.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の名前でローカルに保存します。
次に，画像の時と同様にpreloadを定義しています。
次に，pre_audio を定義しました。
最近のwebブラウザでは，初めに音声を提示することができませんので，今回は，音声を提示する前に文字を提示しボタン押しをすることにより音声を提示します。
次に，音声を提示するための変数を定義します（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と設定することにより，音声が終わるまでキーは反応しないことにしています。
最後にjsPsych.runで，preload, pre_audio, trial_1, trial_2の順番で刺激を提示する様に定義しました。
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 rel="stylesheet" href="packages/jspsych/css/jspsych.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');
}
});
var preload = {
type: jsPsychPreload,
auto_preload: true
};
var pre_audio = {
type: jsPsychHtmlButtonResponse,
stimulus: '<div style="max-width:450px;"><p>最近のブラウザは視聴者の操作なしで音声や動画を再生することができない設定になっています。'+
'音声や動画の計測をする場合は，このページの様な指示画面を最初に挟む必要があります。</p><p>下の「続ける」のボタンを押すと音声が流れます。</p></div>',
choices: '続ける'
}
var trial_1 = {
type: jsPsychAudioKeyboardResponse,
stimulus: 'examples/sound/tone.mp3',
trial_duration: 2000,
}
var trial_2 = {
type: jsPsychAudioKeyboardResponse,
stimulus: 'examples/sound/speech_joke.mp3',
choices: "ALL_KEYS",
prompt: '<p>音声を停止したい場合はどれでも良いのでキーを押してください。</p><p>ただし，音声が停止するまでキーは反応しません。</p>',
response_allowed_while_playing: false
}
jsPsych.run(preload, pre_audio, trial_1, trial_2);
</script>
</html>
それでは，AudioTest.htmlをresearchesに保存後，ダブルクリックして実際に動かしてみましょう。
次は動画の提示方法について説明していきます。
→　１５．動画を提示（jspsych@7.0.0）
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】
・０．はじめに　jsPsychの使い方
・１１．jsPsych(v7.0.0)のインストール
・１２．fixationを提示（jspsych@7.0.0）
・１３．画像を提示（jspsych@7.0.0）
・１５．動画を提示（jspsych@7.0.0）