６．音声を提示
https://gyazo.com/45ae613e47844637b7f06131b659dc4b
音声を表示するコードです。
まず，コードの骨格を見ていきます。
fixation，画像の提示と同様の構造であることを確認してください。<html>，</html>，<head>，</head>，<body>，</body>，<script>~</script>があります。
ヘッダーを見ていきます。
まず，jsPsychのライブラリーを読み込みます。
次に，テキストを呈示するためのプラグインを読み込んでいます（注）。
次に，音声を呈示するためのプラグイン，jspsych-audio-keyboard-response.jsを読み込みます。
次に，読込に時間がかかるので先に読み込むプラグイン，jspsych-preload.jsを読み込みます。
最後に，jsPsychのスタイルシートを読み込みます。
（注）最近のwebブラウザでは，初めに音声を提示することができません。そこで今回は，音声を提示する前に文字を提示します。
次に<script>~</script>です。
はじめは，var timeline = [];です。
今回は，timelineという変数を定義し，このtimelineに後で定義する文字と音声を提示する変数を挿入していくことにします。
まず，preloadという変数を定義します。画像のところでも説明しました。
変数を定義したら忘れない様にすぐにtimelineに変数を追加しておきましょう。
timeline.pushを使用して，timelineの変数に追加します。
次に，文字を読み込むため，varを使ってinstructionsという名前の変数を定義します。
typeは，'html-button-response'，とします。
stimulusは，’ ’ + ’ ’… + ’ ’, の形式で記述します。1行で書ききれないときはこのように記述することができます。文章を改行したい場合は，<br>を文章の間に挿入することで改行することができます。
choicesは，選択ボタンの名前を定義します。
次に，音声を読み込むため，varを使ってtrial1とtrial2という名前の変数を定義します。
typeは，ともにaudio-keyboard-responseを使用します。
choicesは，trial1では，キーボードの'e' または 'i' を選択させ，trial2では，jsPsych.NO_KEYSでキー入力をさせないようにします。
tiral1では，promptを挿入し，文字を画面中央に出すようにします。
tiral2では，trial_ends_after_audioをtrueにすることで音声が終わるとそのtrialが終わるように設定します。
最後にjsPsych.initでtimelineを読み込みます。
code: AudioTest1.html
<!DOCTYPE html>
<html>
<head>
<title>AudioTest1</title>
<!-- jsPsych の読み込み -->
<script src="jspsych-6.3.1/jspsych.js"></script>
<!-- テキストを呈示するためのプラグイン -->
<script src="jspsych-6.3.1//plugins/jspsych-html-button-response.js"></script>
<!-- 音声を呈示するためのプラグイン -->
<script src="jspsych-6.3.1/plugins/jspsych-audio-keyboard-response.js"></script>
<!-- preload 画像や動画の読込に時間がかかるので先に読み込む。-->
<script src="jspsych-6.3.1/plugins/jspsych-preload.js"></script>
<!-- jsPsychのスタイルシート。実験画面の見た目を変えるためのもの。linkタグを使って挿入 -->
<link href="jspsych-6.3.1/css/jspsych.css" rel="stylesheet" type="text/css"></link>
</head>
<body></body>
<script>
var timeline = [];
var preload = {
type: 'preload',
auto_preload: true
}
timeline.push(preload);
var instructions = {
type: 'html-button-response',
stimulus: 'Recent versions of Chrome require the user to interact with a page before it can play audio. '+
'Clicking the button below counts as an interaction. Be aware of this when planning audio experiments if '+
'you want the first trial to include audio.',
};
timeline.push(instructions);
var trial1 = {
type: 'audio-keyboard-response',
stimulus: 'jspsych-6.3.1/examples/sound/tone.mp3',
prompt: "<p>Is the pitch high or low? Press 'e' for low and 'i' for high.</p>"
};
timeline.push(trial1);
var trial2 = {
type: 'audio-keyboard-response',
stimulus: 'jspsych-6.3.1/examples/sound/hammer.mp3',
choices: jsPsych.NO_KEYS,
trial_ends_after_audio: true
};
timeline.push(trial2);
jsPsych.init({
timeline: timeline,
on_finish: function() {
jsPsych.data.displayData();
}
});
</script>
</html>
それでは，AudioTest1.htmlをresearchesに保存後，ダブルクリックして実際に動かしてみましょう。
https://gyazo.com/ad42b4e5fba2e91518e9cc11e5c8afe2
【目次】