Bitrhythm: Check-in [941581eece]

Many hyperlinks are disabled.
Use anonymous login to enable hyperlinks.

Overview

Comment:	Cleanup post presentation Worklet code
Downloads:	Tarball \| ZIP archive \| SQL archive
Timelines:	family \| ancestors \| descendants \| both \| trunk
Files:	files \| file ages \| folders
SHA3-256:	941581eecee2bc7037e154fae330ae0ed19d598a7f98cda5d6b200c801b6c894
User & Date:	dev 2022-02-15 23:20:56

Context

2022-03-27
22:44		Updating JUCE link and build scripts check-in: 4cb0fff742 user: dev tags: trunk
2022-02-15
23:20		Cleanup post presentation Worklet code check-in: 941581eece user: dev tags: trunk
2021-11-16
10:11		Cleanup of Docs check-in: a03a381331 user: dev tags: trunk

Changes

Hide Diffs Unified Diffs Ignore Whitespace Patch

Changes to build/html/alternate-implementation.html.

    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Saving and other limitations" href="limitations.html" />
    <link rel="prev" title="Code Walkthrough" href="main.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................

              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="main.html" title="previous page">Code Walkthrough</a>
    <a class='right-next' id="next-link" href="limitations.html" title="next page">Saving and other limitations</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Saving / Recording / Streaming" href="saving.html" />
    <link rel="prev" title="Code Walkthrough" href="main.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
................................................................................
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................

              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="main.html" title="previous page">Code Walkthrough</a>
    <a class='right-next' id="next-link" href="saving.html" title="next page">Saving / Recording / Streaming</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">

Changes to build/html/bookmarks.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#webaudio">
   WebAudio
  </a>





 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#obsevers">
   Obsevers
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
................................................................................
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#algorithmic-music">
   Algorithmic Music
  </a>
 </li>










</ul>

            </nav>
        </div>
    </div>
</div>
    <div id="main-content" class="row">
................................................................................
<a class="reference external" href="https://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/">https://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/</a><br />
<a class="reference external" href="https://github.com/ideoforms/isobar">https://github.com/ideoforms/isobar</a><br />
<a class="reference external" href="https://github.com/tmhglnd/mercury/blob/master/docs/reference.md">https://github.com/tmhglnd/mercury/blob/master/docs/reference.md</a><br />
<a class="reference external" href="https://github.com/thedjinn/js303">https://github.com/thedjinn/js303</a><br />
<a class="reference external" href="https://www.sitepoint.com/creating-accurate-timers-in-javascript/">https://www.sitepoint.com/creating-accurate-timers-in-javascript/</a><br />
<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques</a><br />
<a class="reference external" href="https://webaudiodemos.appspot.com/">https://webaudiodemos.appspot.com/</a><br />
<a class="reference external" href="https://www.html5rocks.com/en/tutorials/audio/scheduling/">https://www.html5rocks.com/en/tutorials/audio/scheduling/</a></p>

















</div>
<div class="section" id="obsevers">
<h2>Obsevers<a class="headerlink" href="#obsevers" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://github.com/rsimmons/plinth">https://github.com/rsimmons/plinth</a><br />
<a class="reference external" href="https://github.com/gullerya/object-observer">https://github.com/gullerya/object-observer</a><br />
<a class="reference external" href="https://awesomeopensource.com/project/nx-js/observer-util">https://awesomeopensource.com/project/nx-js/observer-util</a><br />
<a class="reference external" href="https://doc.esdoc.org/github.com/jstoolkit/dom-observer/">https://doc.esdoc.org/github.com/jstoolkit/dom-observer/</a><br />
................................................................................
<a class="reference external" href="https://medium.com/swlh/building-a-audio-visualizer-with-javascript-324b8d420e7">https://medium.com/swlh/building-a-audio-visualizer-with-javascript-324b8d420e7</a><br />
<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API</a><br />
<a class="reference external" href="https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/">https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/</a><br />
<a class="reference external" href="https://1mb.club/">https://1mb.club/</a></p>
</div>
<div class="section" id="misc">
<h2>Misc<a class="headerlink" href="#misc" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://gist.github.com/sroccaserra/5bacbdb3e000a54dbae0972c346021d4">https://gist.github.com/sroccaserra/5bacbdb3e000a54dbae0972c346021d4</a></p>

<p><a class="reference external" href="https://teropa.info/blog/2016/08/10/frequency-and-pitch.html">https://teropa.info/blog/2016/08/10/frequency-and-pitch.html</a><br />
<a class="reference external" href="http://www.pawfal.org/fluxus/documentation/">http://www.pawfal.org/fluxus/documentation/</a><br />
<a class="reference external" href="https://music.tutsplus.com/tutorials/how-to-create-acid-synth-sequences--audio-3000">https://music.tutsplus.com/tutorials/how-to-create-acid-synth-sequences–audio-3000</a><br />
<a class="reference external" href="https://acidvoice.com/tb_303_famous_patterns.php">https://acidvoice.com/tb_303_famous_patterns.php</a><br />
<a class="reference external" href="https://www.adsrsounds.com/ni-massive-tutorials/dub-techno-synth-stab-tutorial/">https://www.adsrsounds.com/ni-massive-tutorials/dub-techno-synth-stab-tutorial/</a><br />
<a class="reference external" href="https://medias.ircam.fr/x9d4352">https://medias.ircam.fr/x9d4352</a><br />
<a class="reference external" href="https://vuejsexamples.com/a-drum-synthesizer-sequencer-built-with-tone-js-and-vue-js/js">https://vuejsexamples.com/a-drum-synthesizer-sequencer-built-with-tone-js-and-vue-js/js</a><br />
<a class="reference external" href="https://areknawo.com/10-libraries-for-web-audio-stuff/">https://areknawo.com/10-libraries-for-web-audio-stuff/</a><br />
................................................................................
<a class="reference external" href="https://github.com/kevincennis/TinyMusic">https://github.com/kevincennis/TinyMusic</a><br />
<a class="reference external" href="https://github.com/pixicoder/PS">https://github.com/pixicoder/PS</a><br />
<a class="reference external" href="https://github.com/swallez/livecoding-webaudio-tonejs">https://github.com/swallez/livecoding-webaudio-tonejs</a><br />
<a class="reference external" href="https://padenot.github.io/litsynth/">https://padenot.github.io/litsynth/</a></p>
</div>
<div class="section" id="inspiration">
<h2>Inspiration<a class="headerlink" href="#inspiration" title="Permalink to this headline">¶</a></h2>

<p><a class="reference external" href="https://github.com/AuburnSounds/Dplug/wiki/Dplug-VST2-Guide">https://github.com/AuburnSounds/Dplug/wiki/Dplug-VST2-Guide</a><br />
<a class="reference external" href="https://github.com/tmhglnd/mercury">https://github.com/tmhglnd/mercury</a><br />
<a class="reference external" href="https://www.mazbox.com/synths/dubstep/">https://www.mazbox.com/synths/dubstep/</a><br />
<a class="reference external" href="https://cdm.link/2019/04/automated-techno-eternal-flow/">https://cdm.link/2019/04/automated-techno-eternal-flow/</a><br />
<a class="reference external" href="https://survios.com/electronauts/">https://survios.com/electronauts/</a><br />
<a class="reference external" href="https://liv3c0der.com/">https://liv3c0der.com/</a><br />
<a class="reference external" href="http://wavepot.com/">http://wavepot.com/</a><br />
<a class="reference external" href="https://glicol.web.app/">https://glicol.web.app/</a><br />
................................................................................
<a class="reference external" href="https://tweakable.org/">https://tweakable.org/</a>
<a class="reference external" href="https://foxdot.org/docs/pattern-functions/">https://foxdot.org/docs/pattern-functions/</a><br />
<a class="reference external" href="https://faustdoc.grame.fr/">https://faustdoc.grame.fr/</a><br />
<a class="reference external" href="https://www.fsynth.com/">https://www.fsynth.com/</a><br />
<a class="reference external" href="https://errozero.co.uk/acid-machine/">https://errozero.co.uk/acid-machine/</a><br />
<a class="reference external" href="https://the.wubmachine.com/">https://the.wubmachine.com/</a><br />
<a class="reference external" href="https://scribbletune.com/documentation/browser/browser-clip">https://scribbletune.com/documentation/browser/browser-clip</a><br />
<a class="reference external" href="https://djen.co/">https://djen.co/</a></p>

</div>
<div class="section" id="music">
<h2>Music<a class="headerlink" href="#music" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="http://www.p01.org/256b_woman_farmer/">http://www.p01.org/256b_woman_farmer/</a><br />
<a class="reference external" href="https://aem1k.com/">https://aem1k.com/</a><br />
<a class="reference external" href="https://ludotune.com/">https://ludotune.com/</a><br />
<a class="reference external" href="https://www.mazbox.com/synths/dubstep/">https://www.mazbox.com/synths/dubstep/</a></p>
</div>
<div class="section" id="algorithmic-music">
<h2>Algorithmic Music<a class="headerlink" href="#algorithmic-music" title="Permalink to this headline">¶</a></h2>

<p><a class="reference external" href="https://cmsw.mit.edu/algorithmic-music-experience-composing-wolframtones/">https://cmsw.mit.edu/algorithmic-music-experience-composing-wolframtones/</a><br />
<a class="reference external" href="https://ccrma.stanford.edu/~blackrse/algorithm.html">https://ccrma.stanford.edu/~blackrse/algorithm.html</a><br />
<a class="reference external" href="https://oeis.org/">https://oeis.org/</a><br />
<a class="reference external" href="https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html">https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html</a>
<a class="reference external" href="https://en.wikipedia.org/wiki/Computational_creativity">https://en.wikipedia.org/wiki/Computational_creativity</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Algorithmic_composition">https://en.wikipedia.org/wiki/Algorithmic_composition</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Constraint_programming">https://en.wikipedia.org/wiki/Constraint_programming</a><br />
<a class="reference external" href="https://www.bipscript.org/">https://www.bipscript.org/</a><br />
<a class="reference external" href="http://commonmusic.sourceforge.net/cm/res/doc/cm.html">http://commonmusic.sourceforge.net/cm/res/doc/cm.html</a><br />
<a class="reference external" href="https://bolprocessor.sourceforge.io/docs/">https://bolprocessor.sourceforge.io/docs/</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Music_Macro_Language">https://en.wikipedia.org/wiki/Music_Macro_Language</a><br />
<a class="reference external" href="https://github.com/IjzerenHein/kiwi.js/">https://github.com/IjzerenHein/kiwi.js/</a></p>






















</div>
</div>


              </div>








|
|







 







>
>
>
>
>







 







>
>
>
>
>
>
>
>
>
>







 







|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







|
>
|







 







>
|







 







|
>










>
|










|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#webaudio">
   WebAudio
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#audio-worklets-and-wasm">
   Audio Worklets and Wasm
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#obsevers">
   Obsevers
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
................................................................................
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#algorithmic-music">
   Algorithmic Music
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#sound-design">
   Sound Design
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#clocks">
   Clocks
  </a>
 </li>
</ul>

            </nav>
        </div>
    </div>
</div>
    <div id="main-content" class="row">
