Little Strange Software

スマホアプリの開発を行う LittleStrangeSoftware のブログです。

【JavaScript】できないと思ってたらできた!? Web Audio API でJavaScriptから音を生成(サンプル第一歩目w)

 どうも!LSSです!!

 

「できたらいいのに」と思っていた事のひとつに、
JavaScriptで音を生成して鳴らす」
があります。

 

JavaScriptで音をどうこうする、のは、知ってる限りでは
「別途音声ファイルを用意し、それを演奏したり止めたりの制御ができる」
ぐらいで、MIDIのように音階・音量を指定して演奏するような事はできないもの、と思ってました。

 

…が、実はそれができちゃったようです!?

 

 

f:id:little_strange:20210321210553p:plain

 

WebAudioAPIを使用したサンプル

 

コード

<input id="oto1" type="button" value="音を鳴らす" />
<script>// <![CDATA[
oto1.addEventListener('click',oc0p,false);
AudioContext = window.AudioContext || window.webkitAudioContext;
ctxa=new AudioContext();

function oc0p() {
oc0=ctxa.createOscillator();
oc0g=ctxa.createGain();
oc0t=ctxa.currentTime;
oc0.type='sine';
oc0.frequency.setValueAtTime(350,oc0t);
oc0.frequency.linearRampToValueAtTime(100, oc0t + 0.5);
oc0g.gain.setValueAtTime(0.4, oc0t);
oc0g.gain.exponentialRampToValueAtTime(0.01, oc0t + 0.5);
oc0.connect(oc0g);
oc0g.connect(ctxa.destination);
oc0.start();
oc0.stop(ctxa.currentTime + 0.5);
}
// ]]></script>

 

 

音作りの設定箇所

コード中の、

oc0.frequency.setValueAtTime(350,oc0t);
oc0.frequency.linearRampToValueAtTime(100, oc0t + 0.5);
oc0g.gain.setValueAtTime(0.4, oc0t);
oc0g.gain.exponentialRampToValueAtTime(0.01, oc0t + 0.5);

この部分、で、赤字で示す数値を変更する事で音が作れます。

 

前半2行は「frequency(音の高さ)」に関する部分で、このコードだと
「高さ350の音から始まり、0.5秒かけて高さ100に変化する」
という意味になります。

 

後半2行は「gain(音量)」に関する部分で、このコードだと
「最初は音量0.4から始まり、0.5秒かけて音量0.01に変化する」
という意味になります。

 

 

WebAudioAPI、かなり奥が深そう…

網羅していそうなサイトは

developer.mozilla.org

ですが、情報量多いです!

まずゼロから理解するのは無理そうでしたが、色々ググったうち、

 

www.webprofessional.jp

このページがなんとか、理解しやすかったです^^

 

あと、

qiita.com

このページも合わせて読む事で、更に理解しやすくなりました^^

 

 

思うままに効果音が作れる…

…ようになるには、かなり道のりが遠そうですw

 

なお、できないものとばかり思っていたのを改めて調べようとしたきっかけは

 

【制作中】もぐらたたき「倍速もぐら と 超速もぐら」

にいただいた、

421miyako(id:m421miyako)

最初、簡単じゃん!って思いましたけどどんどん早くなりますね。ところで音を出すコートってあるんですか?たたいたら音が出るとか。

のコメントでした^^

 

諦めずに調べてみるのも大切ですね!

いつも皆様のコメントに、成長のきっかけをいただいております(多謝!)

 

 

 

ってなとこで、今回はこのへんで!

次回もまた、よろしくお願いします^^