Little Strange Software

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

【WebAudioAPI】半自動演奏「きよしこの夜」

f:id:little_strange:20211225225947p:plain

 

 どうも!LSSです!!

 

久しぶりの「WebAudioAPI」記事です^^

WebAudioAPI…JavaScriptからブラウザ上で音を鳴らせる仕組み

 

そしてギリギリのクリスマスネタですw

 

 

半自動演奏「きよしこの夜」

 

↑のボタンを押すと「ソ」の音が鳴ります。

もう一度押すと「ラ」の音が鳴ります。

その次はまた「ソ」…というように、「きよしこの夜」のメロディの音符順に音が鳴るので、タイミングよく押して演奏する事ができます^^

 

つまり「音階だけ事前に用意されていて、リズムはクリックする人任せ」な「半自動演奏」です。

きよしこの夜」を忠実に再現するもよし、スローテンポに演奏するもよし、全く異なるリズムで演奏する事もできちゃいますねw

 

最後まで演奏すると、また最初からになります。

 

 

コード

<style>
#btn{
width:200px;
height:200px;
font-size:100px;
}
</style>
<p><input id="btn" type="button" value="♪" /></p>
<p>
<script>// <![CDATA[
AudioContext = window.AudioContext || window.webkitAudioContext;
ctxa=new AudioContext();
btn.addEventListener('click',oc0p,false);
btn.addEventListener("dblclick",function(e){e.preventDefault();},false);
mml=[7,9,7,4,7,9,7,4,14,14,11,12,12,7,9,9,12,11,9,7,9,7,4,9,9,12,11,9,7,9,7,4,14,14,17,14,11,12,16,12,7,4,7,5,2,0];
pos=0;
function oc0p(e) {
oc0=ctxa.createOscillator();
oc0g=ctxa.createGain();
oc0t=ctxa.currentTime;
oc0.type='triangle';
oc0.frequency.value=442*Math.pow(2,(mml[pos]-9)/12);
oc0g.gain.setValueAtTime(0.01,oc0t);
oc0g.gain.linearRampToValueAtTime(0.3,oc0t+0.1);
oc0g.gain.linearRampToValueAtTime(0.01,oc0t+1);
oc0.connect(oc0g);
oc0g.connect(ctxa.destination);
oc0.start();
oc0.stop(oc0t+1);
pos++;
pos%=mml.length;
}
// ]]></script>

 

 

音階指定について

mml=[7,9,7,4,7,9,7,4,14,14,11,12,12,7,9,9,12,11,9,7,9,7,4,9,9,12,11,9,7,9,7,4,14,14,17,14,11,12,16,12,7,4,7,5,2,0];

この数値の羅列が、音階を指定している部分になります。

「ド=0」として、半音上がる毎に+1となり、例えば「ソ=7」「ラ=9」「高いド=12」となるような指定です。

 

 

 

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

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