北海道地区

教育システム情報学会 2015年度学生研究発表会

音のデジタル化の概念を理解するための JavaScript を用いた学習教材の開発
Development of Educational Material Using JavaScript to Aid in theUnderstanding of the Digitalization of Soundエバンズ ベンジャミン ルカ*1, 布施 泉*2, 棟方 渚*1, 小野 哲雄*1
Benjamin Luke EVANS*1, Izumi FUSE*2, Nagisa MUNEKATA*1, Tetsuo ONO*1*1 北海道大学大学院情報科学研究科*1Graduate School of Information Science and Technology, Hokkaido University*2 北海道大学情報基盤センター*2Information Initiative Center, Hokkaido University
Email: benjamin@complex.ist.hokudai.ac.jp
あらまし：我々は、音のデジタル化に関する新たな学習教材を開発した。教材は JavaScript の Web Audio
API を用いて作成され、利用者が Web ブラウザ内で各パラメータ値を自由に変更し、デジタル化の仕組みを直感的に体験できるよう設計された。教材は、音が耳に伝わる過程を粒子の伝搬レベルから説明し、物質の疎密から連続関数へのプロットや、標本化周波数の変動による再現波の違いなどを提示している。
我々は、本教材を、一般情報教育の授業で、文系の学習者 34 名に適用し、本教材が学習者の理解促進に効果があることを確認した。本稿では、この結果をもとに、音のデジタル化に関する本教材の今後の展望についても議論する。
キーワード：音のデジタル化，学習教材，JavaScript

1.

はじめにアナログ情報をデジタル情報に変換する手続きはコンピュータシステムの理解において基本的なものである。情報処理学会一般情報教育委員会では、それを大学の一般情報教育で学ぶべきものの一つとして挙げている（1）。我々は音のデジタル化に焦点を当て、その理解を助長する目的で新たな学習教材を構築した。特に、学習者が自ら教材を操作することによってデジタル化に関して自主的な学習を行い、それに対する理解や興味を促進することを目標に教材の構築をし、評価実験を行った。

2.

学習教材概要

学習教材は、実行環境の制約を受けずに利用できるようブラウザ上で機能することとし、HTML とJavaScript を用いて製作した。特に音の発生機構と発生された音の逐次データ取得機構には、2013 年よりW3C によって標準化が開始された Web Audio API（2）を利用した。なお、Web Audio API の規格は現在も開発途中にあり、その実装範囲はブラウザによって異なる。現在は Chrome ブラウザ上への API 実装が最も進んでおり、本教材も Chrome 上において正常に動作することを確認している。
教材は目次と、3 つのページ（合計 4 つの HTMLファイル）から構成される。HTML 内で実行される
JavaScript 部分は凡そ 530 行のコードからなり、HTML 上に表示される耳の挿絵と合わせて、全体で78.3KB のデータ容量となる。以下、ページごとに教材の概要を説明する。

図 1 学習教材実行画面の例
物質の疎密の伝搬であることを教えることを目的とした。学習者は周波数や波形を変化させたときの粒子の疎密状態の変化を調べることが可能である。また、その際の粒子の移動距離をグラフにプロットした物を確認することもできる。（図 1 参照）
ページ上部には、音量（実数値）、周波数（実数値）、波形（正弦波、矩形波、のこぎり波、三角波から選択）、表示領域に描画する粒子数（整数値）、粒子の移動位置を示す線の表示の有無、粒子の移動位置を描画したグラフの表示の有無、の 6 項目について学

2.1 第 1 章「音とは？」
このページでは、音が粒子の振動によって生じる

9

北海道地区

教育システム情報学会 2015年度学生研究発表会

習者が入力や設定を変更できるパネルが存在する。
最上部には、音の再生・停止ボタンがある。
設定パネルの下には、粒子の移動を示すウィンドウがある。上段には定常状態（無音状態）の粒子が黄色い点として常時提示される。下段には、再生された音に合わせて移動する粒子の様子が再現され、粒子はその移動距離によって青から赤までのグラデー シ ョ ン で 配 色 され る 。な お シ ス テ ム 内 では 、
JavaScript は先に音の生成を行い、生成された音のバイトデータから逆算してこの粒子の移動を再現するようになっている。
最下部には、粒子の移動距離をグラフとしてプロットする別のウィンドウを配置した。この画面は、音が粒子の振動から発生している事実を強調するため、デフォルトではグラフを表示させず、必要に応じて学習者が表示させることとした。また、粒子の移動位置に対応した直線を上のウィンドウから下のグラフに引くこともでき、粒子の移動距離とグラフとの対応関係を直感的に提示できるようにした。