................................................................................
<a class="reference external" href="https://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/">https://catarak.github.io/blog/2014/12/02/web-audio-timing-tutorial/</a><br />
<a class="reference external" href="https://github.com/ideoforms/isobar">https://github.com/ideoforms/isobar</a><br />
<a class="reference external" href="https://github.com/tmhglnd/mercury/blob/master/docs/reference.md">https://github.com/tmhglnd/mercury/blob/master/docs/reference.md</a><br />
<a class="reference external" href="https://github.com/thedjinn/js303">https://github.com/thedjinn/js303</a><br />
<a class="reference external" href="https://www.sitepoint.com/creating-accurate-timers-in-javascript/">https://www.sitepoint.com/creating-accurate-timers-in-javascript/</a><br />
<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques">https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Advanced_techniques</a><br />
<a class="reference external" href="https://webaudiodemos.appspot.com/">https://webaudiodemos.appspot.com/</a><br />
<a class="reference external" href="https://www.html5rocks.com/en/tutorials/audio/scheduling/">https://www.html5rocks.com/en/tutorials/audio/scheduling/</a><br />
<a class="reference external" href="https://github.com/jshanley/blip">https://github.com/jshanley/blip</a><br />
<a class="reference external" href="https://github.com/alemangui/pizzicato">https://github.com/alemangui/pizzicato</a></p>
</div>
<div class="section" id="audio-worklets-and-wasm">
<h2>Audio Worklets and Wasm<a class="headerlink" href="#audio-worklets-and-wasm" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://sol.gfxile.net/soloud/">https://sol.gfxile.net/soloud/</a><br />
<a class="reference external" href="https://github.com/micknoise/Maximilian">https://github.com/micknoise/Maximilian</a><br />
<a class="reference external" href="https://mod.haxor.fi/Uncle_Tom/mod.occ-san-geen">https://mod.haxor.fi/Uncle_Tom/mod.occ-san-geen</a><br />
<a class="reference external" href="https://github.com/divideconcept/FluidLite">https://github.com/divideconcept/FluidLite</a><br />
<a class="reference external" href="https://github.com/mmontag/chip-player-js">https://github.com/mmontag/chip-player-js</a><br />
<a class="reference external" href="https://github.com/cutterbl/SoundTouchJS">https://github.com/cutterbl/SoundTouchJS</a><br />
<a class="reference external" href="https://github.com/AnthumChris/opus-bitrates">https://github.com/AnthumChris/opus-bitrates</a><br />
<a class="reference external" href="https://github.com/warpdesign/modplayer-js/">https://github.com/warpdesign/modplayer-js/</a><br />
<a class="reference external" href="https://github.com/fspa/AudioWorkletPolySynth">https://github.com/fspa/AudioWorkletPolySynth</a><br />
<a class="reference external" href="https://www.youtube.com/watch?v=x9RP-M6q2Mg">https://www.youtube.com/watch?v=x9RP-M6q2Mg</a><br />
<a class="reference external" href="https://www.youtube.com/watch?v=zgOGZgAPUjQ">https://www.youtube.com/watch?v=zgOGZgAPUjQ</a><br />
<a class="reference external" href="https://soundprogramming.net/programming/tutorial-using-sdl2-and-sdl_mixer-to-play-samples/">https://soundprogramming.net/programming/tutorial-using-sdl2-and-sdl_mixer-to-play-samples/</a></p>
</div>
<div class="section" id="obsevers">
<h2>Obsevers<a class="headerlink" href="#obsevers" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://github.com/rsimmons/plinth">https://github.com/rsimmons/plinth</a><br />
<a class="reference external" href="https://github.com/gullerya/object-observer">https://github.com/gullerya/object-observer</a><br />
<a class="reference external" href="https://awesomeopensource.com/project/nx-js/observer-util">https://awesomeopensource.com/project/nx-js/observer-util</a><br />
<a class="reference external" href="https://doc.esdoc.org/github.com/jstoolkit/dom-observer/">https://doc.esdoc.org/github.com/jstoolkit/dom-observer/</a><br />
................................................................................
<a class="reference external" href="https://medium.com/swlh/building-a-audio-visualizer-with-javascript-324b8d420e7">https://medium.com/swlh/building-a-audio-visualizer-with-javascript-324b8d420e7</a><br />
<a class="reference external" href="https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API">https://developer.mozilla.org/en-US/docs/Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API</a><br />
<a class="reference external" href="https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/">https://www.airtightinteractive.com/2013/10/making-audio-reactive-visuals/</a><br />
<a class="reference external" href="https://1mb.club/">https://1mb.club/</a></p>
</div>
<div class="section" id="misc">
<h2>Misc<a class="headerlink" href="#misc" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://gist.github.com/sroccaserra/5bacbdb3e000a54dbae0972c346021d4">https://gist.github.com/sroccaserra/5bacbdb3e000a54dbae0972c346021d4</a><br />
<a class="reference external" href="https://awesomeopensource.com/project/syncopika/piano_roll_browser">https://awesomeopensource.com/project/syncopika/piano_roll_browser</a><br />
<a class="reference external" href="https://teropa.info/blog/2016/08/10/frequency-and-pitch.html">https://teropa.info/blog/2016/08/10/frequency-and-pitch.html</a><br />
<a class="reference external" href="http://www.pawfal.org/fluxus/documentation/">http://www.pawfal.org/fluxus/documentation/</a><br />
<a class="reference external" href="https://music.tutsplus.com/tutorials/how-to-create-acid-synth-sequences--audio-3000">https://music.tutsplus.com/tutorials/how-to-create-acid-synth-sequences–audio-3000</a><br />
<a class="reference external" href="https://acidvoice.com/tb_303_famous_patterns.php">https://acidvoice.com/tb_303_famous_patterns.php</a><br />
<a class="reference external" href="https://www.adsrsounds.com/ni-massive-tutorials/dub-techno-synth-stab-tutorial/">https://www.adsrsounds.com/ni-massive-tutorials/dub-techno-synth-stab-tutorial/</a><br />
<a class="reference external" href="https://medias.ircam.fr/x9d4352">https://medias.ircam.fr/x9d4352</a><br />
<a class="reference external" href="https://vuejsexamples.com/a-drum-synthesizer-sequencer-built-with-tone-js-and-vue-js/js">https://vuejsexamples.com/a-drum-synthesizer-sequencer-built-with-tone-js-and-vue-js/js</a><br />
<a class="reference external" href="https://areknawo.com/10-libraries-for-web-audio-stuff/">https://areknawo.com/10-libraries-for-web-audio-stuff/</a><br />
................................................................................
<a class="reference external" href="https://github.com/kevincennis/TinyMusic">https://github.com/kevincennis/TinyMusic</a><br />
<a class="reference external" href="https://github.com/pixicoder/PS">https://github.com/pixicoder/PS</a><br />
<a class="reference external" href="https://github.com/swallez/livecoding-webaudio-tonejs">https://github.com/swallez/livecoding-webaudio-tonejs</a><br />
<a class="reference external" href="https://padenot.github.io/litsynth/">https://padenot.github.io/litsynth/</a></p>
</div>
<div class="section" id="inspiration">
<h2>Inspiration<a class="headerlink" href="#inspiration" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://www.bbc.co.uk/bitesize/guides/z4k9dxs/revision/2">https://www.bbc.co.uk/bitesize/guides/z4k9dxs/revision/2</a><br />
<a class="reference external" href="https://github.com/AuburnSounds/Dplug/wiki/Dplug-VST2-Guide">https://github.com/AuburnSounds/Dplug/wiki/Dplug-VST2-Guide</a><br />
<a class="reference external" href="https://github.com/tmhglnd/mercury">https://github.com/tmhglnd/mercury</a><br />
<a class="reference external" href="https://www.mazbox.com/synths/dubstep/">https://www.mazbox.com/synths/dubstep/</a><br />
<a class="reference external" href="https://cdm.link/2019/04/automated-techno-eternal-flow/">https://cdm.link/2019/04/automated-techno-eternal-flow/</a><br />
<a class="reference external" href="https://survios.com/electronauts/">https://survios.com/electronauts/</a><br />
<a class="reference external" href="https://liv3c0der.com/">https://liv3c0der.com/</a><br />
<a class="reference external" href="http://wavepot.com/">http://wavepot.com/</a><br />
<a class="reference external" href="https://glicol.web.app/">https://glicol.web.app/</a><br />
................................................................................
<a class="reference external" href="https://tweakable.org/">https://tweakable.org/</a>
<a class="reference external" href="https://foxdot.org/docs/pattern-functions/">https://foxdot.org/docs/pattern-functions/</a><br />
<a class="reference external" href="https://faustdoc.grame.fr/">https://faustdoc.grame.fr/</a><br />
<a class="reference external" href="https://www.fsynth.com/">https://www.fsynth.com/</a><br />
<a class="reference external" href="https://errozero.co.uk/acid-machine/">https://errozero.co.uk/acid-machine/</a><br />
<a class="reference external" href="https://the.wubmachine.com/">https://the.wubmachine.com/</a><br />
<a class="reference external" href="https://scribbletune.com/documentation/browser/browser-clip">https://scribbletune.com/documentation/browser/browser-clip</a><br />
<a class="reference external" href="https://djen.co/">https://djen.co/</a><br />
&lt;<a class="reference external" href="https://burial.glitch.me/">https://burial.glitch.me/</a>&gt;</p>
</div>
<div class="section" id="music">
<h2>Music<a class="headerlink" href="#music" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="http://www.p01.org/256b_woman_farmer/">http://www.p01.org/256b_woman_farmer/</a><br />
<a class="reference external" href="https://aem1k.com/">https://aem1k.com/</a><br />
<a class="reference external" href="https://ludotune.com/">https://ludotune.com/</a><br />
<a class="reference external" href="https://www.mazbox.com/synths/dubstep/">https://www.mazbox.com/synths/dubstep/</a></p>
</div>
<div class="section" id="algorithmic-music">
<h2>Algorithmic Music<a class="headerlink" href="#algorithmic-music" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://teropa.info/">https://teropa.info/</a><br />
<a class="reference external" href="https://cmsw.mit.edu/algorithmic-music-experience-composing-wolframtones/">https://cmsw.mit.edu/algorithmic-music-experience-composing-wolframtones/</a><br />
<a class="reference external" href="https://ccrma.stanford.edu/~blackrse/algorithm.html">https://ccrma.stanford.edu/~blackrse/algorithm.html</a><br />
<a class="reference external" href="https://oeis.org/">https://oeis.org/</a><br />
<a class="reference external" href="https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html">https://www.cs.cmu.edu/~music/cmsip/readings/MIDI%20tutorial%20for%20programmers.html</a>
<a class="reference external" href="https://en.wikipedia.org/wiki/Computational_creativity">https://en.wikipedia.org/wiki/Computational_creativity</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Algorithmic_composition">https://en.wikipedia.org/wiki/Algorithmic_composition</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Constraint_programming">https://en.wikipedia.org/wiki/Constraint_programming</a><br />
<a class="reference external" href="https://www.bipscript.org/">https://www.bipscript.org/</a><br />
<a class="reference external" href="http://commonmusic.sourceforge.net/cm/res/doc/cm.html">http://commonmusic.sourceforge.net/cm/res/doc/cm.html</a><br />
<a class="reference external" href="https://bolprocessor.sourceforge.io/docs/">https://bolprocessor.sourceforge.io/docs/</a><br />
<a class="reference external" href="https://en.wikipedia.org/wiki/Music_Macro_Language">https://en.wikipedia.org/wiki/Music_Macro_Language</a><br />
<a class="reference external" href="https://github.com/IjzerenHein/kiwi.js/">https://github.com/IjzerenHein/kiwi.js/</a><br />
<a class="reference external" href="https://github.com/miguelramos/node-media-manager">https://github.com/miguelramos/node-media-manager</a><br />
<a class="reference external" href="https://github.com/lnfiniteMonkeys/TimeLines">https://github.com/lnfiniteMonkeys/TimeLines</a></p>
</div>
<div class="section" id="sound-design">
<h2>Sound Design<a class="headerlink" href="#sound-design" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://www.attackmagazine.com/technique/synth-secrets/dub-techno-synth-chords/">https://www.attackmagazine.com/technique/synth-secrets/dub-techno-synth-chords/</a></p>
</div>
<div class="section" id="clocks">
<h2>Clocks<a class="headerlink" href="#clocks" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://github.com/eriser/clock">https://github.com/eriser/clock</a><br />
<a class="reference external" href="https://github.com/filebrowser/filebrowser">https://github.com/filebrowser/filebrowser</a><br />
<a class="reference external" href="https://github.com/lachlandk/chronos/blob/master/chronos.js">https://github.com/lachlandk/chronos/blob/master/chronos.js</a><br />
<a class="reference external" href="https://github.com/CharlotteGore/tick">https://github.com/CharlotteGore/tick</a><br />
<a class="reference external" href="https://github.com/pelevesque/web-audio-scheduler/blob/master/index.html">https://github.com/pelevesque/web-audio-scheduler/blob/master/index.html</a><br />
<a class="reference external" href="https://github.com/CharlotteGore/beat-master">https://github.com/CharlotteGore/beat-master</a><br />
<a class="reference external" href="https://www.npmjs.com/package/beat-scheduler">https://www.npmjs.com/package/beat-scheduler</a><br />
<a class="reference external" href="https://www.npmjs.com/package/beet.js">https://www.npmjs.com/package/beet.js</a><br />
<a class="reference external" href="https://www.npmjs.com/package/step-seq">https://www.npmjs.com/package/step-seq</a><br />
<a class="reference external" href="https://github.com/mmckegg/bopper/blob/master/index.js">https://github.com/mmckegg/bopper/blob/master/index.js</a><br />
<a class="reference external" href="https://github.com/jshanley/blip/blob/master/src/loop.js">https://github.com/jshanley/blip/blob/master/src/loop.js</a><br />
<a class="reference external" href="https://sebpiq.github.io/WAAClock/demos/beatSequence.html">https://sebpiq.github.io/WAAClock/demos/beatSequence.html</a>
<a class="reference external" href="http://adamrenklint.com/using-expressions-in-dilla">http://adamrenklint.com/using-expressions-in-dilla</a></p>
</div>
</div>


              </div>

Changes to build/html/changelog.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/credits.html.

    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Bookmarks" href="bookmarks.html" />
    <link rel="prev" title="Saving and other limitations" href="limitations.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Credits
  </a>
 </li>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="limitations.html" title="previous page">Saving and other limitations</a>
    <a class='right-next' id="next-link" href="bookmarks.html" title="next page">Bookmarks</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">

    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Bookmarks" href="bookmarks.html" />
    <link rel="prev" title="Saving / Recording / Streaming" href="saving.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>
................................................................................
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Credits
  </a>
 </li>
................................................................................


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="saving.html" title="previous page">Saving / Recording / Streaming</a>
    <a class='right-next' id="next-link" href="bookmarks.html" title="next page">Bookmarks</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">

Changes to build/html/demo.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/early-attempts.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/genindex.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/index.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
                
  <div class="section" id="welcome-to-bitrhythm-s-documentation">
<h1>Welcome to Bitrhythm’s  documentation!<a class="headerlink" href="#welcome-to-bitrhythm-s-documentation" title="Permalink to this headline">¶</a></h1>
<div class="toctree-wrapper compound">
<p class="caption"><span class="caption-text">Table of Contents</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="what.html">What is bitrhythm about ?</a><ul>

<li class="toctree-l2"><a class="reference internal" href="what.html#adc-2021">ADC 2021</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#inspiration-for-the-project">Inspiration for the project</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#support-this-project">Support this project</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="source-code.html">Source Code and License</a></li>
<li class="toctree-l1"><a class="reference internal" href="demo.html">Getting Started</a><ul>
................................................................................
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#tweaking-and-transitions">Tweaking and Transitions</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#is-bitrhythm-maths-heavy">Is Bitrhythm Maths heavy ?</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="early-attempts.html">Early Attempts</a></li>
<li class="toctree-l1"><a class="reference internal" href="changelog.html">Changelog</a></li>
<li class="toctree-l1"><a class="reference internal" href="main.html">Code Walkthrough</a><ul>

<li class="toctree-l2"><a class="reference internal" href="main.html#core-tracker-loop">Core Tracker Loop</a><ul>
<li class="toctree-l3"><a class="reference internal" href="main.html#observers">Observers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="main.html#dials">Dials</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#numbers">Numbers</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autoknob">AutoKnob</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#main-ui">Main UI</a></li>

<li class="toctree-l2"><a class="reference internal" href="main.html#sample">Sample</a></li>



<li class="toctree-l2"><a class="reference internal" href="main.html#javascript">Javascript</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#id1">303</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autocommit">Autocommit</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="alternate-implementation.html">Alternate Implementations</a><ul>
<li class="toctree-l2"><a class="reference internal" href="alternate-implementation.html#elementary">Elementary</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="limitations.html">Saving and other limitations</a></li>
<li class="toctree-l1"><a class="reference internal" href="credits.html">Credits</a></li>
<li class="toctree-l1"><a class="reference internal" href="bookmarks.html">Bookmarks</a><ul>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#webaudio">WebAudio</a></li>

<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#obsevers">Obsevers</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#visuals">Visuals</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#misc">Misc</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#other-projects">Other Projects</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#inspiration">Inspiration</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#music">Music</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#algorithmic-music">Algorithmic Music</a></li>


</ul>
</li>
</ul>
</div>
</div>

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
                
  <div class="section" id="welcome-to-bitrhythm-s-documentation">
<h1>Welcome to Bitrhythm’s  documentation!<a class="headerlink" href="#welcome-to-bitrhythm-s-documentation" title="Permalink to this headline">¶</a></h1>
<div class="toctree-wrapper compound">
<p class="caption"><span class="caption-text">Table of Contents</span></p>
<ul>
<li class="toctree-l1"><a class="reference internal" href="what.html">What is bitrhythm about ?</a><ul>
<li class="toctree-l2"><a class="reference internal" href="what.html#intro">Intro</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#adc-2021">ADC 2021</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#inspiration-for-the-project">Inspiration for the project</a></li>
<li class="toctree-l2"><a class="reference internal" href="what.html#support-this-project">Support this project</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="source-code.html">Source Code and License</a></li>
<li class="toctree-l1"><a class="reference internal" href="demo.html">Getting Started</a><ul>
................................................................................
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#tweaking-and-transitions">Tweaking and Transitions</a></li>
<li class="toctree-l2"><a class="reference internal" href="tweaking.html#is-bitrhythm-maths-heavy">Is Bitrhythm Maths heavy ?</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="early-attempts.html">Early Attempts</a></li>
<li class="toctree-l1"><a class="reference internal" href="changelog.html">Changelog</a></li>
<li class="toctree-l1"><a class="reference internal" href="main.html">Code Walkthrough</a><ul>
<li class="toctree-l2"><a class="reference internal" href="main.html#running">Running</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#core-tracker-loop">Core Tracker Loop</a><ul>
<li class="toctree-l3"><a class="reference internal" href="main.html#observers">Observers</a></li>
</ul>
</li>
<li class="toctree-l2"><a class="reference internal" href="main.html#dials">Dials</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#numbers">Numbers</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autoknob">AutoKnob</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#main-ui">Main UI</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#worklet">Worklet</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#sample">Sample</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#app">App</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#index">Index</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#page">Page</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#javascript">Javascript</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#id1">303</a></li>
<li class="toctree-l2"><a class="reference internal" href="main.html#autocommit">Autocommit</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="alternate-implementation.html">Alternate Implementations</a><ul>
<li class="toctree-l2"><a class="reference internal" href="alternate-implementation.html#elementary">Elementary</a></li>
</ul>
</li>
<li class="toctree-l1"><a class="reference internal" href="saving.html">Saving / Recording / Streaming</a></li>
<li class="toctree-l1"><a class="reference internal" href="credits.html">Credits</a></li>
<li class="toctree-l1"><a class="reference internal" href="bookmarks.html">Bookmarks</a><ul>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#webaudio">WebAudio</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#audio-worklets-and-wasm">Audio Worklets and Wasm</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#obsevers">Obsevers</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#visuals">Visuals</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#misc">Misc</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#other-projects">Other Projects</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#inspiration">Inspiration</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#music">Music</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#algorithmic-music">Algorithmic Music</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#sound-design">Sound Design</a></li>
<li class="toctree-l2"><a class="reference internal" href="bookmarks.html#clocks">Clocks</a></li>
</ul>
</li>
</ul>
</div>
</div>

Deleted build/html/limitations.html.


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Saving and other limitations &#8212; Bitrhythm&#39;s literate documentation</title>
    
  <link href="_static/css/theme.css" rel="stylesheet" />
  <link href="_static/css/index.c5995385ac14fb8791e8eb36b4908be2.css" rel="stylesheet" />

    
  <link rel="stylesheet"
    href="_static/vendor/fontawesome/5.13.0/css/all.min.css">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-solid-900.woff2">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-brands-400.woff2">

    
      

    
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/sphinx-book-theme.e8e5499552300ddf5d7adccae7cc3b70.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="_static/custom.css" />
    
  <link rel="preload" as="script" href="_static/js/index.1c5a1a01449ed65a7b51.js">

    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Credits" href="credits.html" />
    <link rel="prev" title="Alternate Implementations" href="alternate-implementation.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>

    

    <div class="container-xl">
      <div class="row">
          
