場所に基づく Audio を含む Web ページ∗前田 寛幸
東京大学工学部機械情報工学科

1

背景と目的

近年インターネットの普及により、e-commerce を始めとする Web を利用した情報公開や経営戦略が増加している。しかし現在 Web ページにおける情報はほとんどが文字・画像といった視覚的なものであり、それのみでは閲覧者に与えられる印象や情報などに限界がある。
だが、もし音声や音などの聴覚的情報をリンクやページの一角に付加し、ユーザの行動に応じてインタラクティブに提供できれば、閲覧者に対して再び訪れたいという気を強く起こさせる、理解を促進させるなどの効果が期待できる（図 1）。
この研究では、ページ各所の視覚的な情報源それぞれに音声や音を自由に設定でき、それらをインタラクティブに提供するためのツールを作成し、そのツールを実装したページを用いて、そのページが閲覧者に与える効果を評価する。

図 1. ツール付加ページのイメージ

図 2．研究室ページの付加対象の例∗ Adding Audio Fields to Web Pages, Hiroyuki Maeda andNigel Ward, Department of Mechano-informatics, School of Engineering, University of Tokyo.

Nigel Ward
東京大学情報理工学系研究科

2

閲覧者のツール利用

2.1

Audio 付加の対象

Web ページを、新聞を記事ごとに分割するように区分けする。区分けの対象として、含む意味内容に従い区切られる視覚的な一角（「場」）、「リンク」、「画像」を定義した。言い換えれば HTML の < a > 、< div > 、<table > などのタグによって囲まれた部分を Audio 付加の対象と定義し、それぞれに Audio を付加することができる。付加対象の例を図 2 に示す。

2.2

入力と対応する Audio 制御

入力は全てマウスから行なえる。ブラウジングを妨げないために、対象へのカーソル進入など、ブラウジングの中で自然に行なうことのできる行動を主な入力としている。ユーザの入力とそれに対応する制御は様々な組合せを考えることができるが、例として評価実験で採用している制御方式について以下に具体的に述べる。
場や画像は、マウスカーソルが進入すると対象について説明をする音声や BGM が再生され、その中を移動すると音源が左右に移動する。そしてカーソルが外に出ると音声や BGM は停止する。また、音声の再生中にクリックをすると音声が停止し、停止中にクリックをすると音声が再生される。すなわち、音声は聞きたい時のみ聞くことができる。
リンクは、マウスカーソルがその上を横切った際に音声の一部が聞こえるのは不愉快という意見があったた
め、進入した際には効果音のみを鳴らし、その上でしばらく（0.7 秒）停滞すると音声が再生されるようになっている。リンクから出ると効果音、音声は停止する。
その他、マウスカーソルの速度が一定値を越えると全ての入力が無視される。この機能は、ブラウザのスクロールバーなどへマウスを動かした際に音の断片が聞こえることを防ぐために設けてある。また、再生・停止は全てフェードイン・フェードアウトにより、滑らかに切り替えが行われる。

3

Audio 付加の方法

Audio を付加したい対象があるとすると、その対象に対応する HTML タグの中に、JavaScript のイベントハンドラとそのイベントに応じた JavaScript の関数を書き込むことでマウスイベント、すなわちユーザの入力に応じた制御が実現できる。また、関数の引数として Audio ファイ
ル名を与えることで、Audio の対象への付加が実現できる。具体的には、仮に < div > −−−− < /div > で表現される場に進入した際に onsei.wav を再生させたいとすると < div onM ouseOver = F unc( onsei.wav , …
) > − − −− < /div > と書けばよい。ただし Func()
は引数で指定された音声ファイルの再生命令を Java アプレットに対して行なう関数とする。
現在付加するために必要な作業は、イベントハンドラなどの HTML ソースへの書き込み、音声ファイル名や対象の座標などの関数の引数の指定、Audio ファイルの収集、の 3 つある。このうち書き込みと引数指定の作業を極力簡略化する必要がある。

4

構成と処理

ツールはファイルのダウンロードや再生制御を担当する Java アプレット、Audio ファイル名を宣言するJavaScript(Audio Define JS)、マウスイベントの処理とアプレットとの通信を行なう JavaScript(Handler JS)の 3 つから構成される。JavaScript を 2 つに分けたのは、宣言する Audio ファイル名はサイトによって異なるからである。処理の流れを図 3 に示す。
ページが最初に読まれると Handler JS は Audio Define
JS で宣言された Audio ファイル名の配列を Java アプ
レットに送り、アプレットがダウンロードを開始する。
ダウンロード終了後、JavaScript のイベントハンドラがイベント、すなわちユーザの入力を獲得するとともに Handler JS の関数を呼び、その関数がアプレットにAudio 制御の指令を送る。その命令に従いアプレットがAudio の制御を開始する。

た入力・制御の組合せについて評価することを目的としている。
評価実験で用いている Audio は音声、効果音、BGMの 3 つに分けることができ、音声に人間の声の録音を、効果音には対象の意味内容を連想させる自然の音を用いている。BGM は可能なものは連想も考慮したが、耳障りにならないことを主眼においた。
実験ではジャンルの異なる複数のページを用意し、それぞれ Audio のあるものとないものをブラウジングしてもらった。現在実験を進行中であるが、これまでの結果としてページのイメージ向上や、再び訪れたいという気にさせる、といった点でよい評価を得ている。また、音声の付加により視覚的には同一のページのまま情報を追加できるため、内容の理解がしやすくなった、という意見が得られている。だがそれとは逆に音声がテキストを読む邪魔になった、という意見もあり、この実験に用いた入力と制御の組合せでは、閲覧者によっては内容の理解を妨げる可能性があることがわかった。また今回の評価実験においては、これまでのところ効果音に関しては概して評価が低めである。理由は突然鳴ると驚く、音と付加対象のイメージが合わない、などであった。

6

問題点と今後の課題実験に用いたものは試作版であるため Netscape6 のみにしか対応していない。今後 IE にも対応させる予定である。また、wav ファイルと MIDI ファイルしか利用できず、wav ファイルが増えると低速な回線では読み込みに多大な時間がかかってしまう。
今後は評価実験をさらに進める必要がある。また、音声がテキストを読む邪魔になる可能性があるという問題について、これを改善する再生方法などを検討する必要がある。その他、ページ作成者が Audio をページに簡単に付加できるようにツールを改良していくことや、アニメーションの話し手をページ内に存在させることなども考慮している。

参考文献[1] Michael C. Albers, Eric Bergman: The Audible
Web: Auditory Enhancements for Mosaic, Proceedings of the CHI95, pp. 318-319

図 3．処理の流れ

5

評価実験

この実験では各種 Audio、特にこれまで Web ページにおいてあまり用いられていない音声がユーザの印象などに与える効果を評価すること、またこの実験で採用し[2] Stephen A. Brewster, Peter C. Wright, Alistair
D. N. Edwards: An Evaluation of Earcons for
Use in Auditory Human-Computer Interfaces,
Proceedings of InterCHI 93, pp. 222-227.
[3] Frankie James: AHA: Audio HTML Access,TheSixth International World Wide Web Conference,
1997. IW3C, pp. 129-139