jnobuyukiのブログ

研究していて困ったことやその解決に関するメモ。同じように困ったあなたのために。twitter ID: @j_nobuyuki

音の印象を尋ねるウエブページの構築

本日は、音声を聞いて、その印象を尋ねるウエブページをHTML5の標準技術で(プラグインや別のサービスなし)作ることを試みます。これができると音声を聴取する調査がぐっと簡単になりますよね。

## 概要

  • 音声を提示する
  • 反応を取得する
音声を提示する

音声の提示はaudioタグを使います。audioタグには再生するファイルの指定や再生方法に関して以下のようなパラメータがあります。

  • controls: 再生ボタン、音量、再生位置などの表示( trueを明示しなくて良い)
  • src: 再生するファイルの指定
  • loop: trueまたはfalseでループ再生するかどうかを指定
  • preload: 音声をあらかじめ読み込むかどうかを指定(none, metadata, auto)
  • autoplay: 音声の読み込みが完了すると同時に再生を始めるかどうかを指定

実際にはこんな感じで書きます。
サンプルのコントローラは、音楽は魔王魂さんの作成された楽曲ファイルが再生されるように設定されています。
全曲無料・フリー音楽素材/魔王魂

<div>
<audio controls src = "ファイル名" ></audio>
</div>


反応を取得する

反応の取得はいろいろな方法があります。例えば、多肢選択による反応取得だったら、ラジオボタンがいいかもしれません。

<form>
<input name = "question" type = "radio" value = "yes">好き
<input name = "question" type = "radio" value = "no">すきではない

</form>



好き
すきではない

以上のようなhtmlフォームをjavascriptでつなぎ合わせて、反応を配列に記録していけば良いでしょう。