古籏一浩のJavaScriptラボ ― 第36回
JSONで管理するHTML5音楽プレイヤーを作ってみた
2010年06月23日 10時00分更新
 |
|---|
HTML5 Audioを使ってブラウザー上で動くサウンドプレイヤーを作る記事の続き。前回は、再生リストから選択した音楽（音声ファイル）を再生する基本機能を作りました。このままでも十分と言えば十分ですが、今回はビジュアルエフェクトと操作ボタンを追加して、より充実した機能のプレイヤーに仕上げていきます。
ビジュアルエフェクトを追加する
まずビジュアルエフェクトを追加します。今回は、サウンドプレイヤーの背景いっぱいにcanvas要素を配置し、canvas上にランダムな色の線を描画していくラインアートのプログラムを用意しました。
HTML5 Canvasの基本的な使い方については本連載でもこれまでに取り上げているので解説は省略しますが（関連記事1、関連記事2）、背景にCanvasを表示する場合には、以下のようにwidthとheightに100%の値を設定しても反映されない問題があります。
...