<div class="col-12 col-md-3 bd-sidebar site-navigation show" id="site-navigation">
    
        <div class="navbar-brand-box">
    <a class="navbar-brand text-wrap" href="index.html">
      
      
      <h1 class="site-logo" id="site-title">Bitrhythm's literate documentation</h1>
      
    </a>
</div><nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
    <div class="bd-toc-item active">
        <p class="caption">
 <span class="caption-text">
  Table of Contents
 </span>
</p>
<ul class="current nav bd-sidenav">
 <li class="toctree-l1">
  <a class="reference internal" href="what.html">
   What is bitrhythm about ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   Core Features
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="changelog.html">
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

    </div>
</nav> <!-- To handle the deprecated key -->

<div class="navbar_extra_footer">
  
<a target="_blank" href="/">Bitrhythm App Home</a><br>
<a target="_blank" href="https://xyzzyapps.link">Xyzzy Apps Home</a><br>
<p class='custom-nav-footer'>(c) Xyzzy Apps, 2021</p>

</div>

</div>


          


          
<main class="col py-md-3 pl-md-4 bd-content overflow-auto" role="main">
    
    <div class="topbar container-xl fixed-top">
    <div class="topbar-contents row">
        <div class="col-12 col-md-3 bd-topbar-whitespace site-navigation show"></div>
        <div class="col pl-md-4 topbar-main">
            
            <button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse"
                data-toggle="tooltip" data-placement="bottom" data-target=".site-navigation" aria-controls="navbar-menu"
                aria-expanded="true" aria-label="Toggle navigation" aria-controls="site-navigation"
                title="Toggle navigation" data-toggle="tooltip" data-placement="left">
                <i class="fas fa-bars"></i>
                <i class="fas fa-arrow-left"></i>
                <i class="fas fa-arrow-up"></i>
            </button>
            
            
            <!-- Source interaction buttons -->

            <!-- Full screen (wrap in <a> to have style consistency -->

<a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
        data-placement="bottom" onclick="toggleFullScreen()" aria-label="Fullscreen mode"
        title="Fullscreen mode"><i
            class="fas fa-expand"></i></button></a>

            <!-- Launch buttons -->

        </div>

        <!-- Table of contents -->
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
        </div>
    </div>
</div>
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="saving-and-other-limitations">
<h1>Saving and other limitations<a class="headerlink" href="#saving-and-other-limitations" title="Permalink to this headline">¶</a></h1>
<p>There is a save button that converts the state of bitrhythm into a url paramter. This means there is an upper limit on how much code you can write, making it useful for demoscene like situations. You can share the url with tinyurl.</p>
<p>You can also download the file. Please keep a backup.</p>
<ul class="simple">
<li><p>Opening developer tools might slow down the execution a bit</p></li>
<li><p>Using excessive delays and reverbs seems to cause some glitches</p></li>
<li><p>Mobile browsers don’t work properly</p></li>
<li><p>Firefox does not seem to work well with tone.js</p></li>
</ul>
<p>I use <a class="reference external" href="https://existential.audio/blackhole/">BlackHole</a> to record audio from the browser window to Reaper. You can use any screenrecording software to record the screen. Have a distinct sound to match both audio and video.</p>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="alternate-implementation.html" title="previous page">Alternate Implementations</a>
    <a class='right-next' id="next-link" href="credits.html" title="next page">Credits</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">
      <p>
        
          By Xyzzy Apps<br/>
        
            &copy; Copyright (c) Xyzzy Apps, 2021.<br/>
      </p>
    </div>
  </footer>
</main>


      </div>
    </div>
  
  <script src="_static/js/index.1c5a1a01449ed65a7b51.js"></script>

  
  </body>
</html>

<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<
<

Changes to build/html/main.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
            <div class="tocsection onthispage pt-5 pb-3">
                <i class="fas fa-list"></i> Contents
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">





 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#core-tracker-loop">
   Core Tracker Loop
  </a>
  <ul class="nav section-nav flex-column">
   <li class="toc-h3 nav-item toc-entry">
    <a class="reference internal nav-link" href="#observers">
................................................................................
   AutoKnob
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#main-ui">
   Main UI
  </a>





 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#sample">
   Sample
  </a>















 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#javascript">
   Javascript
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="code-walkthrough">
<h1>Code Walkthrough<a class="headerlink" href="#code-walkthrough" title="Permalink to this headline">¶</a></h1>




<div class="section" id="core-tracker-loop">
<h2>Core Tracker Loop<a class="headerlink" href="#core-tracker-loop" title="Permalink to this headline">¶</a></h2>
<p>In bitrhythm code is evaluated for every cycle.</p>
<p>1 beat = 60 / tempo
1 cycle = 1 beat / ticks</p>
<p>For every cycle visual and audio code is evaluated.</p>
<p>The edit checkbox allows you to perform long edits, where only old code is evaluated. Once you disable it, all the new edit changes are applied in the next cycle.</p>
................................................................................
    <span class="kd">var</span> <span class="nx">bars</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">tick</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">quarter_beat_length</span> <span class="o">=</span> <span class="mf">60000.0</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">tempo</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">beat_length</span> <span class="o">=</span> <span class="nx">quarter_beat_length</span> <span class="o">*</span> <span class="mf">4</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="nx">beat_length</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">;</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">samples</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">samples</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
  <span class="nx">self</span><span class="p">.</span><span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
        <span class="nx">count</span> <span class="o">=</span> <span class="nx">count</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
        <span class="nx">tick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">count</span> <span class="o">%</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">);</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">tick</span> <span class="o">===</span> <span class="mf">0</span><span class="p">)</span> <span class="o">++</span><span class="nx">bars</span><span class="p">;</span>

        <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#duration&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span> <span class="o">+</span> <span class="nx">bars</span> <span class="o">+</span> <span class="s2">&quot;.&quot;</span> <span class="o">+</span> <span class="nx">tick</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nx">count</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">roundTo</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">seconds</span><span class="p">,</span> <span class="mf">2</span><span class="p">));</span>
        <span class="nx">always</span><span class="p">();</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">patterns</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>

            <span class="p">}</span>
            <span class="kd">var</span> <span class="nx">dials</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">dials</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>

            <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">p_text</span>  <span class="o">=</span> <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
            <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">p_text</span> <span class="o">=</span> <span class="nx">patterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
                <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">p_text</span><span class="p">;</span>
            <span class="p">}</span>
            <span class="k">if</span> <span class="p">(</span><span class="nx">p_text</span><span class="p">()</span> <span class="o">&amp;&amp;</span> <span class="nx">p_text</span><span class="p">().</span><span class="nx">length</span> <span class="o">!==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
                <span class="kd">var</span> <span class="nx">track_no</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
                <span class="kd">var</span> <span class="nx">pattern</span> <span class="o">=</span> <span class="nx">pattern_parse</span><span class="p">(</span><span class="nx">p_text</span><span class="p">());</span>
                <span class="kd">var</span> <span class="nx">meta</span> <span class="o">=</span> <span class="nx">pattern_meta</span><span class="p">(</span><span class="nx">p_text</span><span class="p">());</span>
                <span class="kd">var</span> <span class="nx">isHit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pattern</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)[</span><span class="nx">tick</span><span class="p">]</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="kc">false</span><span class="p">;</span>

                <span class="k">try</span> <span class="p">{</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
                    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                        <span class="nb">eval</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                            <span class="nx">tick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">count</span> <span class="o">%</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">);</span>
                            <span class="nx">count</span> <span class="o">-=</span> <span class="nx">tick</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
                            <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
                            <span class="k">continue</span><span class="p">;</span>
                        <span class="p">}</span>
                        <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                            <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                            <span class="nx">transition</span><span class="p">();</span>
                        <span class="p">}</span>
                        <span class="nx">oldCode</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
                    <span class="p">}</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
                <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">ex</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">ex</span><span class="p">);</span>
                    <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
                <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">}</span>
  <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span> <span class="nx">delta</span><span class="p">)</span>

  <span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animation</span><span class="p">);</span>

<span class="p">}</span>
</pre></div>
</div>
................................................................................
    <span class="nx">context</span><span class="p">.</span><span class="nx">count_skip</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">speed</span> <span class="o">||</span> <span class="mf">4</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">step</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">step</span> <span class="o">||</span> <span class="mf">0.01</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">reverse</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">reverse</span> <span class="o">||</span> <span class="kc">true</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">number</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">number</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>

    <span class="nx">context</span><span class="p">.</span><span class="nx">current_count</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">index</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>



    <span class="nx">context</span><span class="p">.</span><span class="nx">val</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">cellx</span><span class="p">.</span><span class="nx">cellx</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">initial</span> <span class="o">||</span> <span class="mf">0.5</span><span class="p">)</span>




    <span class="kd">function</span> <span class="nx">changeContext</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">context</span><span class="p">.</span><span class="nx">next_val</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">ramp</span><span class="p">[</span><span class="nx">context</span><span class="p">.</span><span class="nx">index</span> <span class="o">+</span> <span class="mf">1</span><span class="p">];</span>

        <span class="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">ramp</span><span class="p">[</span><span class="nx">context</span><span class="p">.</span><span class="nx">index</span><span class="p">]);</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">()</span> <span class="o">&gt;</span> <span class="nx">context</span><span class="p">.</span><span class="nx">next_val</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">context</span><span class="p">.</span><span class="nx">direction</span> <span class="o">=</span> <span class="o">-</span><span class="mf">1</span><span class="p">;</span>
................................................................................
    <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
    <span class="nx">alertify</span><span class="p">.</span><span class="nx">prompt</span><span class="p">(</span> <span class="s1">&#39;Enter Sample URL&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span>
        <span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">self</span><span class="p">.</span><span class="nx">addURL</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">alertify</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Cancel&#39;</span><span class="p">)</span>
        <span class="p">});</span>

<span class="p">}</span>

<span class="nx">addSample</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">samples</span><span class="p">.</span><span class="nx">push</span><span class="p">({});</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span>
<span class="p">}</span>

................................................................................
<span class="p">}</span>

<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">bitrhythm</span><span class="p">&gt;</span>
</pre></div>
</div>






















































</div>
<div class="section" id="sample">
<h2>Sample<a class="headerlink" href="#sample" title="Permalink to this headline">¶</a></h2>
<p>You can add samples using the file upload. All samples are available as an array – samples. Initialise samples, global variables and synthesisers using the transition function and change the sample parameters using the same during live coding.</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">sample</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">vbox</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">vstack</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
................................................................................
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">)</span>
            <span class="k">return</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>


    <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;mount&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>






















        <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>









<span class="cm">/*</span>
<span class="cm">        var sample_file = $(&quot;#sample-file&quot; + this.props.ti).get(0);</span>
<span class="cm">        var sam;</span>

<span class="cm">        sample_file.addEventListener(&#39;change&#39;, (event) =&gt; {</span>
<span class="cm">            var file = event.srcElement.files[0];</span>
<span class="cm">            var a = new Audio();</span>
<span class="cm">            a.onloadedmetadata = (e) =&gt; {</span>
<span class="cm">                sam = new Tone.Sampler({</span>
<span class="cm">                    urls:  {</span>
<span class="cm">                        &quot;C3&quot;: URL.createObjectURL(file),</span>





<span class="cm">                    },</span>
<span class="cm">                    onload: () =&gt; {</span>
<span class="cm">                        this.update();</span>
<span class="cm">                        sam.triggerAttackRelease(&quot;C3&quot;, 0.5);</span>
<span class="cm">                    }</span>






<span class="cm">                });</span>


<span class="cm">                sam[&quot;__name&quot;] = file.name;</span>
<span class="cm">                sam[&quot;__url&quot;] = &quot;&quot;;</span>
<span class="cm">                // riot doesn&#39;t allow camelcase ?</span>
<span class="cm">                self.props.setsample(sam, self.props.ti - 1);</span>





<span class="cm">            }</span>
<span class="cm">            a.src = URL.createObjectURL(file);</span>
<span class="cm">        });</span>





<span class="cm">        */</span>




















































































































































































    <span class="p">});</span>
   <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>









































<span class="p">&lt;/</span><span class="nt">sample</span><span class="p">&gt;</span>












</pre></div>
</div>
</div>
<div class="section" id="javascript">
<h2>Javascript<a class="headerlink" href="#javascript" title="Permalink to this headline">¶</a></h2>


<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">getRandomInt</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="nx">max</span><span class="p">);</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">initWinamp</span><span class="p">(</span><span class="nx">preset</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">can</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;visual&quot;</span><span class="p">);</span>
    <span class="nx">can</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">-</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;header-playback&quot;</span><span class="p">).</span><span class="nx">clientHeight</span> <span class="o">/</span> <span class="mf">2</span><span class="p">);</span>
................................................................................
    <span class="nx">can_container</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">visualizer</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurn</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">createVisualizer</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">rawContext</span><span class="p">,</span> <span class="nx">can</span><span class="p">,</span> <span class="p">{</span>
        <span class="nx">height</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">-</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;header-playback&quot;</span><span class="p">).</span><span class="nx">clientHeight</span> <span class="o">/</span> <span class="mf">2</span><span class="p">),</span>
        <span class="nx">width</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">,</span>
        <span class="nx">meshWidth</span><span class="o">:</span> <span class="mf">24</span><span class="p">,</span>
        <span class="nx">meshHeight</span><span class="o">:</span> <span class="mf">18</span><span class="p">,</span>
    <span class="p">});</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">connectAudio</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">destination</span><span class="p">);</span>
    <span class="kd">const</span> <span class="nx">presets</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurnPresets</span><span class="p">.</span><span class="nx">getPresets</span><span class="p">();</span>
    <span class="kd">const</span> <span class="nx">presetParam</span> <span class="o">=</span> <span class="nx">presets</span><span class="p">[</span><span class="nx">preset</span><span class="p">];</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">loadPreset</span><span class="p">(</span><span class="nx">presetParam</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">);</span> <span class="c1">// 2nd argument is the number of seconds to blend presets</span>
    <span class="k">return</span> <span class="nx">visualizer</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">guard</span><span class="p">(</span><span class="nx">range</span><span class="p">)</span> <span class="p">{</span>
................................................................................
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`3&#39;</span><span class="p">,</span><span class="s1">&#39;d&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`4&#39;</span><span class="p">,</span><span class="s1">&#39;e&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`5&#39;</span><span class="p">,</span><span class="s1">&#39;f&#39;</span><span class="p">);</span>
    <span class="k">return</span> <span class="nx">letters</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">lettertodec</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\d/</span><span class="p">))</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">letter</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;a&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">10</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;b&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">11</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;c&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">12</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;d&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">13</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;e&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">14</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;f&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">no</span> <span class="o">=</span> <span class="mf">15</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;=</span> <span class="nx">no</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">lettertobin</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;0&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0000&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0001&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;2&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0010&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;3&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0011&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;4&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0100&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;5&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0101&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;6&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0110&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;7&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0111&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;8&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1000&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;9&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1001&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;a&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1010&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;b&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1011&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;c&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1100&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;d&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1101&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;e&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1110&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;f&quot;</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1111&quot;</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">hex2bin</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">letters</span> <span class="o">=</span> <span class="nx">romantogypsy</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="nx">letters</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
................................................................................
        <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#cued&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
        <span class="p">},</span> <span class="nx">seconds</span> <span class="o">*</span> <span class="mf">1000</span><span class="p">)</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">cue</span> <span class="o">=</span> <span class="nx">cue</span><span class="p">;</span>


























