csound/browserを見てみる

片足で飛ぶ

csoundの文法などの話（こっちの方が難しいけど）これは別途として、csound/browserを動かして少し確認。しよう。これができるとp5と同居して音響的な部分までブラウザで完結できる。

sampleの"1.Ping"のindex.htmlの中身を少し変更したもので解説します。

<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title>Ping</title>
</head>
<script type="text/javascript">
const csoundjs = "../js/csound.js";   // csound.js is the Csound WASM module
let csound = null;        // csound is the Csound engine object (null as we start)


const code = ` // csound synthesis code
     instr 1
        out linenr(oscili(0dbfs*p4,p5),0.01,0.5,0.01)
     endin
     ;schedule(1,0,1,0.2,A4)

     instr 3
       idur = p3
       icps = 440*powoftwo((p4-69)/12.0)
       iamp = p5 *60
       irad = p6

       k1 linseg 0,idur/3,iamp*0.95,idur*2/3, 0
       a1 shaker k1, icps*0.998, 8, 0.999, 100, 0
       a2 shaker k1, icps*1.002, 8, 0.999, 100, 0
       ares1 wguide2 a1, 30, 100, 10, 150, 0.2, 0.27
       ares2 wguide2 a2, 1300, 100, 1100, 150, 0.2, 0.28

       k2 linseg 0,idur*2/3,iamp*0.95,idur/3,0
       a3 shaker k2, icps*0.999, 8, 0.999, 100, 0
       a4 shaker k2, icps*1.001, 8, 0.999, 100, 0
       ares3 wguide2 a3, 300, 100, 400, 150, 0.2, 0.25
       ares4 wguide2 a4, 1300, 100, 1400, 150, 0.2, 0.25

       asig = ares1+ares2+ares3+ares4
       arev reverb asig, 1.0
       adly delay asig, 0.05, 0
       aL = $M_SQRT2/2.0*(cos(irad)+sin(irad))*(asig+arev*0.2+adly)
       aR = $M_SQRT2/2.0*(cos(irad)-sin(irad))*(asig+arev*0.2+adly)

       outs aL, aR
     endin
schedule(3,0,15,37,15,-0.7)
`;

async function play() { // this is the JS function to run Csound
  if(csound == null) { // if the Csound object is not initialised
    const { Csound } = await import(csoundjs); // import the Csound method 
    csound = await Csound(); // create a Csound engine object
    await csound.setOption("-odac"); // set realtime audio (dac) output
    await csound.compileOrc(code); // compile csound code
    await csound.start(); // start the engine
  } else { // if not just send an event to play a sound
    score=`i1 0 1 0.2 440
                i3 0 12 40 12 0.2
                i1 3 1 0.2 340`;
    await csound.inputMessage(score);
  }
}

</script>
<body>
    <div id="click area" onclick="play()">
        <h1>Ping</h1>
        <p> Click here to hear a sound.</p>
    </div>
<hr>
    <p><a href="./readme.html">README</a></p>
    <!-- hhmts start -->Last modified: Thu Dec 8 16:09:54 GMT 2022 <!-- hhmts end -->
  </body>
</html>

1.Ping/index.htmlを改変したコード

まず手元にコードのコピーを持ってくる

git clone https://github.com/vlazzarini/vanilla

https://vlazzarini.github.io/vanilla/

そうすると、こんなディレクトリとかファイルがサンプルのページと同じようにローカルにできる。(gitに慣れていない人には少し難しいかも。僕も付け焼刃ですけどね）

1.Ping/      11.Rubber/  3.Sliders/   5.Nodes/   7.Render/   9.WTab/   index.html
10.Tonnetz/ 2.Penta/    4.Plucks/    6.Stria/      8.Reso/       README.md    js/

「ローカルにwebサーバを立てなくちゃいけない」と言われてわからない人もいると思うな。でも、すっ飛ばす。説明を求められたらいくらでも説明できるけど書くのは面倒。ごめんなさい。

nodejs/browserSynchを使ってページを見ると動く。

ここで確認したことは基本的に二つ

  1. 普通にcsound の score（楽譜）が書けるのか　→　できる！！

  2. 普通に複数の楽器を独自に定義できるのか　　→　できる！！

これなら、好き勝手出来ることが判明！

サンプルをさらに読み進むと分かるのですが、前に書いたnoteに書いたcsoundのcsdファイルをそのままhtml, JavaScript, 外部ファイルとしておいとくことができるので、この方が楽譜が決まって最初から最後まで演奏するならこちらの方が楽。

でも、楽譜の一部があって、それをばらばらとあるイベントで演奏するならこちらの書き方の方がいいので何をしたいかによるのでしょう。

ばらばらと演奏したいけど、ちゃんとBPMに乗せて演奏するとかできないのかな。小節の3拍目みたいな。だめならその次の次の小説の3拍目みたいな。

あれ、もしかすると、CsoundObj.setScoreOffsetSeconds(time)かな？
今度はそのあたりも見てみないと。