このページの本文へ

PROGRAMMING 古籏一浩のJavaScriptラボ ― 第44回

Firefoxでソフトシンセも作れるAudio Data APIの使い方

2010年10月26日 10時00分更新

古籏一浩

  • この記事をはてなブックマークに追加
本文印刷
js-labo

 HTML5ではメディア要素としてAudioが定義され、プラグインを使わずに音声を扱えます。HTML5 Audioについては本連載でも何度か取り上げてきました。

・第35回「HTML5 Audioで作るiTunes風音楽プレイヤー」
http://ascii.jp/elem/000/000/525/525808/
・第36回「JSONで管理するHTML5音楽プレイヤーを作ってみた」
http://ascii.jp/elem/000/000/531/531370/
・第37回「iPad対応!HTML5 Audioで作るブラウザーピアノ」
http://ascii.jp/elem/000/000/533/533100/

 これまでに作成したHTML5 Audioのサンプルは、事前に用意したオーディオファイルを再生しており、プログラムで音を生成しているわけではありませんでした。一方、Firefox 4(ベータ版)に搭載されたAudio Data APIを使うと、JavaScriptのプログラムで自在に音を生成したり、オーディオファイルの内容にアクセスしたりできます。

 上記のページにはFFT(フーリエ変換)を使って音の周波数を表示するサンプル(Audio Spectrum)が掲載されており、オーディオビジュアライザーを作りたい人は参考になるでしょう。さらに努力次第では、8ビットコンピューターに搭載されていたPSG音源やFM音源、音声合成などもFirefox上で再現できるかもしれません。

 今回のJavaScriptラボは、サンプルをいくつか作りながらAudio Data APIの使い方を解説します。Audio Data APIはW3Cで標準化が検討されていますが、現時点ではFirefox 4(ベータ版)でのみ利用できます。現状のイベントやプロパティ名はFirefox独自の仕様ですので、今回のサンプルは他のブラウザーがAudio Data APIに対応してもFirefoxでしか動作しない可能性が高く、Firefoxのバージョンアップに伴って動作しなくなる可能性もあります。あくまでも実験レベルでこんなことができる、という前提で試してください。

書影

「まとめてじっくり読みたい!」という読者のみなさまの声にお応えし、この連載が本になりました。書籍化にあたって加筆修正し、記事公開後の最新情報やコラムも盛り込んでいます。

HTML5+JavaScript アイデア&実践サンプル

本体 2,800+税、B5変形判312ページ(オール4色刷)
ISBN:978-4-04-870448-9

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング