HTML5サウンドプレイヤーのサンプル。マウスで選択した曲(音声ファイル)を再生し、ラインアートを表示する。画像クリックでサンプルページを表示します(Firefox 3/Opera 10/Safari 4で表示可能) HTML5 Audioを使ってブラウザー上で動くサウンドプレイヤーを作る記事の続き。前回は、再生リストから選択した音楽(音声ファイル)を再生する基本機能を作りました。このままでも十分と言えば十分ですが、今回はビジュアルエフェクトと操作ボタンを追加して、より充実した機能のプレイヤーに仕上げていきます。 ビジュアルエフェクトを追加する まずビジュアルエフェクトを追加します。今回は、サウンドプレイヤーの背景いっぱいにcanvas要素を配置し、canvas上にランダムな色の線を描画していくラインアートのプログラムを用意しました。 HTML5 Canvasの基本的な使い方については本連
![JSONで管理するHTML5音楽プレイヤーを作ってみた (1/4)](https://cdn-ak-scissors.b.st-hatena.com/image/square/83d1d67ce27de73e2f92ba0b4bed5dee465f2975/height=288;version=1;width=512/https%3A%2F%2Fascii.jp%2Fimg%2F2009%2F08%2F25%2F243918%2Fl%2F3d6b041bdebeee80.jpg)