ここまででThe Shodo（画面1、注1）に関する主要機能や装飾に関して触れてきましたが、情緒的な演出や機能をサポートする技術も実装されています。今回はそのうちvideo（ビデオ）とaudio（音声）というメディア系の要素と、JavaScriptの利用について紹介します。
video/audio：動画/音声を再生する
メディア系のうち、videoはコンテンツと演出の両方に使用しています。videoはHTML5の目玉の一つです。video要素のタグを記述することで、動画を再生できます。ただし、現時点ではブラウザごとに再生できるメディア形式が異なることに注意が必要です。The ShodoはIE9に最適化して開発しているので、同ブラウザがサポートするH.264というコーデックを使っています。また、他のブラウザでも見られるよう、Theoraというコーデックを使用したファイルも置いています。
The ShodoのHomeページで再生できるデモンストレーションムービーや、Tech-reviewで再生できる技術利用例のビデオのように、コンテンツとしてビデオを埋め込む際はvideo要素のタグを書くだけで実装できます。controls属性を付ければ操作用のGUI（グラフィカル・ユーザー・インタフェース）も提供されます。
演出としては、Homeページにアクセスした際に流れるイントロと、書道を行うWriteを訪れた際の墨を擦る映像がそれにあたります。サイトの世界観と内容を直感的に理解してもらうための演出です。自動的に再生し短い時間で終了するため、操作用のGUIは付けていません。そのため「読み込み完了時に再生する」「終了時に非表示にして他の処理を始める」というような制御はJavaScriptで行っています。
<video poster="/shared/video/home/demonstration.jpg" width="620" height="372" controls="controls">
<source src="/shared/video/home/demonstration.mp4" type="video/mp4" />
<source src="/shared/video/home/demonstration.ogv" type="video/ogg" />
<script src="/shared/js/Silverlight.js"></script>
<script src="/shared/js/home/video.js"></script>
<div id="demonstration-alternate"><p><a href="/shared/video/home/demonstration.mp4"><img src="/shared/video/home/demonstration.jpg" width="620" height="372" alt="Demonstration Movie" /></a></p>
</div></video>audioもHTML5の目玉で、audio要素のタグを記述することで、音声を再生できます。audioはサイト全体のBGMに使用しています（リスト2）。音による適度な刺激が持続することで、シンプルなモノトーンの世界であっても単調にならない演出のひとつとして機能しています。
<audio class="bgm">
<source src="/shared/sound/bgm_01.aac" type="audio/aac" />
<source src="/shared/sound/bgm_01.ogg" type="audio/ogg" />
<source src="/shared/sound/bgm_01.mp3" type="audio/mpeg" />
</audio>
こちらもaudio要素のタグを書くだけで実装でき、controls属性を付加することでGUIを付けられます。今回は独自に音量スライダーを実装しました（画面2）。効果音など複数の音声を再生する場合にはJavaScriptを使って、サイト全体の音量を管理するマスターボリュームと、個別の音量を管理するボリュームを分けて管理し、両方を乗じて出力する実装にすると効率的です。
そのように実装しておくとBGMと効果音の音量を個別に調整したり、反対に一括でミュートしたりと、さまざまな場面で融通が利くようになります。効果音についてはレスポンスの問題によって結果的に見送りましたが、音量スライダーがマスターボリュームの操作部品として残っています。