<span class="kd">function</span> <span class="nx">Sample</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">no</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">volume</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span>
    <span class="nx">filter</span> <span class="o">=</span> <span class="nx">filter</span> <span class="o">||</span> <span class="mf">10000</span>
    <span class="nx">volume</span> <span class="o">=</span> <span class="nx">volume</span> <span class="o">||</span> <span class="mf">0</span>
    <span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Filter</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mf">96</span><span class="p">);</span>
    <span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Channel</span><span class="p">({</span><span class="nx">channelCount</span><span class="o">:</span> <span class="mf">2</span><span class="p">,</span> <span class="nx">volume</span><span class="o">:</span> <span class="nx">volume</span><span class="p">}).</span><span class="nx">chain</span><span class="p">(</span><span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="nx">mem</span><span class="p">.</span><span class="nx">master</span><span class="p">)</span>
    <span class="nx">samples</span><span class="p">[</span><span class="nx">no</span><span class="p">].</span><span class="nx">connect</span><span class="p">(</span><span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]);</span>
    <span class="nx">hit_map</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">no</span><span class="p">;</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">Sample</span> <span class="o">=</span> <span class="nx">Sample</span><span class="p">;</span>







<span class="kd">function</span> <span class="nx">p</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">vol</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">pan</span><span class="o">=</span><span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">note</span> <span class="o">=</span> <span class="nx">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>
    <span class="nx">vol</span> <span class="o">=</span> <span class="nx">vol</span> <span class="o">||</span> <span class="mf">1</span>
    <span class="nx">delay</span> <span class="o">=</span> <span class="nx">delay</span> <span class="o">||</span> <span class="s2">&quot;+0&quot;</span><span class="p">;</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="k">of</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">entries</span><span class="p">(</span><span class="nx">hit_map</span><span class="p">))</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">==</span> <span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">mem</span><span class="p">[</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot;_last&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">count</span>
            <span class="nx">mem</span><span class="p">[</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">].</span><span class="nx">pan</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">pan</span>
   
        <span class="p">}</span>
    <span class="p">}</span>
    <span class="nx">samples</span><span class="p">[</span><span class="nx">s</span><span class="p">].</span><span class="nx">triggerAttackRelease</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">vol</span><span class="p">);</span>
  
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">p</span> <span class="o">=</span> <span class="nx">p</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">p1</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">vol</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">pan</span><span class="o">=</span><span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">note</span> <span class="o">=</span> <span class="nx">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>








|
|







 







>
>
>
>
>







 







>
>
>
>
>





>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
>
>
>







 







|
|
|
|
|

|
|
|
|
|
<
|
|

|
|
|

|
|
|
|
|
|
|
|
|
|
|

|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|







 







>
>
>
|
>
>
>







 







|
>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>

<
>
>
>
>
>
>
>
>
>
|
<
|

<
<
<
<
<
<
<
>
>
>
>
>
|
<
<
<
|
>
>
>
>
>
>
|
>

<
<
<
<
>
>
>
>
>
|
<
|
>
>
>
>
>
|
>
>
>
>
>
>
>

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
|
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
|
>
>
>
>
>
>
>
>
>
>
>
>





>
>







 







|







 







|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|



|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|







 







>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>












>
>
>
>
>
>










<



<

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
            <div class="tocsection onthispage pt-5 pb-3">
                <i class="fas fa-list"></i> Contents
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#running">
   Running
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#core-tracker-loop">
   Core Tracker Loop
  </a>
  <ul class="nav section-nav flex-column">
   <li class="toc-h3 nav-item toc-entry">
    <a class="reference internal nav-link" href="#observers">
................................................................................
   AutoKnob
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#main-ui">
   Main UI
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#worklet">
   Worklet
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#sample">
   Sample
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#app">
   App
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#index">
   Index
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#page">
   Page
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#javascript">
   Javascript
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="code-walkthrough">
<h1>Code Walkthrough<a class="headerlink" href="#code-walkthrough" title="Permalink to this headline">¶</a></h1>
<div class="section" id="running">
<h2>Running<a class="headerlink" href="#running" title="Permalink to this headline">¶</a></h2>
<p>ls source/main.cog | entr -r runserver.sh -b</p>
</div>
<div class="section" id="core-tracker-loop">
<h2>Core Tracker Loop<a class="headerlink" href="#core-tracker-loop" title="Permalink to this headline">¶</a></h2>
<p>In bitrhythm code is evaluated for every cycle.</p>
<p>1 beat = 60 / tempo
1 cycle = 1 beat / ticks</p>
<p>For every cycle visual and audio code is evaluated.</p>
<p>The edit checkbox allows you to perform long edits, where only old code is evaluated. Once you disable it, all the new edit changes are applied in the next cycle.</p>
................................................................................
    <span class="kd">var</span> <span class="nx">bars</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">tick</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>

    <span class="kd">var</span> <span class="nx">quarter_beat_length</span> <span class="o">=</span> <span class="mf">60000.0</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">tempo</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">beat_length</span> <span class="o">=</span> <span class="nx">quarter_beat_length</span> <span class="o">*</span> <span class="mf">4</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">delta</span> <span class="o">=</span> <span class="nx">beat_length</span> <span class="o">/</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">;</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">samples</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">samples</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
    <span class="nx">self</span><span class="p">.</span><span class="nx">timer</span> <span class="o">=</span> <span class="nx">setInterval</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="nx">count</span> <span class="o">=</span> <span class="nx">count</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
    <span class="nx">tick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">count</span> <span class="o">%</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">);</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">tick</span> <span class="o">===</span> <span class="mf">0</span><span class="p">)</span> <span class="o">++</span><span class="nx">bars</span><span class="p">;</span>

    <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#duration&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span> <span class="o">+</span> <span class="nx">bars</span> <span class="o">+</span> <span class="s2">&quot;.&quot;</span> <span class="o">+</span> <span class="nx">tick</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nx">count</span> <span class="o">+</span> <span class="s2">&quot; / &quot;</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">roundTo</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">seconds</span><span class="p">,</span> <span class="mf">2</span><span class="p">));</span>
    <span class="nx">always</span><span class="p">();</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">patterns</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">i</span> <span class="o">==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>

        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="nx">eval_guard</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>

        <span class="p">}</span>
        <span class="kd">var</span> <span class="nx">dials</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">dials</span><span class="p">;</span>
        <span class="kd">var</span> <span class="nx">numbers</span> <span class="o">=</span> <span class="nx">self</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">numbers</span><span class="p">;</span>

        <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">p_text</span>  <span class="o">=</span> <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
        <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">p_text</span> <span class="o">=</span> <span class="nx">patterns</span><span class="p">[</span><span class="nx">i</span><span class="p">];</span>
            <span class="nx">oldPatterns</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">p_text</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">p_text</span><span class="p">()</span> <span class="o">&amp;&amp;</span> <span class="nx">p_text</span><span class="p">().</span><span class="nx">length</span> <span class="o">!==</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">track_no</span> <span class="o">=</span> <span class="nx">i</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
            <span class="kd">var</span> <span class="nx">pattern</span> <span class="o">=</span> <span class="nx">pattern_parse</span><span class="p">(</span><span class="nx">p_text</span><span class="p">());</span>
            <span class="kd">var</span> <span class="nx">meta</span> <span class="o">=</span> <span class="nx">pattern_meta</span><span class="p">(</span><span class="nx">p_text</span><span class="p">());</span>
            <span class="kd">var</span> <span class="nx">isHit</span> <span class="o">=</span> <span class="p">(</span><span class="nx">pattern</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">)[</span><span class="nx">tick</span><span class="p">]</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="o">?</span> <span class="kc">true</span> <span class="o">:</span> <span class="kc">false</span><span class="p">;</span>

            <span class="k">try</span> <span class="p">{</span>
                <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;edit-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                    <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
                <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
                    <span class="nb">eval</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;redo&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                        <span class="nx">tick</span> <span class="o">=</span> <span class="p">(</span><span class="nx">count</span> <span class="o">%</span> <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">ticks</span><span class="p">);</span>
                        <span class="nx">count</span> <span class="o">-=</span> <span class="nx">tick</span> <span class="o">+</span> <span class="mf">1</span><span class="p">;</span>
                        <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
                        <span class="k">continue</span><span class="p">;</span>
                    <span class="p">}</span>
                    <span class="k">if</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span><span class="p">)</span> <span class="p">{</span>
                        <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s1">&#39;load-mode&#39;</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
                        <span class="nx">transition</span><span class="p">();</span>
                    <span class="p">}</span>
                    <span class="nx">oldCode</span> <span class="o">=</span> <span class="nx">text</span><span class="p">;</span>
                <span class="p">}</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
            <span class="p">}</span> <span class="k">catch</span> <span class="p">(</span><span class="nx">ex</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#error&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">ex</span><span class="p">);</span>
                <span class="nb">eval</span><span class="p">(</span><span class="nx">oldCode</span><span class="p">);</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">}</span>
  <span class="p">}.</span><span class="nx">bind</span><span class="p">(</span><span class="k">this</span><span class="p">),</span> <span class="nx">delta</span><span class="p">)</span>

  <span class="nb">window</span><span class="p">.</span><span class="nx">requestAnimationFrame</span><span class="p">(</span><span class="nx">animation</span><span class="p">);</span>

<span class="p">}</span>
</pre></div>
</div>
................................................................................
    <span class="nx">context</span><span class="p">.</span><span class="nx">count_skip</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">speed</span> <span class="o">||</span> <span class="mf">4</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">step</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">step</span> <span class="o">||</span> <span class="mf">0.01</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">reverse</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">reverse</span> <span class="o">||</span> <span class="kc">true</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">number</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">number</span> <span class="o">||</span> <span class="kc">null</span><span class="p">;</span>

    <span class="nx">context</span><span class="p">.</span><span class="nx">current_count</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">index</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>

    <span class="c1">// Smooth transition from previous knob values</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">number</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">context</span><span class="p">.</span><span class="nx">val</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">cellx</span><span class="p">.</span><span class="nx">cellx</span><span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">number</span><span class="p">())</span>
    <span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
        <span class="nx">context</span><span class="p">.</span><span class="nx">val</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">cellx</span><span class="p">.</span><span class="nx">cellx</span><span class="p">(</span><span class="nx">options</span><span class="p">.</span><span class="nx">initial</span> <span class="o">||</span> <span class="mf">0.5</span><span class="p">)</span>
    <span class="p">}</span>

    <span class="kd">function</span> <span class="nx">changeContext</span><span class="p">()</span> <span class="p">{</span>
        <span class="nx">context</span><span class="p">.</span><span class="nx">next_val</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">ramp</span><span class="p">[</span><span class="nx">context</span><span class="p">.</span><span class="nx">index</span> <span class="o">+</span> <span class="mf">1</span><span class="p">];</span>

        <span class="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">ramp</span><span class="p">[</span><span class="nx">context</span><span class="p">.</span><span class="nx">index</span><span class="p">]);</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">()</span> <span class="o">&gt;</span> <span class="nx">context</span><span class="p">.</span><span class="nx">next_val</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">context</span><span class="p">.</span><span class="nx">direction</span> <span class="o">=</span> <span class="o">-</span><span class="mf">1</span><span class="p">;</span>
................................................................................
    <span class="kd">var</span> <span class="nx">self</span> <span class="o">=</span> <span class="k">this</span><span class="p">;</span>
    <span class="nx">alertify</span><span class="p">.</span><span class="nx">prompt</span><span class="p">(</span> <span class="s1">&#39;Enter Sample URL&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span><span class="p">,</span> <span class="s1">&#39;&#39;</span>
        <span class="p">,</span> <span class="kd">function</span><span class="p">(</span><span class="nx">evt</span><span class="p">,</span> <span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">self</span><span class="p">.</span><span class="nx">addURL</span><span class="p">(</span><span class="nx">value</span><span class="p">);</span>
        <span class="p">}</span>
        <span class="p">,</span> <span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="nx">alertify</span><span class="p">.</span><span class="nx">error</span><span class="p">(</span><span class="s1">&#39;Cancel&#39;</span><span class="p">)</span>
        <span class="p">}</span>
    <span class="p">);</span>
<span class="p">}</span>

<span class="nx">addSample</span><span class="p">()</span> <span class="p">{</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">state</span><span class="p">.</span><span class="nx">samples</span><span class="p">.</span><span class="nx">push</span><span class="p">({});</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">update</span><span class="p">();</span>
<span class="p">}</span>

................................................................................
<span class="p">}</span>

<span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">bitrhythm</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="worklet">
<h2>Worklet<a class="headerlink" href="#worklet" title="Permalink to this headline">¶</a></h2>
<p>More worklet implementations</p>
<ul class="simple">
<li><p><a class="reference external" href="https://mimicproject.com/guides/maximJS">https://mimicproject.com/guides/maximJS</a></p></li>
<li><p>Gibberish</p></li>
</ul>
<p>Some implementation links</p>
<p><a class="reference external" href="https://stackoverflow.com/questions/12089662/mixing-16-bit-linear-pcm-streams-and-avoiding-clipping-overflow">https://stackoverflow.com/questions/12089662/mixing-16-bit-linear-pcm-streams-and-avoiding-clipping-overflow</a><br />
<a class="reference external" href="https://www.eumus.edu.uy/eme/ensenanza/electivas/dsp/presentaciones/PhaseVocoderTutorial.pdf">https://www.eumus.edu.uy/eme/ensenanza/electivas/dsp/presentaciones/PhaseVocoderTutorial.pdf</a></p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">class</span> <span class="nx">Sampler</span> <span class="k">extends</span> <span class="nx">AudioWorkletProcessor</span> <span class="p">{</span>
  <span class="nx">files</span> <span class="o">=</span> <span class="p">[]</span>
  <span class="nx">readIdx</span> <span class="o">=</span> <span class="p">{}</span>
  <span class="nx">loopStartIdx</span> <span class="o">=</span> <span class="p">[]</span>

  <span class="nx">constructor</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
    <span class="k">super</span><span class="p">()</span>
    <span class="k">this</span><span class="p">.</span><span class="nx">port</span><span class="p">.</span><span class="nx">onmessage</span> <span class="o">=</span> <span class="p">({</span> <span class="nx">data</span> <span class="p">})</span> <span class="p">=&gt;</span> <span class="p">{</span>
      <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">init</span><span class="p">)</span> <span class="p">{</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">files</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">init</span>
        <span class="k">this</span><span class="p">.</span><span class="nx">loopStartIdx</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">files</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">f</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">return</span> <span class="mf">0</span>
        <span class="p">})</span>
      <span class="p">}</span>
      <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">noteOn</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">this</span><span class="p">.</span><span class="nx">readIdx</span><span class="p">[</span><span class="nx">data</span><span class="p">.</span><span class="nx">sample</span><span class="p">]</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">loopStartIdx</span><span class="p">[</span><span class="nx">data</span><span class="p">.</span><span class="nx">sample</span><span class="p">]</span>
      <span class="p">}</span>
      <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">data</span><span class="p">.</span><span class="nx">noteOff</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">delete</span> <span class="k">this</span><span class="p">.</span><span class="nx">readIdx</span><span class="p">[</span><span class="nx">data</span><span class="p">.</span><span class="nx">sample</span><span class="p">];</span>
      <span class="p">}</span>
    <span class="p">};</span>
  <span class="p">}</span>

  <span class="nx">process</span><span class="p">(</span><span class="nx">inputs</span><span class="p">,</span> <span class="nx">outputs</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">outLeft</span> <span class="o">=</span> <span class="nx">outputs</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="mf">0</span><span class="p">]</span>
    <span class="kd">var</span> <span class="nx">outRight</span> <span class="o">=</span> <span class="nx">outputs</span><span class="p">[</span><span class="mf">0</span><span class="p">][</span><span class="mf">1</span><span class="p">]</span>

    <span class="nb">Object</span><span class="p">.</span><span class="nx">keys</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">readIdx</span><span class="p">).</span><span class="nx">map</span><span class="p">((</span><span class="nx">sample</span><span class="p">)</span> <span class="p">=&gt;</span> <span class="p">{</span>
        <span class="k">for</span> <span class="p">(</span><span class="kd">let</span> <span class="nx">i</span><span class="o">=</span><span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">outLeft</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">,</span> <span class="k">this</span><span class="p">.</span><span class="nx">readIdx</span><span class="p">[</span><span class="nx">sample</span><span class="p">]</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
            <span class="k">if</span> <span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">readIdx</span><span class="p">[</span><span class="nx">sample</span><span class="p">]</span> <span class="o">&lt;</span> <span class="k">this</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="nx">sample</span><span class="p">].</span><span class="nx">pcmLeft</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
                <span class="nx">outLeft</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="nx">sample</span><span class="p">].</span><span class="nx">pcmLeft</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">readIdx</span><span class="p">[</span><span class="nx">sample</span><span class="p">]]</span>
                <span class="nx">outRight</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span> <span class="o">+=</span> <span class="k">this</span><span class="p">.</span><span class="nx">files</span><span class="p">[</span><span class="nx">sample</span><span class="p">].</span><span class="nx">pcmRight</span><span class="p">[</span><span class="k">this</span><span class="p">.</span><span class="nx">readIdx</span><span class="p">[</span><span class="nx">sample</span><span class="p">]]</span>
            <span class="p">}</span>
        <span class="p">}</span>
    <span class="p">})</span>

    <span class="k">return</span> <span class="kc">true</span>
  <span class="p">}</span>