前後に、音に関する基礎知識などを問うアンケートを行い、理解度の変化を確認するとともに教材に関する使用感や感想等を自由記述させた。
音の高さと周波数との関係について、学習者の学習前後での回答を表 1 に示す。また、音のデジタル化に関する設問（サンプリングレートの基準についての理解を問う設問）に対し、殆どが理解をしたと回答し、さらに周波数の 2 倍以上が最低でも必要との具体的な回答をした学習者が半数以上に達した。
表 1 音の高さと周波数の関係についての理解度を問うアンケート回答結果
評価項目
学習前
学習後
理解している
3 人
8 人
大体理解している
13 人
25 人
あまり理解していない
8 人
1 人
全然理解していない
5 人
0 人
そもそも周波数が何を意味
5 人
0 人
しているか分からない

2.2 第 2 章「音が耳に届く」
教材に対する感想やコメントでは、多くの学習者が肯定的なフィードバックを返した。中には、「高音質に音楽が聴きたいときにどのような媒体がふさわしいか」や「木材などの物質が音を伝える理由が気になる」等、音に関するさらなる興味や関心を喚起していることが推察されるコメントもあった。

このページでは、音が空気中を伝搬する様子を再現し、粒子の疎密が耳に到達することで音が聞こえる現象を提示した。HTML 文書のページ構成は第 1章と似ているため、ここでは主たる違いのみを示す。
第 1 章のページ上部に表示されていた各種パラメータの設定パネルは、第 2 章では最初非表示にしており、該当ボタンを押すことでそれを再表示させることができるようにした。また、連続波の描画の他に、単一波の描画も可能とし、一つの波が空間を伝搬する様子を模式的に表した。この場合、波が耳に到達した時点で音が再生されるようにしている。なお、第 2 章では現在、正弦波の場合のみ実装している。

4.

2.3 第 3 章「音信号の時間変化」
最後のページでは、音をデジタル化する際の、サンプリング周波数を変化させた場合の再現波の見え方や聞こえ方を、元の音波と比較して確認できるようにした。このページでは粒子の提示はせず、パラメータの設定パネルも必要最低限にした。
第 3 章では、提示した波に、それを任意の周波数でサンプリングした再現波を重ねてプロットできる。
また、その再現波のデータをそのままバイトアレイに投入し、再生される音を聞くことができる。第 3章では現在、正弦波の場合のみを実装している。

3.

学習教材の評価実験とフィードバック考察と展望

表 1 から、周波数の概念を全く理解できていなかった学習者は、教材を用いることで理解がなされたことがわかる。音の標本化についての理解も深まっており、本学習教材は、音のデジタル化に対する学習者の理解促進に効果的だったと言える。
また、学習後のコメントにおいて、媒体が変化した場合の音の伝搬について興味を持つ学習者が出たことから、本教材は音のデジタル化に関する基本的知識の理解促進に加え、発展的知識に対する学生の興味を引き出す効果もあったと考えられる。
今後は媒体の変化による音の伝搬の変化をシミュレートできる機構を教材に取り入れたい。それにより、真空状態では音が伝搬しない仕組みも説明できると考える。また、HTML 文書内に音声による解説や教材の利用説明をナレーションとして導入することで、本教材を、学習者の自習用教材として利用可能とし、学習効果についての比較を行う予定である。
参考文献

開発した学習教材について、北海道大学の学習者を対象に評価実験を行った。一般情報教育科目「情報学 II」を履修した文系学生 34 人に対し、音のデジタル化に関する 30 分程度の講義を、スライドも用いて行った。講義は作成した学習教材に沿って行い、教材の利用説明も行った。講義中に何度か、学習者が自由に教材を操作する時間を設けた。また、実験(1) 情報処理学会一般情報教育委員会: “情報とコンピュー テ ィ ン グ の シ ラ バ ス 案 ”,
https://sites.google.com/site/ipsj2010sigge/home （ 参 照2016.2.14）(2) W3C – Web Audio API: “W3C Edito’s Draft 05 February
2016”, http://webaudio.github.io/web-audio-api/ （ 参 照2016.2.14）

10