<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<!--
 csound.js minimal example
 Copyright (C) 2017 V Lazzarini
-->

<head>
  <title>WebAudio Csound</title>
  <style type="text/css">
  html, body {
    font-family: Monospace;
    color: #bf94f7;
    background-color: #000055;
  }
  #console {
      font-family:  Monospace;
      color: #b5b6ff;
      background-color: #000000;
      font-size: 16px;
    }

   #tit {
    font-family: Monospace;
    font-size: 24px;
    width: 810px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-style: solid;
    padding: 20px 0px;
   }

   H1 {
     font-size: 36px;
   }

  </style>
  <script type="text/javascript" src="js/csound.js"></script>
  <script type="text/javascript">
    <![CDATA[
    // called by csound.js
    function moduleDidLoad() {
      csound.Play();
      csound.CompileOrc(
        "maxalloc 1,10 \n" +
        "massign 1,1\n" +
        "instr 1 \n" +
        "icps = 440+rnd(440) \n" +
        "chnset icps, \"freq\" \n" +
        "a2 linen  0.1,0.01,p3,0.1 \n" +
        "a1 oscili a2, icps\n" +
        "outs a1,a1 \n" +
        "endin");
      document.getElementById("tit").innerHTML = "Click here to play";
    }

    function attachListeners() {
      document.getElementById("clickarea").
      addEventListener("click", Play);
    }

    var count = 0;

    function handleMessage(message) {
      var element = document.getElementById('console');
      element.value += message;
      element.scrollTop = 99999; // focus on bottom
      count += 1;
      if (count == 1000) {
        element.value = ' ';
        count = 0;
      }
    }

    var started = false;
    // click handler
    function Play() {
      if (started == false) {
        CsoundObj.CSOUND_AUDIO_CONTEXT.resume();
        started = true;
      }
      csound.Event("i 1 0 5");
    }
    ]]>
  </script>
</head>

<body>
  <div id="clickarea">
    <h1>Minimal</h1>
    <h3 id="tit"></h3>
    <textarea class="console" cols="80" rows="24" id="console">Csound: not loaded
</textarea>
  </div>
</body>

</html>
