ブラウザ上で音を鳴らす方法

音楽制作ツールである以上、最終的にはなんらかの方法で生成した音がユーザに届くようにしなければいけません。
通常のWindowsアプリケーションであれば、OSのAPIを呼び出したり、DirectX、ASIOなどを利用してスピーカーから音を鳴らす事は難しくありません。
通常のHTMLでは基本的にこれらのAPIやライブラリは呼び出すことができません。

しかし、音を再生する方法が全く無いわけではありません。
以下のような方法を使えば、ブラウザ上から音を鳴らす事ができます。

音楽ファイルを再生できるタグを利用する
Flashを利用する
Javaアプレットを利用する
ただし、これらの方法にはそれぞれメリット・デメリットがあります。
例えば、Flashでは再生時に音量や左右のパン、再生位置を調整できますが、wavフォーマットはそのままでは再生できません(2007年現在)。
また、EMBEDタグを使えばwavフォーマットのファイルを再生できますが、再生位置を調整したりすることはできません。

どの方法を採用するかについてはユーザインターフェイスの作成にも大きく影響してくるため、ソフトの目的によって実装方法を変えたり、いくつかの実装方法を組み合わせていく必要があります。

HTML上で表現する以上、どの道タグを使うことにはなるのですが、ここでは「プラグイン(FlashやJavaアプレット)上で音を鳴らす」のを除いて、タグだけをいじって音を鳴らす方法をご説明します。

古くからあるHTML上で音を再生するタグとして<BGSOUND>があります。
これを使うと、画面上にプレイヤーを表示させることなくBGMとして音楽を再生させることができ、ループ再生なども設定できます。
小さなことですが、プレイヤーが表示されるかされないか、というのは使い勝手に大きく影響がでてきます。

しかし、結論から言うとBGSOUNDは音楽制作アプリケーションには向いていないようです。
最大の理由は、このタグがInternet Explorerの独自仕様だからです。
つまり、FirefoxやSafariなどのブラウザではこのタグを使って音を再生することができません。
いくらInternet Explorerの普及率が高いとはいえ、他のブラウザで動かないとなってしまうとウェブベースアプリケーションの「環境依存しない」というメリットを失ってしまう事になります。

そこで、BGSOUNDに代わるタグとして埋め込みオブジェクト(EMBEDタグ)を利用します。
EMBEDオブジェクトはプラグインを呼び出すためのタグですが、パラメータに楽曲ファイルを指定すると自動的にそのファイルを再生可能なプラグイン(Windows Media PlayerやQuickTime)が呼び出され、ファイル再生してくれます。

ただし、EMBEDタグを使った場合の挙動は対応するプラグインによって若干変わります。
さらには、プラグインのバージョンが変わった場合などにも挙動が変わってしまう可能性もあります。

また、最近ではあまりないと思いますがWAVファイルやMP3ファイルなどを再生するプラグインが入っていない環境では、プラグインが起動せずファイルも再生されません。
ただ、Windowsの場合はWindows Media Player、Macの場合はQuickTimeなどが入っていることが多いため、EMBEDタグを使ってWAVファイルを再生させる仕様にしておけば大抵の場合WindowsでもMacでも再生できます。

なお、EMBEDタグでは基本的に再生させるファイルのパスを指定する形になるため、あらかじめ再生させる音データを生成した上でタグを吐き出す形になるため、ユーザの入力にたいしてリアルタイムに音を変化させたり…ということには対応できません。
具体的には、
ユーザがパラメータを指定→サーバー側のプログラムで音響合成してファイルに書き出し→Ajaxを使ってEMBEDタグを書き換える
という形で使用するのが一般的だと思います。

ちなみに、EMBEDタグを使った場合は画面上にプラグインのインターフェイスが表示されますが、CSSで見えない(見つかりにくい)ように設定することも出来ます。
余談ですが横幅を0px、高さを0pxにしてしまうと動作しないプラグインもあるので注意が必要です。

参考:
<embed> – オブジェクトの埋め込み (とほほのWWW入門)
http://www.tohoho-web.com/html/embed.htm

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です