「HTML5 ＋ Web Audio API によるオーディオデータプロセッシング」 出版決定（発売日：2015年11月24日）

HTML5 ＋ Web Audio API によるオーディオデータプロセッシング
「音」の理論から生成、分析、オリジナル電子楽器の開発まで

著者　定非営利活動法人 natural science　遠藤 理平／竹中 恭介／藤原 脩
出版社　株式会社カットシステム
判型　B5変型判、392頁
本体価格 3,800円（税込 4,104円）
ISBN　978-4-87783-375-6

はじめに

　本書は、最新ウェブテクノロジーの一つであるHTML5を用いたキーボード型電子楽器アプリケーションの作成を通して、単にHTML5によるウェブアプリケーションの開発方法だけでなく、「そもそも音とは何か？」という疑問から始まり、楽器の音色の起源や音階・調性・和音といった音楽の基礎まで、物理学と音楽の両面からアプローチし、「音」を深く理解することを目的としています。そして、両アプローチで得られた知見を元に、最終章では、電子楽器アプリケーションの開発を通じて、任意の波形の音を生成できるHTML5のWeb Audio APIの利用方法について詳しく解説します。

　Web Audio APIとは、ウェブブラウザを介してデバイスの機能を利用する各種API（Application Programming Interface）の一つです。これを用いることでDAW（デジタル・オーディオ・ワークステーション）などのソフトウェアで実現可能なミキシング、編集、フィルタリング等の機能を、なんとウェブブラウザだけで実現することができます。同APIは、ネイティブアプリケーション並の機能をもつウェブアプリケーションを開発する上で重要な役割を果すことから、非営利団体World Wide Web Consortium（W3C）による作業草案（ワーキングドラフト、WC）段階でありながら、主要ウェブブラウザでの実装がすでに進んでいます。本書は同APIの基本的な利用方法を示すことも目的の一つとし、第４章にまとめました。

　本書は、物理学、音楽、情報科学をそれぞれ学んできた立場の異なる３名で執筆されました。「音」といえば、それは波動現象という物理現象であり、それらは振幅、周波数、波長、位相というパラメータで特徴づけられ、重ねあわせの原理で全て説明できる（1.2節、2章、付録B）と考える物理屋にとって、和音や音色の美しさの裏に存在する物理法則の実感は大変新鮮でした。また、音楽を学んできた者にとっては、これまで抽象的な言葉でしか表現できなかった楽器の音色（第3章）に、物理的な裏付けが得られたことで、音楽の楽しみ方や演奏に大きな刺激がありました。また、情報科学を勉強している者にとって、物理学、音楽といった異分野を、情報科学によって橋渡しできたという喜びがありました（第4章、第5章）。本書を通じて、日常生活に非常に身近な存在である「音」に対する認識と理解が著者ら同様、深まるきっかけとなれば大変嬉しいです。

　本書の執筆は国立研究開発法人科学技術振興機構による「平成２５年度科学技術コミュニケーション推進事業ネットワーク形成地域型」という事業に採択された「『科学・技術の地産地消モデル』構築による、持続可能な学都『仙台・宮城』サイエンスコミュニティの形成～知的好奇心がもたらす心豊かな社会の創造にむけて～」（提案機関：宮城県、実施機関：特定非営利活動法人natural science）という事業の一部で実施した科学講座「音ってそもそもなんだろう？」（講師：竹中恭介、藤原脩）がきっかけとなりました。本事業の関係各位に深く感謝申し上げます。

　最後に、本書の執筆の機会を頂きました株式会社カットシステムの石塚勝敏さん、いつも丁寧な編集を行なって頂いている武井智裕さん、また、日常的に議論に付き合って頂いている特定非営利活動法人natural scienceの皆さんに、深く感謝申し上げます。

2015年12月
遠藤理平、竹中恭介、藤原脩

目次

• 第1章 音楽と私！？
  • 1.1 音楽コトハジメ
    • 1.1.1 音楽のあゆみ
    • 1.1.2 楽器の分類
    • 1.1.3 楽器の構造
    • 1.1.4 楽器と編成
    • 1.1.5 電子楽器の歴史
  • 1.2 音と波
    • 1.2.1 音の正体
    • 1.2.2 波とは？
    • 1.2.3 音波の数式による表し方
    • 1.2.4 重ね合わせの原理
    • 1.2.5 周波数に対する聞こえ方の違い
    • 1.2.6 振幅に対する音の大きさ、音の聞こえ方の関係
    • 1.2.7 波の性質を踏まえた演奏
  • 1.3 音の高さ・大きさ
    • 1.3.1 ピタゴラス音律の誕生
    • 1.3.2 平均律の誕生
    • 1.3.3 国際式音名と周波数
    • 1.3.4 音の大きさの表し方
  • 1.4 調性
    • 1.4.1 調とは
    • 1.4.2 調性と音階
    • 1.4.3 移調楽器
  • 1.5 倍音と音色
    • 1.5.1 2つの音の違い
    • 1.5.2 音色の由来
  • 1.6 和音
    • 1.6.1 和音の種類
    • 1.6.2 純正律
    • 1.6.3 純正律の周波数の計算方法
  • 1.7 拍とリズム
    • 1.7.1 拍と速さ
    • 1.7.2 拍子
  • 1.8 音をつくる
    • 1.8.1 音形
    • 1.8.2 シンセサイザーの音作り
    • 1.8.3 音形モデルADSR
  • 1.9 音楽のしくみ
    • 1.9.1 音楽のつくり
    • 1.9.2 音楽のジャンル
  • 1.10　私と音楽
    • 1.10.1　子守唄はOpen Arms
    • 1.10.2　打楽器をクビになる
    • 1.10.3　クラシックは嫌いです
    • 1.10.4 「音楽が好き」ってなんだ
