音声を提示 jsPsych 8.3.0

音声を提示してキー反応を記録。スクリプトを順に読み、実行例で動きを確かめましょう。

jsPsych 8.3.0 · audio

音声を提示

開始操作の後に音声を再生

ブラウザでは、ユーザーが明示的に操作した後でないと音声の自動再生が止められることがあります。これは「自動再生制限」と呼ばれ、広告や不意の音声再生を防ぐための仕様です。そこで、この例では最初に開始ボタンを押す画面を置き、ユーザーが操作したことを明示してから音声を再生します。その後、audio-keyboard-response で音声を提示します。

最初の音声は2秒間提示し、次の音声では再生終了後のキー入力で進みます。response_allowed_while_playing: false は再生中の反応を無効にします。

開始画面
開始

→

音声1
2秒再生

→

音声2
再生後にキー入力

※ ブラウザの自動再生制限を避けるため、最初にユーザーの明示的な操作を挟みます。

ブラウザで試す ↗ HTMLを保存

このスクリプトの読み方

初期化
default_iti: 1000 / on_finish: ...

initJsPsych({...}) は、実験の全体設定をまとめて決める場所です。ここで設定した default_iti は試行と試行の間に挟む待ち時間を設定しています。on_finish は実験が最後まで終わった時に実行される処理です。今回の on_finish では jsPsych.data.displayData('csv') を呼び、反応データをCSV形式で画面に出しています。

このように、初期化の段階で実験全体のルールを決めることができます。
事前読み込み
type: jsPsychPreload / audio: [...]

使う2つの音声ファイルを先に読み込み、刺激提示時の読み込み待ちを減らします。
再生前の操作
type: jsPsychHtmlButtonResponse / choices: ['開始']

参加者に開始ボタンを押してもらいます。ブラウザでは操作前の音声自動再生が制限されるため、この画面を置きます。
1つ目の音声
tone / choices: 'NO_KEYS' / trial_duration: 2000

tone.mp3を提示し、キー反応を受け付けず、2秒後に試行を終了します。
2つ目の音声
speech / choices: 'ALL_KEYS'

speech_joke.mp3を提示し、どのキーでも反応できます。response_allowed_while_playing: false により再生中は反応できません。
実行順
jsPsych.run([preload, start, tone, speech])

事前読み込み→開始ボタン→1つ目の音声→2つ目の音声の順に進みます。

サンプルコードを見る

<!DOCTYPE html>
<html lang="ja">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>音声提示 | jsPsych 8.3.0</title>
    <script src="dist/jspsych.js"></script>
    <script src="dist/plugin-preload.js"></script>
    <script src="dist/plugin-html-button-response.js"></script>
    <script src="dist/plugin-audio-keyboard-response.js"></script>
    <link rel="stylesheet" href="dist/jspsych.css">
</head>

<body></body>

<script>
    const jsPsych = initJsPsych({
        default_iti: 1000,
        on_finish: () => {
            jsPsych.data.displayData('csv');
        }
    });

    const preload = {
        type: jsPsychPreload,
        audio: [
            'media/tone.mp3',
            'media/speech_joke.mp3'
        ],
        // auto_preload: true
    };

    const start = {
        type: jsPsychHtmlButtonResponse,
        stimulus: '<p>ボタンを押すと音声が流れます。</p>',
        choices: ['開始']
    };

    const tone = {
        type: jsPsychAudioKeyboardResponse,
        stimulus: 'media/tone.mp3',
        choices: 'NO_KEYS',
        trial_duration: 2000
    };

    const speech = {
        type: jsPsychAudioKeyboardResponse,
        stimulus: 'media/speech_joke.mp3',
        choices: 'ALL_KEYS',
        response_allowed_while_playing: false,
        prompt: '<p>音声終了後にキーを押してください。</p>'
    };

    jsPsych.run([preload, start, tone, speech]);
</script>

</html>

教材の目次に戻る ↑