<span class="p">}</span>

<span class="nx">registerProcessor</span><span class="p">(</span><span class="s1">&#39;sampler&#39;</span><span class="p">,</span> <span class="nx">Sampler</span><span class="p">)</span>
</pre></div>
</div>
</div>
<div class="section" id="sample">
<h2>Sample<a class="headerlink" href="#sample" title="Permalink to this headline">¶</a></h2>
<p>You can add samples using the file upload. All samples are available as an array – samples. Initialise samples, global variables and synthesisers using the transition function and change the sample parameters using the same during live coding.</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p">&lt;</span><span class="nt">sample</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">vbox</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">vstack</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-2&quot;</span><span class="p">&gt;</span>
................................................................................
            <span class="nx">console</span><span class="p">.</span><span class="nx">log</span><span class="p">(</span><span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">)</span>
            <span class="k">return</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
        <span class="p">}</span>
    <span class="p">}</span>


    <span class="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">&quot;mount&quot;</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
    <span class="p">});</span>
   <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">sample</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="app">
<h2>App<a class="headerlink" href="#app" title="Permalink to this headline">¶</a></h2>
<div class="highlight-hylang notranslate"><div class="highlight"><pre><span></span><span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">sanic</span> <span class="p">[</span><span class="nv">Sanic</span> <span class="nv">response</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">sanic.response</span> <span class="p">[</span><span class="nv">json</span> <span class="nv">text</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">sanic.exceptions</span> <span class="p">[</span><span class="nv">NotFound</span> <span class="nv">abort</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">jinja2</span> <span class="p">[</span><span class="nv">Environment</span> <span class="nv">FileSystemLoader</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="nv">re</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">ipdb</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">sys</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">traceback</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">json</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="nv">datetime</span><span class="p">)</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">email.utils</span> <span class="p">[</span><span class="nv">format_datetime</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="p">[</span><span class="nv">urllib.parse</span> <span class="p">[</span><span class="nv">urlparse</span><span class="p">]])</span>
<span class="p">(</span><span class="k">import </span><span class="nv">base64</span><span class="p">)</span>


<span class="p">(</span><span class="kd">setv </span><span class="nv">file-loader</span> <span class="p">(</span><span class="nf">FileSystemLoader</span> <span class="s">&quot;templates&quot;</span><span class="p">))</span>
<span class="p">(</span><span class="kd">setv </span><span class="nv">env</span> <span class="p">(</span><span class="nf">Environment</span> <span class="ss">:loader</span> <span class="nv">file-loader</span><span class="p">))</span>

<span class="p">(</span><span class="kd">setv </span><span class="nv">app</span> <span class="p">(</span><span class="nf">Sanic</span> <span class="s">&quot;Bitrhythm&quot;</span><span class="p">))</span>

<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.exception</span> <span class="nv">NotFound</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">ignore_404s</span> <span class="p">[</span><span class="nv">request</span> <span class="nv">exception</span><span class="p">]</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">text</span> <span class="p">(</span><span class="nf">+</span> <span class="s">&quot;Yep, I totally found the page &quot;</span> <span class="nv">request.url</span><span class="p">)))</span>
  <span class="p">)</span>

<span class="p">)</span>








<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.route</span> <span class="s">&quot;/song/&lt;name&gt;&quot;</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">get-index</span> <span class="p">[</span><span class="nv">request</span> <span class="nv">name</span><span class="p">]</span>
    <span class="p">(</span><span class="kd">setv </span><span class="nv">template</span> <span class="p">(</span><span class="nf">env.get_template</span> <span class="s">&quot;index.html&quot;</span><span class="p">))</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">response.html</span> <span class="p">(</span><span class="nf">template.render</span> <span class="p">{</span><span class="s">&quot;data&quot;</span> <span class="nv">name</span><span class="p">})))</span>
  <span class="p">)</span>



<span class="p">)</span>

<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.route</span> <span class="s">&quot;/&quot;</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">get-index</span> <span class="p">[</span><span class="nv">request</span><span class="p">]</span>
    <span class="p">(</span><span class="kd">setv </span><span class="nv">template</span> <span class="p">(</span><span class="nf">env.get_template</span> <span class="s">&quot;index.html&quot;</span><span class="p">))</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">response.html</span> <span class="p">(</span><span class="nf">template.render</span> <span class="p">{</span><span class="s">&quot;data&quot;</span> <span class="s">&quot;&quot;</span><span class="p">})))</span>
  <span class="p">)</span>
<span class="p">)</span>





<span class="p">(</span><span class="k">with</span><span class="nv">-decorator</span>
  <span class="p">(</span><span class="nf">app.route</span> <span class="s">&quot;/issue&quot;</span><span class="p">)</span>
  <span class="p">(</span><span class="nf">defn/a</span> <span class="nv">get-index</span> <span class="p">[</span><span class="nv">request</span><span class="p">]</span>
    <span class="p">(</span><span class="kd">setv </span><span class="nv">template</span> <span class="p">(</span><span class="nf">env.get_template</span> <span class="s">&quot;page.html&quot;</span><span class="p">))</span>
    <span class="p">(</span><span class="k">return</span> <span class="p">(</span><span class="nf">response.html</span> <span class="p">(</span><span class="nf">template.render</span><span class="p">)))</span>
  <span class="p">)</span>

<span class="p">)</span>

<span class="p">(</span><span class="nf">app.static</span> <span class="s">&quot;/&quot;</span> <span class="s">&quot;./public&quot;</span><span class="p">)</span>

<span class="p">(</span><span class="nf">defmain</span> <span class="p">[</span><span class="o">&amp;</span><span class="k">rest </span><span class="nv">args</span><span class="p">]</span>
    <span class="p">(</span><span class="nf">app.run</span> <span class="ss">:host</span> <span class="s">&quot;0.0.0.0&quot;</span> <span class="ss">:port</span> <span class="mi">8015</span><span class="p">)</span>
<span class="p">)</span>
</pre></div>
</div>
</div>
<div class="section" id="index">
<h2>Index<a class="headerlink" href="#index" title="Permalink to this headline">¶</a></h2>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>Bitrhythm<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Cache-Control&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache, no-store, must-revalidate&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Pragma&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Expires&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="p">/&gt;</span>

        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;Bitrhythm&quot;</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;description&quot;</span> <span class="na">xml:lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;literate programming, p5, live coding, algorave, demoscene, creative programming, music, techno, programming, webaudio, webgl, p5, improvising&quot;</span><span class="p">&gt;</span>

       ${common_scripts}

        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;preconnect&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.gstatic.com&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,500;1,700&amp;display=swap&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://fonts.googleapis.com/css2?family=Major+Mono+Display&amp;family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,700;1,100;1,200;1,300;1,400;1,500;1,700&amp;display=swap&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://code.jquery.com/ui/1.12.0/jquery-ui.min.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://code.jquery.com/ui/1.12.0/themes/smoothness/jquery-ui.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/micromodal/0.4.6/micromodal.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-RMMh+IHzfZLsVFo1rX9PBoysxrJJqjyOS31HYWftobWtv2At6KBTqKpvVDIWAjL5aiV+LjFqkQ6e53Rdw3VOBg==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdn.jsdelivr.net/npm/whenipress@1.8.0/dist/whenipress.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/alertify.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-JnjG+Wt53GspUQXQhc+c4j8SBERsgJAoHeehagKHlxQN+MtCCmFDghX9/AcbkkNRZptyZU4zC8utK59M5L45Iw==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/alertify.min.css&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-IXuoq1aFd2wXs4NqGskwX2Vb+I8UJ+tGJEu/Dc0zwLNKeQ7CW3Sr6v0yU3z5OQWe3eScVIkER4J9L7byrgR/fA==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.13.1/css/themes/default.min.css&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-RgUjDpwjEDzAb7nkShizCCJ+QTSLIiJO1ldtuxzs0UIBRH4QpOjUU9w47AF9ZlviqV/dOFGWF6o7l3lttEFb6g==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="p">/&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/json-url-master/dist/browser/json-url.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/riot-3.13.2/riot+compiler.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.1.2/tailwind.min.css&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha512-RntatPOhEcQEA81gC/esYoCkGkL7AYV7TeTPoU+R9zE44/yWxVvLIBfBSaMu78rhoDd73ZeRHXRJN5+aPEK53Q==&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js&quot;</span> <span class="na">integrity</span><span class="o">=</span><span class="s">&quot;sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM&quot;</span> <span class="na">crossorigin</span><span class="o">=</span><span class="s">&quot;anonymous&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/lib/codemirror.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/hint/show-hint.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/lib/codemirror.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/hint/show-hint.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;http://esironal.github.io/cmtouch/addon/hint/xml-hint.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/hint/html-hint.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/xml/xml.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/javascript/javascript.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/css/css.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/mode/htmlmixed/htmlmixed.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/selection/active-line.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/selection/mark-selection.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/addon/edit/matchbrackets.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://esironal.github.io/cmtouch/theme/neonsyntax.css&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://unpkg.com/pyloncss@latest/css/pylon.css&quot;</span><span class="p">/&gt;</span>


        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/tune.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/misc.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">style</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/css&quot;</span><span class="p">&gt;</span>