• 第２章 音の波を操ろう！
  • 2.1 音生成アプリ「Sound Generator」を開発しよう！
    • 2.1.1 WebAudioAPIの概要
    • 2.1.2 オーディオデータの形式（PCM形式）
    • 2.1.3 WebAudioAPIを使ってみよう！
    • 2.1.4 音生成アプリの概要
    • 2.1.5 音の生成と再生を実行：play関数
    • 2.1.6 時間グラフを描画する関数：plotFunction関数
    • 2.1.7 周波数グラフを描画する関数：plotPowerSpectrum関数
  • 2.2 様々な音を表現しよう
    • 2.2.1 単音
    • 2.2.2 うなり
    • 2.2.3 矩形波を生成しよう！
    • 2.2.4 のこぎり波を生成しよう！
    • 2.2.5 三角波を生成しよう！
  • 2.3 ドレミファソラシド！
    • 2.3.1 音階データの作成と音符データの定義
    • 2.3.2 音符データと楽譜データの定義
    • 2.3.3 音データの生成と再生：noteon関数
    • 2.3.4 楽譜データの再生：playScore関数
  • 2.4 じゃじゃじゃじゃーん！
    • 2.4.1 「じゃじゃじゃじゃーん！」について
    • 2.4.2 音符データの拡張
    • 2.4.3 音データの生成と再生：noteon関数の拡張
  • 2.5 音形（エンベロープ）を調整しよう
    • 2.5.1 音形（エンベロープ）とは？
    • 2.5.2 聴き比べてみよう！
    • 2.5.3 音符データの拡張
    • 2.5.4 playScore関数とnoteon関数の拡張
  • 2.6 実際の曲を演奏しよう！
    • 2.6.1 かえるの歌
    • 2.6.2 オルゴールでねこ踏んじゃったを演奏だ！
    • 2.6.3 メヌエット
• 第３章 楽器の音を解析してみよう！ 1
  • 3.1 音解析アプリ「SoundAnalyzer」を開発しよう！
    • 3.1.1 音解析アプリの概要
    • 3.1.2 Audio要素による読み込みと再生
    • 3.1.3 XMLHttpRequestによるオーディオファイルの読み込みと再生
    • 3.1.4 Sound Analyzerのメイン処理
    • 3.1.5 パワースペクトルのピーク位置計算アルゴリズム
  • 3.2 弦楽器の音解析
    • 3.2.1 ヴァイオリン
    • 3.2.2 ヴィオラ
    • 3.2.3 チェロ
    • 3.2.4 コントラバス
  • 3.3 木管楽器の音解析
    • 3.3.1 フルート、ピッコロ
    • 3.3.2 クラリネット
    • 3.3.3 オーボエ
    • 3.3.4 ファゴット
    • 3.3.5 サックス
  • 3.4 金管楽器の音解析
    • 3.4.1 トランペット
    • 3.4.2 ホルン
    • 3.4.3 トロンボーン
    • 3.4.4 ユーフォニウム
    • 3.4.5 チューバ
  • 3.5 打楽器の音解析
    • 3.5.1 スネアドラム
    • 3.5.2 バスドラム
    • 3.5.3 シンバル
    • 3.5.4 ティンパニ
  • 3.6 鍵盤楽器の音解析
    • 3.6.1 チェンバロ
    • 3.6.2 ピアノ
• 第４章 Web Audio APIを極めよう！
  • 4.1 オーディオグラフ
    • 4.1.1 AudioContextクラス
    • 4.1.2 AudioNodeクラス
    • 4.1.3 AudioParamクラス
  • 4.2 音源
    • 4.2.1 OscillatorNodeクラス
    • 4.2.2 PeriodicWaveクラス
    • 4.2.3 AudioBufferクラス
    • 4.2.4 AudioBufferSourceNodeクラス
    • 4.2.5 MediaElementAudioSourceNodeクラス
    • 4.2.6 MediaStreamAudioSourceNodeクラス
  • 4.3 フィルタ
    • 4.3.1 BiquadFilterNodeクラス
    • 4.3.2 ConvolverNodeクラス
    • 4.3.3 DelayNodeクラス
    • 4.3.4 DynamicsCompressorNodeクラス
    • 4.3.5 GainNodeクラス
    • 4.3.6 WaveShaperNodeクラス
  • 4.4 出力先
    • 4.4.1 AudioDestinationNodeクラス
    • 4.4.2 MediaStreamAudioDestinationNodeクラス
  • 4.5 解析と可視化
    • 4.5.1 AnalyserNodeクラス
  • 4.6 チャンネルの分割と結合
    • 4.6.1 ChannelSplitterNodeクラス
    • 4.6.2 ChannelMergerNodeクラス
  • 4.7 立体音響
    • 4.7.1 AudioListenerクラス
    • 4.7.2 PannerNodeクラス
  • 4.8 JavaScriptによるオーディオデータ処理
    • 4.8.1 ScriptProcessorNodeクラス
    • 4.8.2 AudioProcessigEventクラス
  • 4.9 オフライン／バックグラウンド処理
    • 4.9.1 OfflineAudioContextクラス
    • 4.9.2 OfflineAudioCompletionEventクラス
  • 4.10 非同期処理（AudioWorker）（※Editor's Draft）
