first working example

Author: joachimheintz

_layouts/examples.html

@@ -3,6 +3,7 @@
 ---
 
 <script type="text/javascript" src="/learn/examples/examples.js"></script>
+<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
 
 
 <div class="container-fluid page-banner-background">
@@ -17,10 +18,13 @@ <h1 class="display-7">{{ page.title }}</h1>
       <div class="row">
         <div class="col-xl-10 col-lg-10 col-md-12 col-sm-12">
           {{ content }}
-          <div id="click area" onclick="play()" style="margin-top:30px;">
-<p>[First Test while developing this page:</p>
-<p> Click in this area to hear a sound.]</p>
-</div>
+          <button id="play" onclick="start()"><i class="fa fa-play"></i></button>
+          <button id="pause" onclick="pause()"><i class="fa fa-pause"></i></button>&nbsp;
+          <a href="/learn/examples/pling.csd"><i class="fa fa-download"></i></button>
+    <p>
+      <textarea class="console" cols="80" rows="5" id="console">
+      </textarea>
+    <p>
 
         </div>
       </div>

_layouts/examples2.html

@@ -304,3 +304,11 @@ footer a:hover {
 .team-caption img {
   height: 5rem;
 }
+
+
+/* Projects */
+
+.console {
+    font-size: 0.75rem;
+    font-family: monospace;
+}

assets/css/main/csound-site.css

@@ -1,7 +1,24 @@
 ---
-layout: examples2
+layout: examples
 title: Examples
 permalink: /examples.html
 ---
 
-coming soon ...
+This is a small collection of modern coding practice in Csound.
+
+## Pling
+
+Three lines of code generating a structure of short events.
+
+```csound
+instr Pling
+  // generate one tone in a wide range between short/noisy and long/pitched
+  aMode = mode(mpulse(ampdb(random:i(-22,0)),p3),mtof:i(random:i(80,100)),10^(p3-1))
+  // distribute anywhere in the stereo field and output
+  aL,aR pan2 aMode,random:i(0,1)
+  out(aL,aR)
+  // call the next instance of this instrument
+  schedule("Pling",rnd:i(1),random:i(1,4))
+endin
+schedule("Pling",0,3)
+```

learn/examples.md

@@ -1,31 +1,76 @@
+// play "pling.csd"
 
+// csound.js is the Csound WASM module
+const csoundjs = "https://www.unpkg.com/@csound/browser@6.18.7/dist/csound.js";
 // csound is the Csound engine object (null as we start)
 let csound = null;
 
-// csound synthesis code
-const code = `
-instr 1
-  out linenr(oscili(0dbfs*p4,p5),0.01,0.5,0.01)
-endin
-schedule(1,0,1,0.2,A4)
-`;
-
-// this is the JS function to run Csound
-async function play() {
+// instrument on/off state
+let isOn = false;
+// CSD file name
+const csd = '/learn/examples/pling.csd'
+// this is the JS function to start Csound
+// and resume performance if needed
+async function start() {
 // if the Csound object is not initialised
 if(csound == null) {
 // import the Csound method from csound.js
-const { Csound } = await import('https://www.unpkg.com/@csound/browser@6.18.7/dist/csound.js');
-// create a Csound engine object
+const { Csound } = await import(csoundjs);
+// create a Csound engine object inside the context actx
 csound = await Csound();
-// set realtime audio (dac) output  
-await csound.setOption("-odac");
-// compile csound code
-await csound.compileOrc(code);
+// copy the CSD file to the Csound local filesystem
+await copyUrlToLocal(csd,csd)
+// compile the code in the CSD file
+await csound.compileCsd(csd)
+// handle Csound messages
+await csound.on("message", handleMessage);
 // start the engine
 await csound.start();
-} else
-// if not just send an event to play a sound
-await csound.inputMessage('i1 0 1 0.2 440');
+isOn = true;
+}
+// start performance if paused
+if(!isOn) {
+ await csound.resume();
+ isOn = true;
+}
+}
+
+let count = 0;
+function handleMessage(message) {
+// get the display element (called console in the page)
+let element = document.getElementById('console');
+// add the message to HTML content (plus a newline)
+element.innerHTML += message + '\n';
+// focus on bottom, new messages make the display scroll down
+element.scrollTop = 99999;
+// clear display every 1000 lines
+if(count == 1000) {    
+count = 0;
+element.innerHTML == "";
+}
+count += 1;
+};
+
+// Copy file to local filesystem
+async function copyUrlToLocal(src, dest) {
+// fetch the file
+let srcfile = await fetch(src)
+// get the file data as an array
+let dat = await srcfile.arrayBuffer();
+// write the data as a new file in the filesystem
+await csound.fs.writeFile(dest, new Uint8Array(dat));
+}
+
+// toggle performance on/off
+async function pause() {
+if(csound != null) {
+if(isOn) {
+ await csound.pause();
+ isOn = false;
+} else  {
+ await csound.resume();
+ isOn = true;
+}
+}
 }
 

learn/examples/examples.js

@@ -11,16 +11,16 @@ seed 0
 
 // by joachim heintz
 
-instr PlingStruct
+instr Pling
   // generate one tone in a wide range between short/noisy and long/pitched
   aMode = mode(mpulse(ampdb(random:i(-22,0)),p3),mtof:i(random:i(80,100)),10^(p3-1))
   // distribute anywhere in the stereo field and output
   aL,aR pan2 aMode,random:i(0,1)
   out(aL,aR)
   // call the next instance of this instrument
-  schedule("PlingStruct",rnd:i(1),random:i(1,4))
+  schedule("Pling",rnd:i(1),random:i(1,4))
 endin
-schedule("PlingStruct",0,3)
+schedule("Pling",0,3)
 
 </CsInstruments>
 <CsScore>