<span class="nt">body</span> <span class="p">{</span>
    <span class="k">background</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
    <span class="k">font-family</span><span class="p">:</span> <span class="s1">&#39;Roboto Mono&#39;</span><span class="p">,</span> <span class="kc">monospace</span><span class="p">;</span>
    <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">hidden</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">a</span> <span class="p">{</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
<span class="p">}</span>

<span class="nt">input</span> <span class="p">{</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">btn</span> <span class="p">{</span>
    <span class="k">background</span><span class="p">:</span> <span class="kc">white</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
    <span class="k">padding</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-selected</span>  <span class="p">{</span> <span class="k">background-color</span><span class="p">:</span> <span class="kc">transparent</span> <span class="cp">!important</span><span class="p">;</span>   <span class="k">z-index</span><span class="p">:</span> <span class="mi">20</span> <span class="cp">!important</span><span class="p">;</span> <span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-selectedtext</span> <span class="p">{</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">red</span> <span class="cp">!important</span><span class="p">;</span>
     <span class="k">z-index</span><span class="p">:</span> <span class="mi">25</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror</span> <span class="nt">pre</span> <span class="p">{</span>
  <span class="k">z-index</span><span class="p">:</span> <span class="mi">5</span><span class="p">;</span>
  <span class="k">background</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-cursor</span> <span class="p">{</span>
  <span class="k">border-left</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
  <span class="k">z-index</span><span class="p">:</span> <span class="mi">10</span> <span class="cp">!important</span><span class="p">;</span>
  <span class="k">color</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
  <span class="k">background</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-line</span> <span class="nt">span</span> <span class="p">{</span>
  <span class="k">color</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-line</span> <span class="o">&gt;</span> <span class="nt">span</span> <span class="p">{</span>
  <span class="k">background</span><span class="p">:</span> <span class="kc">black</span><span class="p">;</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-lines</span> <span class="p">{</span>
  <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>


<span class="p">.</span><span class="nc">CodeMirror</span> <span class="p">{</span>
    <span class="k">font-size</span><span class="p">:</span> <span class="mi">12</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
    <span class="k">padding-left</span><span class="p">:</span> <span class="mi">4</span><span class="kt">px</span><span class="p">;</span>
    <span class="k">line-height</span><span class="p">:</span> <span class="mi">1</span><span class="p">;</span>
    <span class="k">background</span><span class="p">:</span> <span class="kc">transparent</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">color</span><span class="p">:</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">font-family</span><span class="p">:</span> <span class="s1">&#39;Roboto Mono&#39;</span><span class="p">,</span> <span class="kc">monospace</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-vscrollbar</span><span class="o">,</span> <span class="p">.</span><span class="nc">CodeMirror-hscrollbar</span> <span class="p">{</span>
    <span class="k">overflow-x</span><span class="p">:</span> <span class="kc">hidden</span> <span class="cp">!important</span><span class="p">;</span>
    <span class="k">overflow-y</span><span class="p">:</span> <span class="kc">hidden</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>

<span class="p">.</span><span class="nc">CodeMirror-cursor</span> <span class="p">{</span>
  <span class="k">border-left</span><span class="p">:</span> <span class="mi">2</span><span class="kt">px</span> <span class="kc">solid</span> <span class="kc">white</span> <span class="cp">!important</span><span class="p">;</span>
<span class="p">}</span>



        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>

        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/bitrhythm.tag&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/dial.tag&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/sample.tag&quot;</span> <span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;riot/tag&quot;</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;/components/number.tag&quot;</span> <span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span> <span class="na">type</span><span class="o">=</span><span class="s">&quot;text/javascript&quot;</span><span class="p">&gt;</span>
            <span class="kd">var</span> <span class="nx">_paq</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">_paq</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">_paq</span> <span class="o">||</span> <span class="p">[];</span>
    <span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;trackPageView&#39;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;enableLinkTracking&#39;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;alwaysUseSendBeacon&#39;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;setTrackerUrl&#39;</span><span class="p">,</span> <span class="s2">&quot;\/\/blog.xyzzyapps.link\/owoamims\/matomo\/app\/matomo.php&quot;</span><span class="p">]);</span><span class="nx">_paq</span><span class="p">.</span><span class="nx">push</span><span class="p">([</span><span class="s1">&#39;setSiteId&#39;</span><span class="p">,</span> <span class="s1">&#39;1&#39;</span><span class="p">]);</span><span class="kd">var</span> <span class="nx">d</span><span class="o">=</span><span class="nb">document</span><span class="p">,</span> <span class="nx">g</span><span class="o">=</span><span class="nx">d</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">),</span> <span class="nx">s</span><span class="o">=</span><span class="nx">d</span><span class="p">.</span><span class="nx">getElementsByTagName</span><span class="p">(</span><span class="s1">&#39;script&#39;</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
    <span class="nx">g</span><span class="p">.</span><span class="nx">type</span><span class="o">=</span><span class="s1">&#39;text/javascript&#39;</span><span class="p">;</span> <span class="nx">g</span><span class="p">.</span><span class="k">async</span><span class="o">=</span><span class="kc">true</span><span class="p">;</span> <span class="nx">g</span><span class="p">.</span><span class="nx">src</span><span class="o">=</span><span class="s2">&quot;\/\/blog.xyzzyapps.link\/oozotche\/matomo\/matomo.js&quot;</span><span class="p">;</span> <span class="nx">s</span><span class="p">.</span><span class="nx">parentNode</span><span class="p">.</span><span class="nx">insertBefore</span><span class="p">(</span><span class="nx">g</span><span class="p">,</span><span class="nx">s</span><span class="p">);</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>

    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;containera-full&quot;</span><span class="p">&gt;</span>
            <span class="p">&lt;</span><span class="nt">hstack</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;mb-2&quot;</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;/docs/index.html&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>docs<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAJwFAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9NTfIT-_uEg-npGX0y9CmzyyVpwgaOUrKNlF-pzVXf3YnQ2gSfpzY3zlYLujavQRq73hSEM-RaGxTxuud9nauG_VdXCmE_lvZ88XvUHOIGjOkCUKV-1ot3i9fx5NP-UsUmVpnjUDnq_9eUJfonx5B_oG4c3GvLitNREl_O9emU8CST0v5RVqHSudqZqsrortpDjdMlekhQ2y7ZlNcUDjGoTrH4vFMrLVI60wINoufS0iO6ourxizS1Ifv_iirkdP0U0Zp21rHHKXlwhWG0hmTCxYo8ZIf0Cmbiu22GiFFmRfIcuWbcq-_SWdyMJ0sWIslhKpGFEapN604eNblpy5im2PsItjWScu-cS0JI3zeHb8JMNzWflq0-XWHG5WLsmPqCbn3GgfR6BiAx1ApmTui84WXgX6SuJPkXRqHEOKpBZ4dKEPr5P_-DDpwz0L7i8X_FHE-LBMactDBoKgIbIoyVnRe6DJ9s5AZLJjUrWGGVCLcp5bEKOnH_3HfZuDq9UlOvZRVkz3BwpUeajLeUJcAYxDmU2JbNUaipMJN7LF9YAX2LaT44LACw2A7Is-pQ_EGznjhEo7SS7JusQPN6G43g4OUZSUY5WNlPUCWfXSeWNU0Xx_-b4r6t4HHQS2P2stIQOS96JqLzXrx-Q62Y8RSRIvieE76j_-dw4icTDiATfx8doLkSzXgOzNTcZYume2cHLEG-0TbgR1M6WCPiH4pvHIRfcTxEDZK5b7iqIhY0MNW8Kkyn7KFVqQf_5d_msiv57DWIHg6Qi6cmBdOF0Li_CY8kFBV4BWLsOlanN6_hehIREVU8WgWbM9rdrKcqzhHD8Fp5qTmbyiVnjD83BDhKY5zwF8xFM1p7ZmEjlIF1ag62BDRt5j_MZ9q5COsX9gpV6DfA0FaDwyOmkMsOFiGeUNIr8B_ENYG-EpYbhUHZukv-QttcjFwRypF1eSN3DMrGUm1eB62PW3s--XcugwT5GJQRa66WZF4DZzPPTKEZhtNL28KgBcHm3DeuSfN_HRsgBW1o2YDpM1QP-K0aedKB_umlWhdBze7Gs72-vDfjB6LGI__tncLNS3GaqYaltFnzc64EOV-mz1xvlyAuFSj-T8r8e5ebJky7o6PZXPTvvCLeTL056Tpp-Gh-WgxmyMISIhkb5kKPj235H7OY-JAoT28VVrA01WpXoArOJaE2ijBt2oLOYXwWiO1hUI3NtTO2vI__sllxHNHS6EiHXPyLj8_PGF47RUq7oc-9ibiF9FUuoonMLE0PwyGOUJ6LU9SDb4FLPwk0gJBP4GiWLftvfErrXDNck9O6_JZvpJ_9O5qmNDUge5yDYbO__vJejx0bomU7eG2kuvPAmGtiWrYo8B_3JoEAOMgVa9SxE4kZ-ijdh-glIKredlMCUG5eYJc-6H_94pteyO-ocB8rrlfSGr6M2r9xlbeMecCvJTRjmwMbB12DWGbDq5Sxn8tgX98O9lT-51_oajqKVMmox3f7kXhsJPxyIMsUaVVFRmpPJvMt5nt9-i1Vgmux4a3t7a1oVPdN35POOjun63NkyODKhTUHmjdC7h9tv6ZI8WPf2Gh9__k6qf5xp3u3OjzkISj7ainHooji_3Cnjm3T30e6pm3MhliJg1ezFi8NetUwwYZz6UNCMOTUaWAqJ5BmF2hAh5Sdsog93orRvrOuPTNhRA1Wlyjrsy8zVW3WlO4chcKVYA0OsH1Zwjo7koXbfX7ERrPnAbZsWfkPePwI4to-KuPF1v0U4jwFelzwn3n4C1E2BkqPfNcvnVlFDmPHlyOCZHrfsrG9GUPsCrZdrX2EHiWH_bRkXVJwkHTLir8d_cjI0DIrVYji4XBIDX9Pmt-0ylr0FeHLXVHNb4Q7V--3d4-mJ2zXsZDR97M_ikaQVHZBWcKnyWmx_aPoWKnFYkk_6PbR246YU3fViA9PdZKTYrN2B3KmcrliH2T2YRcRdWQGxXlXZh3Bsd5PtOC1EuV7-DHlkI67D6V-AFScJfdj64Pv1wKwGQZ7lEZtrmv_VVRmkWYWFtbBj5HHnth1sKhBjVgGIVH74y9b0hHjpo5kw-1_3jNZ1ooxp-y8FTHblmSkSoQe8bey9XQ7BxGbUPsG0X5LfT8FpZH36A6Vz6nedFEvuoQCyV55qcnDD5IKsJeyKZz1ugrYGoZIfJMr1XTiulWUiaxeat7Q6Xq1YXOjvWV7ki_w4m__-wVP5g&quot;</span><span class="p">&gt;</span>techno<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
                
                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAIbCAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQe5mT-79BTKosH6Xje2IYnNRgEOpeuhg9OTB7Y34cZmeLb5MKZic7bXMO7vWrjHyfc2FvIP0v1Gp--NY5tUsY7sQ71Zzph5WmKUZ2oNtnxz8-HaVpK1SGQzEOq3-lWkeJ76a2J8Ng2OEZxOMNAk6VTnu8fRRTToMlowDe3wjs8DorsxdnW49ThFhGbOek4QAwzPneapDmjuDKRqiqN3btgnfZDzokeOTh6CzwAI2rBbL07YUBEFaMziOJ_2X59fYBPM3eCnL7GlOCk2u6_22WnYgZPbc3RuJLf8JLAhbDrXvZHyYekrPuGo_R6V2BCPE14rZFFwJQWEqy_KDtH_YPMhj1TPS62qcPr6qAWrI9nsndpRrczwBFChHSPKiZXjCZJZKH1Kh19A4-vpXwbr1BCiNdOTQ89KKv0OXpIFUMwx5Qd5jsrb2c-hywM688ClZ86A5o4KzrE2xjG4VbcexmPdOXS-K6PRU4c6dJOUClOLNZpbmZvL8Bo4ep67wL0bFEOMqhN30pLGmZlnfd5mgH8J9dPrGsEglKLGskQ_g2vEeR9CzOstzctjCKtL1O8oNkSuCnXSGE0uY5rxGmBu7AW99tRx0i8hNzB4l1S1mxnzkLefi9VM6YYZraX7T2kGnRgD5HOg0WH2LeUsVuWpnp189Ph_Os95_XUVBc67TwU8IWbzat1decCt0jKKP13L7a0OCO18Fq2DVr9veHq2mRepiObWGsYcqjXkUNjaxoItg_pWdK6gyveVXjfs3PaJ477UbpiZBWxoc-Ebn8FZu6bZZ4gOZE-MoJHUDiQZgo3-lirXTvpcpsgsaIUESDAcGUNE4aIK6wIFGnEaEFYo4veQqTLeic4NhPtUpTdfRqdNTKOaVSUE_KGXKXaZl0Eni1DBmEGykml4uxHsWBEE44Ku34YIb6KZUcCu2DuXDiXcbabsWkA-czXWBtRnzWJ6ib4scny1o6CsVnugUjE9wv84bz2&quot;</span><span class="p">&gt;</span>chiptune<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>

                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAKJCAAAAAAAAABDKUqGU5vI8Eygv8VLc6H1NFIzdYQFgmT-79BTKosH6Xje2IYnNRgEOpeuhg8jahOEd3yMC_PXFq-i_ClvL8Ct3Wgf6uJb5dmDYwtUHkddL3DLEcA0AoD3rP_ZyA1lDuiOOQJSJIeDylz8ajg_yNsR8119StK7SE1-QOm5OZus7ISs3-UqjsX1W0VSZeoF1ebH8hgDFisSvjykmfW2_oDLr6axQL5meUVvESZBQhe4lE78iytxrPrbhjdx5v4qwKWbDGm2pSdeuz9FMGq63DfpnbAy-RHVY3dCDCZIYzOvwfOOR1QV0McEXIqbGpLzRcvIOe5TUnaGKm7qaQqHhDyjt5rL0jFxioR5yKnUAp0gL6zy5TLqRS80CIiz0dj0Na63UxYtPLpf4vWqOJFX6VZpTFRC7o1W8TmeheEr_UgpXblHVIdg8zUP69XACKo_X7MJ-g9-s5ejXxeCWt5YZ-T8-kFbDX-bFQsov0C5k2SMdsTF5IzBulC3aL6-2Mazf5wVU16v-r9t6-U0iaQCqL8UYXUlr9abJSXOYkzSax56PzZiPzRzDv1Sj8QhsZ3xdFXfXNe-3F5o4YjXZ9JwptVwQLaj3UcPvkB4_Eow3JC7mPStctj2RooSef63tbMlp_7YBzaIjRnjJp2n9m11_606XGaYn1JpXMq2Garz3FUYUCXkNziILJlMaKBPqh8GdHdR01bN3G2AcmJTKfppvrY4-TJqzwcQodEU7aiVmiMwbW0Gj9JRcA3tLOZ6EbzsaGxqB_z4gCMnZ7aYzaGXLI7R5ACSC8znneiNZH5_k3kmHB65_8-STam5BnbRBaO0EDSZLlMH4EeA5TUQbfxwBYXvbNX2QWqF5cwHg1S7i9RPr_VBAkC5WZNTYZlNmI1xWkYyli_pstNWBxrmj4ujztca0Fg8RScocAP3YADqMXt73EEMXyqP_y54UwA&quot;</span><span class="p">&gt;</span>blank<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>

                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span><span class="p">&gt;&lt;</span><span class="nt">a</span>  <span class="na">href</span><span class="o">=</span><span class="s">&quot;/song/XQAAAAL6DwAAAAAAAABDKUqGU5vI8Nuv2pxqeIybGqtJ0xIrSiobr98sdE7afj4Ar4jJq-8ql_W1_78a1_GXYU33QxiTtAV7SHRYdH6zp0CULZjCAn80UrL_cbk6C8SsOzgqMzV6zYkOLvG-fjZLi8LWC9mF2G1PfJaZ22MmMGC7XZiRMvuGgg9IXd6TYK8ymyJSEN8Xog0gS6esuZ-sV6WeWPyMk_80foxigbnhHOeWNjqTD3MHSKVhooDpOdlhHDE9Ym1lf1oXKJyd1nzIropiCpnzQhRx4VLOvptpUX9SPI8JfnOttZoK7-a-lbvVzgBRMrqzxMNO_Td-HNS-tmg3EhtJfpMHKvxFMaPkg0EusLRyP-FAPkl0N3Abu0-nyU14Ayniw1uEDi4tCwYvGQjE5FDxcOEAq0gm3NhikcGkInjkKD7Xhi9SKBshXapQ07ZcykBWOUNWiTQAWTyMwF4iQ2QQPlgV1pwOSSVp-sXJIwbsQFxnlV_wEdMZUF6a8JafjOXzkhYwDVoDVAoa7TAZdjxtIQf7ZIcr0einkkr79XkfkYr2Be38bAyG-KFPRL1L9Oc41gE36Wd6L3oEKuEI-oMYXp5IWlCC_sAyuOBNQsHYoZk8vxByQ8UNbLLOJ74GsYDEfGccM5THthnFOJmGz3h0eOAvxRkTXK1K7vr7ZASa1ijNatkfI2FGrAEJ8UN1aCbYz9YQbIQMfbLw5gzQCu7gUtzcaIx0YuTTJ3AjDw6hklmNmOP8Oefj-eJo4n4aOk6V3pB7n2Xc2S05-FxOA3iPujsa7r9QRJ7Rm1kfzgIhw1VoCJjFa7GSGfwccF9FiQtaNOuUWykmf7Nce2zFokkQGxSUa3Xm9q36L5zsOM-QXFDuQFWW1YBPk-ew8uosMorAkISE3VG46VqdkuMGhkGjqWKqv4XB7djOJXaQZRYIEgIpg5d6LXYpFw6OzjJZes3sS4CD4hMdzNU5OmyUmpgi9KMd9j4aGWH8Dku8bbw49Uz8UTlhGiBpuHlxzHV_g6sGnw-IdJ3RA1ylVOcU5uwXIJ5144iXmKa2LB5UhPepG1vclcm7lIWfEB3hOxpbbqS-9epGLWsYHJ8x70gRNZIdwm2HhdKpfl-8h-uXrsSfbyyQgcaWRJoVYpjqYwkld84551DwiYEWNgPMlqBHjo7Ug7R0NyQe2DcQ8UiWTDvAseVTKqVfQwv1dBHkJVGucDrdvBfoHm6_JyvCeBLdNxRP2FJEBQ_kow5_r7ESFzQZ8Bk7vr74dkxDBXdkSjr9rV6ElS0s_tS1NwrniHuI9SlQirUE775b3V8Wjnt-SMdwRRpMZHIBHntb_XDuJfRYYka_cCA1PNnP99R1VyKPypgUraZhqT_LwF7VQGnEWliiCRBhJkh4Npzu3lTHFQ7h1tduH3x12EUeHAviYg3GSuSG7t2gXd_XkTTJ6EugOt2p0Y1_CG8vG94s7k3DVJFWeMHQMW_naSbFJs4zyFDr7X8rfU5nJ1KABNH_wkrR2cLRxCCq95kzE4gahZyfOTKtfp-un1TMFTmJ0PWdbS67hxFTOhRrCYKoKsg62R14OJ6R_NbmhFin8mjwhFBLQK-n8_BuFwYTrUSYBh3k_gF1ZP68_0Kyf2d7o190dK1N6m5Qk-KcNujqiIgfzy0NeRcALL1oW97T7P29fOpEELXwVxuBY89yGi5TO_R7DUXEiCmEBFAmOB4EJMigVW6UJwSMR05gOBaaov1HBEmADf4MVM54b8H1EVXAMzzwszVKBPplb6ZbEkad1JYuzF9Wc2l07vsMLAzymm3Y2gkjv9GZo9biCDSLbFpacBJfqJF3xvr_-98Bs5-fnveqXf3IbAEVXZ3X_2SjoXPmlg0m_9usiW95hbOMd7pxNKla8u8nOu8r9vkLqqKg_yBHdnTbHThqEgGRPmpcVB8x3P5DZ5sHAWg2k1mubUuuI9aycC-b1qMOPu5y8_bPvXK5uGpEpmoXqbRSlqMLxUrpRPIjOoTPjBc8BciARAkj1yXYWfJ5umO32LMrCaJSi3AO5v_K95FVKT3wnE4x3Ra1yU3CcuXKlFrWrUlWWXGHYS7tXc7YL7Ik5jvI8g3oJeS4LaFMc5WxyzzguEUaO-FxRzVU6kgN_9Yddrg&quot;</span><span class="p">&gt;</span>stochastic<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>

                <span class="p">&lt;</span><span class="nt">h5</span> <span class="na">class</span><span class="o">=</span><span class="s">&quot;ml-4&quot;</span> <span class="p">&gt;&lt;</span><span class="nt">a</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://xyzzyapps.link/samples/&quot;</span> <span class="na">target</span><span class="o">=</span><span class="s">&quot;_blank&quot;</span><span class="p">&gt;</span>sample browser<span class="p">&lt;/</span><span class="nt">a</span><span class="p">&gt;&lt;/</span><span class="nt">h5</span><span class="p">&gt;</span>
            <span class="p">&lt;/</span><span class="nt">hstack</span><span class="p">&gt;</span>

            <span class="p">&lt;</span><span class="nt">bitrhythm</span> <span class="na">song</span><span class="o">=</span><span class="s">&quot;{{data}}&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">bitrhythm</span><span class="p">&gt;</span>
        <span class="p">&lt;/</span><span class="nt">div</span><span class="p">&gt;</span>

    <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="nx">riot</span><span class="p">.</span><span class="nx">compile</span><span class="p">(</span><span class="kd">function</span><span class="p">()</span> <span class="p">{</span>
            <span class="kd">var</span> <span class="nx">bitrhythm</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;bitrhythm&#39;</span><span class="p">);</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">bitrhythm</span> <span class="o">=</span> <span class="nx">bitrhythm</span><span class="p">[</span><span class="mf">0</span><span class="p">];</span>
            <span class="kd">var</span> <span class="nx">dial</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;dial&#39;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">number</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;number&#39;</span><span class="p">);</span>
            <span class="kd">var</span> <span class="nx">sample</span> <span class="o">=</span> <span class="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">&#39;sample&#39;</span><span class="p">);</span>
        <span class="p">})</span>
    <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>


    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>

<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="page">
<h2>Page<a class="headerlink" href="#page" title="Permalink to this headline">¶</a></h2>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="cp">&lt;!DOCTYPE html&gt;</span>
<span class="p">&lt;</span><span class="nt">html</span> <span class="na">lang</span><span class="o">=</span><span class="s">&quot;en&quot;</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">head</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">charset</span><span class="o">=</span><span class="s">&quot;utf-8&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">name</span><span class="o">=</span><span class="s">&quot;viewport&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;width=device-width, initial-scale=1&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Cache-Control&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache, no-store, must-revalidate&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Pragma&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;no-cache&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">meta</span> <span class="na">http-equiv</span><span class="o">=</span><span class="s">&quot;Expires&quot;</span> <span class="na">content</span><span class="o">=</span><span class="s">&quot;0&quot;</span> <span class="p">/&gt;</span>
        <span class="p">&lt;</span><span class="nt">title</span><span class="p">&gt;</span>About birthythm<span class="p">&lt;/</span><span class="nt">title</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;icon&quot;</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;favicon.ico&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="nt">html</span><span class="o">,</span> <span class="nt">body</span> <span class="p">{</span>
            <span class="k">margin</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span> <span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span> <span class="mi">0</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="nt">iframe</span> <span class="p">{</span>
            <span class="k">position</span><span class="p">:</span><span class="kc">fixed</span><span class="p">;</span>
            <span class="k">top</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">left</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">bottom</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">right</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">width</span><span class="p">:</span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">height</span><span class="p">:</span><span class="mi">100</span><span class="kt">%</span><span class="p">;</span>
            <span class="k">border</span><span class="p">:</span><span class="kc">none</span><span class="p">;</span>
            <span class="k">margin</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">padding</span><span class="p">:</span><span class="mi">0</span><span class="p">;</span>
            <span class="k">overflow</span><span class="p">:</span><span class="kc">hidden</span><span class="p">;</span>
            <span class="k">z-index</span><span class="p">:</span><span class="mi">999999</span><span class="p">;</span>
        <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">style</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">link</span> <span class="na">href</span><span class="o">=</span><span class="s">&quot;https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css&quot;</span> <span class="na">rel</span><span class="o">=</span><span class="s">&quot;stylesheet&quot;</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span><span class="p">&gt;</span>
            <span class="nb">window</span><span class="p">.</span><span class="nx">goatcounter</span> <span class="o">=</span> <span class="p">{</span>
                <span class="nx">path</span><span class="o">:</span> <span class="kd">function</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span> <span class="k">return</span> <span class="nx">location</span><span class="p">.</span><span class="nx">host</span> <span class="o">+</span> <span class="nx">p</span> <span class="p">}</span>
            <span class="p">}</span>
        <span class="p">&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">script</span> <span class="na">data-goatcounter</span><span class="o">=</span><span class="s">&quot;https://analytics.xyzzyapps.link/count&quot;</span> <span class="na">async</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;//analytics.xyzzyapps.link/count.js&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">script</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">head</span><span class="p">&gt;</span>
    <span class="p">&lt;</span><span class="nt">body</span><span class="p">&gt;</span>
        <span class="p">&lt;</span><span class="nt">iframe</span> <span class="na">src</span><span class="o">=</span><span class="s">&quot;https://blog.xyzzyapps.link/bitrhythm-submit-issue-feedback&quot;</span> <span class="na">frameborder</span><span class="o">=</span><span class="s">&quot;0&quot;</span><span class="p">&gt;&lt;/</span><span class="nt">iframe</span><span class="p">&gt;</span>
    <span class="p">&lt;/</span><span class="nt">body</span><span class="p">&gt;</span>
<span class="p">&lt;/</span><span class="nt">html</span><span class="p">&gt;</span>
</pre></div>
</div>
</div>
<div class="section" id="javascript">
<h2>Javascript<a class="headerlink" href="#javascript" title="Permalink to this headline">¶</a></h2>
<p>This includes the functions used for parsing the pattern and initialising the samples.
A prelimnary sampler implementation has been done with AudioWorklet support, although there doesn’t seem to much improvement in the performance.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">getRandomInt</span><span class="p">(</span><span class="nx">max</span><span class="p">)</span> <span class="p">{</span>
  <span class="k">return</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">floor</span><span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">random</span><span class="p">()</span> <span class="o">*</span> <span class="nx">max</span><span class="p">);</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">initWinamp</span><span class="p">(</span><span class="nx">preset</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">can</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;visual&quot;</span><span class="p">);</span>
    <span class="nx">can</span><span class="p">.</span><span class="nx">height</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">-</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;header-playback&quot;</span><span class="p">).</span><span class="nx">clientHeight</span> <span class="o">/</span> <span class="mf">2</span><span class="p">);</span>
................................................................................
    <span class="nx">can_container</span><span class="p">.</span><span class="nx">width</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">visualizer</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurn</span><span class="p">.</span><span class="k">default</span><span class="p">.</span><span class="nx">createVisualizer</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">rawContext</span><span class="p">,</span> <span class="nx">can</span><span class="p">,</span> <span class="p">{</span>
        <span class="nx">height</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</span> <span class="o">-</span> <span class="p">(</span><span class="nb">document</span><span class="p">.</span><span class="nx">getElementById</span><span class="p">(</span><span class="s2">&quot;header-playback&quot;</span><span class="p">).</span><span class="nx">clientHeight</span> <span class="o">/</span> <span class="mf">2</span><span class="p">),</span>
        <span class="nx">width</span><span class="o">:</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerWidth</span><span class="p">,</span>
        <span class="nx">meshWidth</span><span class="o">:</span> <span class="mf">24</span><span class="p">,</span>
        <span class="nx">meshHeight</span><span class="o">:</span> <span class="mf">18</span><span class="p">,</span>
    <span class="p">});</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">connectAudio</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">rawContext</span><span class="p">.</span><span class="nx">destination</span><span class="p">);</span>
    <span class="kd">const</span> <span class="nx">presets</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">butterchurnPresets</span><span class="p">.</span><span class="nx">getPresets</span><span class="p">();</span>
    <span class="kd">const</span> <span class="nx">presetParam</span> <span class="o">=</span> <span class="nx">presets</span><span class="p">[</span><span class="nx">preset</span><span class="p">];</span>
    <span class="nx">visualizer</span><span class="p">.</span><span class="nx">loadPreset</span><span class="p">(</span><span class="nx">presetParam</span><span class="p">,</span> <span class="mf">0.0</span><span class="p">);</span> <span class="c1">// 2nd argument is the number of seconds to blend presets</span>
    <span class="k">return</span> <span class="nx">visualizer</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">guard</span><span class="p">(</span><span class="nx">range</span><span class="p">)</span> <span class="p">{</span>
................................................................................
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`3&#39;</span><span class="p">,</span><span class="s1">&#39;d&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`4&#39;</span><span class="p">,</span><span class="s1">&#39;e&#39;</span><span class="p">);</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">&#39;`5&#39;</span><span class="p">,</span><span class="s1">&#39;f&#39;</span><span class="p">);</span>
    <span class="k">return</span> <span class="nx">letters</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">lettertodec</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span><span class="p">.</span><span class="nx">match</span><span class="p">(</span><span class="sr">/\d/</span><span class="p">))</span> <span class="p">{</span>
        <span class="nx">no</span> <span class="o">=</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">letter</span><span class="p">);</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;a&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">no</span> <span class="o">=</span> <span class="mf">10</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;b&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">no</span> <span class="o">=</span> <span class="mf">11</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;c&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">no</span> <span class="o">=</span> <span class="mf">12</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;d&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">no</span> <span class="o">=</span> <span class="mf">13</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;e&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">no</span> <span class="o">=</span> <span class="mf">14</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;f&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">no</span> <span class="o">=</span> <span class="mf">15</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">for</span> <span class="p">(</span><span class="nx">i</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;=</span> <span class="nx">no</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">lettertobin</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;0&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0000&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;1&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0001&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;2&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0010&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;3&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0011&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;4&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0100&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;5&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0101&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;6&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0110&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;7&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;0111&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;8&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1000&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;9&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1001&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;a&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1010&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;b&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1011&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;c&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1100&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;d&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1101&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;e&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1110&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">else</span> <span class="k">if</span> <span class="p">(</span><span class="nx">letter</span> <span class="o">==</span> <span class="s2">&quot;f&quot;</span><span class="p">)</span> <span class="p">{</span>
        <span class="nx">bin</span> <span class="o">+=</span> <span class="s2">&quot;1111&quot;</span><span class="p">;</span>
    <span class="p">}</span>
    <span class="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">hex2bin</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">letters</span> <span class="o">=</span> <span class="nx">romantogypsy</span><span class="p">(</span><span class="nx">hex</span><span class="p">)</span>
    <span class="nx">letters</span> <span class="o">=</span> <span class="nx">letters</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">&#39;&#39;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">&quot;&quot;</span><span class="p">;</span>
    <span class="nx">letters</span><span class="p">.</span><span class="nx">map</span><span class="p">(</span><span class="kd">function</span><span class="p">(</span><span class="nx">letter</span><span class="p">)</span> <span class="p">{</span>
................................................................................
        <span class="nx">setTimeout</span><span class="p">(</span><span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
            <span class="nx">$</span><span class="p">(</span><span class="s2">&quot;#cued&quot;</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">&quot;&quot;</span><span class="p">);</span>
        <span class="p">},</span> <span class="nx">seconds</span> <span class="o">*</span> <span class="mf">1000</span><span class="p">)</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">cue</span> <span class="o">=</span> <span class="nx">cue</span><span class="p">;</span>

<span class="k">async</span> <span class="kd">function</span> <span class="nx">loadSamplesToWorklet</span><span class="p">(</span><span class="nx">urls</span><span class="p">)</span> <span class="p">{</span>
    <span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">();</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">context</span> <span class="o">=</span> <span class="nx">context</span><span class="p">;</span>
    <span class="k">await</span> <span class="nx">context</span><span class="p">.</span><span class="nx">addAudioWorkletModule</span><span class="p">(</span><span class="s1">&#39;/sampler.js&#39;</span><span class="p">,</span> <span class="s1">&#39;sampler&#39;</span><span class="p">);</span>
    <span class="kd">var</span> <span class="nx">sampler</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">context</span><span class="p">.</span><span class="nx">createAudioWorkletNode</span><span class="p">(</span><span class="s1">&#39;sampler&#39;</span><span class="p">,</span> <span class="p">{</span>
        <span class="nx">outputChannelCount</span><span class="o">:</span> <span class="p">[</span><span class="mf">2</span><span class="p">],</span>  <span class="c1">// stereo</span>
    <span class="p">});</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">sampler</span> <span class="o">=</span> <span class="nx">sampler</span><span class="p">;</span>
    <span class="kd">var</span> <span class="nx">files</span> <span class="o">=</span> <span class="p">[]</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">var</span> <span class="nx">i</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span> <span class="nx">i</span> <span class="o">&lt;</span> <span class="nx">urls</span><span class="p">.</span><span class="nx">length</span><span class="p">;</span> <span class="nx">i</span><span class="o">++</span><span class="p">)</span> <span class="p">{</span>
        <span class="kd">var</span> <span class="nx">url</span> <span class="o">=</span> <span class="nx">urls</span><span class="p">[</span><span class="nx">i</span><span class="p">]</span>
        <span class="kd">const</span> <span class="nx">source</span> <span class="o">=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">createBufferSource</span><span class="p">();</span>
        <span class="kd">const</span> <span class="nx">audioBuffer</span> <span class="o">=</span> <span class="k">await</span> <span class="nx">fetch</span><span class="p">(</span><span class="nx">url</span><span class="p">)</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">res</span> <span class="p">=&gt;</span> <span class="nx">res</span><span class="p">.</span><span class="nx">arrayBuffer</span><span class="p">())</span>
            <span class="p">.</span><span class="nx">then</span><span class="p">(</span><span class="nx">ArrayBuffer</span> <span class="p">=&gt;</span> <span class="nx">context</span><span class="p">.</span><span class="nx">decodeAudioData</span><span class="p">(</span><span class="nx">ArrayBuffer</span><span class="p">));</span>

        <span class="kd">const</span> <span class="nx">pcmLeft</span> <span class="o">=</span>  <span class="nx">audioBuffer</span><span class="p">.</span><span class="nx">getChannelData</span><span class="p">(</span><span class="mf">0</span><span class="p">)</span>
        <span class="kd">const</span> <span class="nx">pcmRight</span> <span class="o">=</span> <span class="nx">audioBuffer</span><span class="p">.</span><span class="nx">getChannelData</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span>
        <span class="nx">files</span><span class="p">.</span><span class="nx">push</span><span class="p">({</span> <span class="nx">pcmLeft</span><span class="p">,</span> <span class="nx">pcmRight</span> <span class="p">})</span>
    <span class="p">}</span>
    <span class="nx">sampler</span><span class="p">.</span><span class="nx">port</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">({</span> <span class="nx">init</span><span class="o">:</span>  <span class="nx">files</span> <span class="p">})</span>
    <span class="nx">context</span><span class="p">.</span><span class="nx">rawContext</span><span class="p">.</span><span class="nx">resume</span><span class="p">();</span>
    <span class="nx">sampler</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">Tone</span><span class="p">.</span><span class="nx">getContext</span><span class="p">().</span><span class="nx">rawContext</span><span class="p">.</span><span class="nx">destination</span><span class="p">);</span>
<span class="p">}</span>

<span class="kd">function</span> <span class="nx">Sample</span><span class="p">(</span><span class="nx">name</span><span class="p">,</span> <span class="nx">no</span><span class="p">,</span> <span class="nx">filter</span><span class="p">,</span> <span class="nx">volume</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">name</span> <span class="o">=</span> <span class="nx">name</span>
    <span class="nx">filter</span> <span class="o">=</span> <span class="nx">filter</span> <span class="o">||</span> <span class="mf">10000</span>
    <span class="nx">volume</span> <span class="o">=</span> <span class="nx">volume</span> <span class="o">||</span> <span class="mf">0</span>
    <span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Filter</span><span class="p">(</span><span class="nx">filter</span><span class="p">,</span> <span class="s1">&#39;lowpass&#39;</span><span class="p">,</span> <span class="o">-</span><span class="mf">96</span><span class="p">);</span>
    <span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Channel</span><span class="p">({</span><span class="nx">channelCount</span><span class="o">:</span> <span class="mf">2</span><span class="p">,</span> <span class="nx">volume</span><span class="o">:</span> <span class="nx">volume</span><span class="p">}).</span><span class="nx">chain</span><span class="p">(</span><span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_filter&quot;</span><span class="p">],</span> <span class="nx">mem</span><span class="p">.</span><span class="nx">master</span><span class="p">)</span>
    <span class="nx">samples</span><span class="p">[</span><span class="nx">no</span><span class="p">].</span><span class="nx">connect</span><span class="p">(</span><span class="nx">mem</span><span class="p">[</span><span class="nx">name</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">]);</span>
    <span class="nx">hit_map</span><span class="p">[</span><span class="nx">name</span><span class="p">]</span> <span class="o">=</span> <span class="nx">no</span><span class="p">;</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">Sample</span> <span class="o">=</span> <span class="nx">Sample</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">pw</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">vol</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">pan</span><span class="o">=</span><span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="nb">window</span><span class="p">.</span><span class="nx">sampler</span><span class="p">.</span><span class="nx">port</span><span class="p">.</span><span class="nx">postMessage</span><span class="p">({</span> <span class="nx">noteOn</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span> <span class="nx">sample</span><span class="o">:</span> <span class="nx">s</span><span class="p">,</span> <span class="nx">volume</span><span class="o">:</span> <span class="nx">vol</span><span class="p">});</span>
<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">pw</span> <span class="o">=</span> <span class="nx">pw</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">p</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">vol</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">pan</span><span class="o">=</span><span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">note</span> <span class="o">=</span> <span class="nx">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>
    <span class="nx">vol</span> <span class="o">=</span> <span class="nx">vol</span> <span class="o">||</span> <span class="mf">1</span>
    <span class="nx">delay</span> <span class="o">=</span> <span class="nx">delay</span> <span class="o">||</span> <span class="s2">&quot;+0&quot;</span><span class="p">;</span>
    <span class="k">for</span> <span class="p">(</span><span class="kd">const</span> <span class="p">[</span><span class="nx">key</span><span class="p">,</span> <span class="nx">value</span><span class="p">]</span> <span class="k">of</span> <span class="nb">Object</span><span class="p">.</span><span class="nx">entries</span><span class="p">(</span><span class="nx">hit_map</span><span class="p">))</span> <span class="p">{</span>
        <span class="k">if</span> <span class="p">(</span><span class="nx">value</span> <span class="o">==</span> <span class="nx">s</span><span class="p">)</span> <span class="p">{</span>
            <span class="nx">mem</span><span class="p">[</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot;_last&quot;</span><span class="p">]</span> <span class="o">=</span> <span class="nx">count</span>
            <span class="nx">mem</span><span class="p">[</span><span class="nx">key</span> <span class="o">+</span> <span class="s2">&quot;_channel&quot;</span><span class="p">].</span><span class="nx">pan</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">pan</span>

        <span class="p">}</span>
    <span class="p">}</span>
    <span class="nx">samples</span><span class="p">[</span><span class="nx">s</span><span class="p">].</span><span class="nx">triggerAttackRelease</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">vol</span><span class="p">);</span>

<span class="p">}</span>

<span class="nb">window</span><span class="p">.</span><span class="nx">p</span> <span class="o">=</span> <span class="nx">p</span><span class="p">;</span>

<span class="kd">function</span> <span class="nx">p1</span><span class="p">(</span><span class="nx">s</span><span class="p">,</span> <span class="nx">vol</span><span class="p">,</span> <span class="nx">note</span><span class="p">,</span> <span class="nx">len</span><span class="p">,</span> <span class="nx">delay</span><span class="p">,</span> <span class="nx">pan</span><span class="o">=</span><span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
    <span class="nx">note</span> <span class="o">=</span> <span class="nx">note</span> <span class="o">||</span> <span class="s2">&quot;C3&quot;</span>
    <span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">&quot;16n&quot;</span>

Changes to build/html/samples.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Added build/html/saving.html.

>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>
>


<!DOCTYPE html>

<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Saving / Recording / Streaming &#8212; Bitrhythm&#39;s literate documentation</title>
    
  <link href="_static/css/theme.css" rel="stylesheet" />
  <link href="_static/css/index.c5995385ac14fb8791e8eb36b4908be2.css" rel="stylesheet" />

    
  <link rel="stylesheet"
    href="_static/vendor/fontawesome/5.13.0/css/all.min.css">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-solid-900.woff2">
  <link rel="preload" as="font" type="font/woff2" crossorigin
    href="_static/vendor/fontawesome/5.13.0/webfonts/fa-brands-400.woff2">

    
      

    
    <link rel="stylesheet" href="_static/pygments.css" type="text/css" />
    <link rel="stylesheet" href="_static/sphinx-book-theme.e8e5499552300ddf5d7adccae7cc3b70.css" type="text/css" />
    <link rel="stylesheet" type="text/css" href="_static/custom.css" />
    
  <link rel="preload" as="script" href="_static/js/index.1c5a1a01449ed65a7b51.js">

    <script id="documentation_options" data-url_root="./" src="_static/documentation_options.js"></script>
    <script src="_static/jquery.js"></script>
    <script src="_static/underscore.js"></script>
    <script src="_static/doctools.js"></script>
    <script src="_static/sphinx-book-theme.12a9622fbb08dcb3a2a40b2c02b83a57.js"></script>
    <script src="_static/analytics.js"></script>
    <link rel="index" title="Index" href="genindex.html" />
    <link rel="search" title="Search" href="search.html" />
    <link rel="next" title="Credits" href="credits.html" />
    <link rel="prev" title="Alternate Implementations" href="alternate-implementation.html" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="docsearch:language" content="en" />
    
  </head>
  <body data-spy="scroll" data-target="#bd-toc-nav" data-offset="80">
    
    <div class="container-fluid" id="banner"></div>

    

    <div class="container-xl">
      <div class="row">
          
<div class="col-12 col-md-3 bd-sidebar site-navigation show" id="site-navigation">
    
        <div class="navbar-brand-box">
    <a class="navbar-brand text-wrap" href="index.html">
      
      
      <h1 class="site-logo" id="site-title">Bitrhythm's literate documentation</h1>
      
    </a>
</div><nav class="bd-links" id="bd-docs-nav" aria-label="Main navigation">
    <div class="bd-toc-item active">
        <p class="caption">
 <span class="caption-text">
  Table of Contents
 </span>
</p>
<ul class="current nav bd-sidenav">
 <li class="toctree-l1">
  <a class="reference internal" href="what.html">
   What is bitrhythm about ?
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="source-code.html">
   Source Code and License
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="demo.html">
   Getting Started
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="samples.html">
   Samples
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="tweaking.html">
   Core Features
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="early-attempts.html">
   Early Attempts
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="changelog.html">
   Changelog
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="main.html">
   Code Walkthrough
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1 current active">
  <a class="current reference internal" href="#">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="bookmarks.html">
   Bookmarks
  </a>
 </li>
</ul>

    </div>
</nav> <!-- To handle the deprecated key -->

<div class="navbar_extra_footer">
  
<a target="_blank" href="/">Bitrhythm App Home</a><br>
<a target="_blank" href="https://xyzzyapps.link">Xyzzy Apps Home</a><br>
<p class='custom-nav-footer'>(c) Xyzzy Apps, 2021</p>

</div>

</div>


          


          
<main class="col py-md-3 pl-md-4 bd-content overflow-auto" role="main">
    
    <div class="topbar container-xl fixed-top">
    <div class="topbar-contents row">
        <div class="col-12 col-md-3 bd-topbar-whitespace site-navigation show"></div>
        <div class="col pl-md-4 topbar-main">
            
            <button id="navbar-toggler" class="navbar-toggler ml-0" type="button" data-toggle="collapse"
                data-toggle="tooltip" data-placement="bottom" data-target=".site-navigation" aria-controls="navbar-menu"
                aria-expanded="true" aria-label="Toggle navigation" aria-controls="site-navigation"
                title="Toggle navigation" data-toggle="tooltip" data-placement="left">
                <i class="fas fa-bars"></i>
                <i class="fas fa-arrow-left"></i>
                <i class="fas fa-arrow-up"></i>
            </button>
            
            
            <!-- Source interaction buttons -->

            <!-- Full screen (wrap in <a> to have style consistency -->

<a class="full-screen-button"><button type="button" class="btn btn-secondary topbarbtn" data-toggle="tooltip"
        data-placement="bottom" onclick="toggleFullScreen()" aria-label="Fullscreen mode"
        title="Fullscreen mode"><i
            class="fas fa-expand"></i></button></a>

            <!-- Launch buttons -->

        </div>

        <!-- Table of contents -->
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
        </div>
    </div>
</div>
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="saving-recording-streaming">
<h1>Saving / Recording / Streaming<a class="headerlink" href="#saving-recording-streaming" title="Permalink to this headline">¶</a></h1>
<p>There is a save button that converts the state of bitrhythm into a url paramter. This means there is an upper limit on how much code you can write, making it useful for demoscene like situations. You can share the url with tinyurl.</p>
<p>You can also download the file. Please keep a backup!</p>
<p>I use <a class="reference external" href="https://existential.audio/blackhole/">BlackHole</a> to record audio from the browser window to Reaper. There is however a huge performance hit while recording the video, especially if there is WebGL. I recommend an HDMI capture card with a loop out to record the video output into another computer and simultanously see it. This is the recommended setup by twitch streamers.</p>
<p>Have a distinct sound at the start to match both audio and video for easy syncing between the two.</p>
<ul class="simple">
<li><p>Opening developer tools might slow down the execution a bit</p></li>
<li><p>Using excessive delays and reverbs seems to cause some glitches</p></li>
<li><p>Mobile browsers don’t work properly</p></li>
<li><p>Firefox does not seem to work well with tone.js</p></li>
</ul>
</div>


              </div>
              
        
        <div class='prev-next-bottom'>
            
    <a class='left-prev' id="prev-link" href="alternate-implementation.html" title="previous page">Alternate Implementations</a>
    <a class='right-next' id="next-link" href="credits.html" title="next page">Credits</a>

        </div>
        
        </div>
    </div>
    <footer class="footer mt-5 mt-md-0">
    <div class="container">
      <p>
        
          By Xyzzy Apps<br/>
        
            &copy; Copyright (c) Xyzzy Apps, 2021.<br/>
      </p>
    </div>
  </footer>
</main>


      </div>
    </div>
  
  <script src="_static/js/index.1c5a1a01449ed65a7b51.js"></script>

  
  </body>
</html>

Changes to build/html/search.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/source-code.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/tweaking.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

|
|

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>

Changes to build/html/what.html.

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="limitations.html">
   Saving and other limitations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
            <div class="tocsection onthispage pt-5 pb-3">
                <i class="fas fa-list"></i> Contents
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">





 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#adc-2021">
   ADC 2021
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#inspiration-for-the-project">
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="what-is-bitrhythm-about">
<h1>What is bitrhythm about ?<a class="headerlink" href="#what-is-bitrhythm-about" title="Permalink to this headline">¶</a></h1>


<p>In Bitrhythm you get a coding playground to make music with webaudio, canvas and webgl apis. You can share the final track as a URL which enables interactive music with your listener. The url size limit acts as a contraint on creativity.</p>
<p>Apart from the core html apis, you can also use the following libraries</p>
<ol class="simple">
<li><p>Tuna</p></li>
<li><p>Timbral</p></li>
<li><p>Tone.js</p></li>
<li><p>Underscore / Rambda</p></li>
................................................................................
<ol class="simple">
<li><p>DSL for describing music sequences - similar to the tracker notation</p></li>
<li><p>A core Music Loop that runs your javascript code, with an edit mode</p></li>
<li><p>A knob and guard abstraction for programming automation</p></li>
</ol>
<p>You can use Bitrhythm for making music similar to the music possible with trackers like Buzz / Renoise / OpenMPT. I call this approach Hard Coding music. This is also known as executable music in the Demoscene.</p>
<p>You can also use Bitrhythm for Live Coding and Algorithmic composition.</p>

<div class="section" id="adc-2021">
<h2>ADC 2021<a class="headerlink" href="#adc-2021" title="Permalink to this headline">¶</a></h2>
<p>I presented Bitrhythm in ADC ‘21.</p>
<p><a class="reference external" href="https://xyzzyapps.link/adc21">Slides</a></p>
<p>Video: TBD</p>


</div>
<div class="section" id="inspiration-for-the-project">
<h2>Inspiration for the project<a class="headerlink" href="#inspiration-for-the-project" title="Permalink to this headline">¶</a></h2>
<p>I make <a class="reference external" href="https://xyzzyapps.link">web apps</a> for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.</p>
<p>For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. <a class="reference external" href="https://www.youtube.com/watch?v=adz1Gv5Lm34">This library</a> in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.</p>
<p>After my initial work on the project in 2019, the project got sidetracked. After seeing <a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">endless acid banger</a> I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.</p>
<p>The documentation for the literate programming project - wheel is <a class="reference external" href="https://xyzzyapps.link/wheel/">available here</a>.</p>

 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="alternate-implementation.html">
   Alternate Implementations
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="saving.html">
   Saving / Recording / Streaming
  </a>
 </li>
 <li class="toctree-l1">
  <a class="reference internal" href="credits.html">
   Credits
  </a>
 </li>
................................................................................
        <div class="d-none d-md-block col-md-2 bd-toc show">
            
            <div class="tocsection onthispage pt-5 pb-3">
                <i class="fas fa-list"></i> Contents
            </div>
            <nav id="bd-toc-nav">
                <ul class="visible nav section-nav flex-column">
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#intro">
   Intro
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#adc-2021">
   ADC 2021
  </a>
 </li>
 <li class="toc-h2 nav-item toc-entry">
  <a class="reference internal nav-link" href="#inspiration-for-the-project">
................................................................................
    <div id="main-content" class="row">
        <div class="col-12 col-md-9 pl-md-3 pr-md-0">
        
              <div>
                
  <div class="section" id="what-is-bitrhythm-about">
<h1>What is bitrhythm about ?<a class="headerlink" href="#what-is-bitrhythm-about" title="Permalink to this headline">¶</a></h1>
<div class="section" id="intro">
<h2>Intro<a class="headerlink" href="#intro" title="Permalink to this headline">¶</a></h2>
<p>In Bitrhythm you get a coding playground to make music with webaudio, canvas and webgl apis. You can share the final track as a URL which enables interactive music with your listener. The url size limit acts as a contraint on creativity.</p>
<p>Apart from the core html apis, you can also use the following libraries</p>
<ol class="simple">
<li><p>Tuna</p></li>
<li><p>Timbral</p></li>
<li><p>Tone.js</p></li>
<li><p>Underscore / Rambda</p></li>
................................................................................
<ol class="simple">
<li><p>DSL for describing music sequences - similar to the tracker notation</p></li>
<li><p>A core Music Loop that runs your javascript code, with an edit mode</p></li>
<li><p>A knob and guard abstraction for programming automation</p></li>
</ol>
<p>You can use Bitrhythm for making music similar to the music possible with trackers like Buzz / Renoise / OpenMPT. I call this approach Hard Coding music. This is also known as executable music in the Demoscene.</p>
<p>You can also use Bitrhythm for Live Coding and Algorithmic composition.</p>
</div>
<div class="section" id="adc-2021">
<h2>ADC 2021<a class="headerlink" href="#adc-2021" title="Permalink to this headline">¶</a></h2>
<p>I presented Bitrhythm in ADC ‘21 and the ICLC ‘21 for other audio developers.</p>
<p><a class="reference external" href="https://xyzzyapps.link/ADC21.pdf">Slides ADC ‘21</a>
Video - TBD</p>
<p><a class="reference external" href="https://xyzzyapps.link/ICLC21.pdf">Slides ICLC ‘21</a>
<a class="reference external" href="https://www.youtube.com/watch?v=LDQ1PMqZowQ">Video</a>  ~ 20 minute mark</p>
</div>
<div class="section" id="inspiration-for-the-project">
<h2>Inspiration for the project<a class="headerlink" href="#inspiration-for-the-project" title="Permalink to this headline">¶</a></h2>
<p>I make <a class="reference external" href="https://xyzzyapps.link">web apps</a> for a living. I started messing with algorithmic composition using pure data around 2011. In many ways Pure Data was my first DAW. Although nothing much came out of it musically, it transformed the way I view programming. The unix pipes concept is identical to the data flow model in pure data; albeit with more connections.</p>
<p>For my music I moved onto Electribe, Renoise, Reaper and live looping with my guitar. I started exploring sonic pi in 2019 but TBH none of the live coding tools were doing what I wanted - basically tweaking /knob-twisting in techno so I started my work on this project. <a class="reference external" href="https://www.youtube.com/watch?v=adz1Gv5Lm34">This library</a> in sonic pi comes close to what I am trying todo with this project. In bitrhythm time is divided into ticks like renoise tracker.</p>
<p>After my initial work on the project in 2019, the project got sidetracked. After seeing <a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">endless acid banger</a> I had an epiphany to work on this project again with programmatic knobs. I was able to compose an endless and interactive dubtechno demo track. In March 2021, I also picked up on literate programming so this document will have both code and documentation intertwined.</p>
<p>The documentation for the literate programming project - wheel is <a class="reference external" href="https://xyzzyapps.link/wheel/">available here</a>.</p>

Added public/C3.wav.