• 第５章 オリジナル電子楽器の開発！！
  • 5.1 単純キーボードアプリの開発
    • 5.1.1 単純キーボードアプリの概要
    • 5.1.2 キーボードイベントの取得
    • 5.1.3 鍵盤インターフェースの作成
    • 5.1.4 オーディオ再生・停止機能の追加
  • 5.2 自作オーディオクラス「MyWebAudioクラス」の開発
    • 5.2.1 MyWebAudioクラスの概要
    • 5.2.3 MyWebAudioクラスの実装（リビジョン１）
    • 5.2.4 MyWebAudioクラスを用いた単純キーボードアプリの改良
  • 5.3 単純キーボードアプリの機能拡張
    • 5.3.1 機能拡張の概要
    • 5.3.2 ホールド、オクターブ、基準音の設定部分のインターフェース
    • 5.3.3 マウスイベントの追加
    • 5.3.4 ホールド機能の追加
    • 5.3.5 オクターブ選択機能の追加
    • 5.3.6 基準音設定機能の追加
  • 5.4 音律切り替え機能の追加
    • 5.4.1 音律切り替え機能付きキーボードアプリの概要
    • 5.4.2 音律切り替え機能インターフェース
    • 5.4.3 純正律に対応した周波数の倍率を計算する関数：justIntonationRatio関数
    • 5.4.4 音律切り替え関数：changeTemperament関数
  • 5.5 オリジナル音色指定機能開発のための準備
    • 5.5.1 自作オーディオクラス「MyWebAudioクラス」の拡張（リビジョン２）
    • 5.5.2 MyWebAudioクラス（リビジョン２）の基本的使い方
    • 5.5.3 倍音成分の操作
    • 5.5.4 倍音成分操作インターフェースの自動生成
    • 5.5.5 既存楽器の倍音成分強度データの準備
    • 5.5.6 既存楽器の倍音成分強度データのプリセット
  • 5.6 オリジナル音色指定機能付きキーボードアプリ
    • 5.6.1 オリジナル音色指定機能付きキーボードアプリの概要
    • 5.6.2 メイン処理関数の拡張
    • 5.6.3 initVars関数の拡張
    • 5.6.4 keydown関数とkeyup関数の拡張
    • 5.6.5 volumeControl関数の拡張
    • 5.6.6 changeOctave関数の拡張
    • 5.6.7 changeRefTone関数
    • 5.6.8 changeTemperament関数の拡張
    • 5.6.9 changeTone関数の拡張
    • 5.6.10 initToneSamples関数の拡張
  • 5.7 さらなる拡張へ：音形（エンベロープ）調整
    • 5.7.1 時間的な音量変更の実装
    • 5.7.2 ADSRモデルによる音量調整の実装
    • 5.7.3 ADSRモデルの拡張
    • 5.7.4 MyWebAudioクラスの拡張（リビジョン３）
    • 5.7.5 muteoffメソッドとmuteonメソッドの拡張
    • 5.7.6 ADSR_ADSメソッドとADSR_Rメソッドの定義
    • 5.7.7 キーボードアプリHTML文書の拡張
• 付録A HTML5でグラフ描画：jqPlotの使い方
  • A.1 jqPlotとPlot2Dクラスの概要
    • A.1.1 jqPlotとは
    • A.1.2 ２次元グラフ描画HTML文書の解説
    • A.1.3 ２次元グラフ描画プログラムの解説
  • A.2 ２次元グラフの描画例
    • A.2.1 対数グラフ、両対数グラフ
    • A.2.2 ２軸スケールグラフ
    • A.2.3 アニメーション
  • A.3 Plot2DクラスにおけるjqPlotプロパティ
  • A.4 Plot2Dクラスのメンバ
• 付録B 世界の全てを波で表現：フーリエ解析
  • B.1 フーリエ解析の概略
    • B.1.1 フーリエ級数展開について
    • B.1.2 フーリエ級数展開の例
  • B.2 離散フーリエ級数展開のアルゴリズム
    • B.2.1 展開係数の計算アルゴリズム
    • B.2.2 展開係数の計算プログラム
    • B.2.3 実行方法と計算結果に対する注意点

付属サンプルプログラム一覧

本書で取り扱ったすべての題材にはサンプルプログラムが用意されています。