APIを使ってクリスマスソングを鳴らそう##はじめにこの記事はリンク情報システムの2018年アドベントカレンダーのリレー記事です。グループメンバによってリレーされます。(リンク情報システムのFacebookはこちらから)私がこの題材を選んだ理由ですが、趣味でDTMなど楽しんでおり、音に関するプログラムならば興味を持って調べられるのではないかと考えたからです。私はプログラマーではないので、技術要素は少ないのですが、どうぞよろしくお願い致します。本日はクリスマス・イブということでクリスマスソングを題材にしてみました。近年のデスクトップ・オーディオ制作アプリケーションに見られるミキシング、プロセシング、フィルタリング処理に加え、近年のゲームオーディオエンジンに見られるような機能も持たせる事を目標とします。Webブラウザでは、Audioを扱うためには、HTML5のAudioタグを使うことなどが考えられますが、それにしても自由な音作りというものではなく、それってつまりは”予め用意された音源”をただ鳴らすことです。ところが、このWebAudioAPIというものができて以来、Webブラウザで簡単にシンセサイザーが作れると言うではないですか。Yマハ、Kルグ、R-ランド等楽器メーカーでないとできないと思っていたことが、素人でも出来そうです。いう風につなげるものだそうです。オーディオコンテキストというオブジェクトを作ります。AudioContext();1行目のところは、クロスブラウザに対応するためのコードだそうです。(古いwebkit/blinkブラウザではプレフィックスが必要らしいです。)###オシレーターなどのソースを作成するcreateOscillator()でオシレーターのオブジェクトを作ります。以下の例のようにして音符の長さと音程を指定します。音程の一覧表がありました。(DTM)このサイトを参考に鳴らす音程を周波数に計算しなおしてhzに代入することができました。###到達先を選択する標準的な記載方法は以下のようなものだそうです。AudioContext();gainNode.connect(audioContext.destination);###イベントを設定するHTML上で何かしら音を鳴らすためのイベントを設定します。クリックイベントの例です。playbackTime);}##クリスマスソングをWebブラウザでこうして、HTML上にイベントを発生させるものを記載して、クリックすることでクリスマスソングを鳴らせるようにしてみました。Christmas」の曲が流れます。下の緑色のBOXは、オシレータから接続したアナライザーを通して、可視化した波形になります。今回は、矩形波を使ってのサンプルを作ったので、まるで櫛の歯のような形状をしています。1曲鳴り終わると、波形もただの一本の横棒となります。クリスマスシーズン等に、紙製のカードを贈ったことはありませんか?まるで、そのクリスマスカードから音がでているかのような感じです。お好みのメッセージを添えて、メールで送ってあげることもできますね。音をお聞かせできないのが残念です・・・(本当にちゃんと作ったんですよ~、参考文献をかなり真似して・・・)↓先輩から、「動画〜動画〜」と催促されたので、これ用のアカウント作って録画しました。2018##参考文献なお、記事を作成するにあたり、以下の文献からほとんどの情報を得ています。素晴らしい記事をありがとうございます。WebAudioAPIでコインの音を作るのサイトのサンプルが初めて画面で音が出せた時の感動はひとしおでした~。APIでコインの音を作る##最後に実際に作ってみて音を鳴らしてみた時の感動は何ものにも代えがたいものでした。趣味の知識を活かして、これからもちょっとした効果音や音楽等、作ってみたいと思いました。