<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Code Walkthrough — Bitrhythm'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="Alternate Implementations" href="alternate-implementation.html" />
<link rel="prev" title="Changelog" href="changelog.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 current active">
<a class="current reference internal" href="#">
Code Walkthrough
</a>
</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>
<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 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">
Observers
</a>
</li>
</ul>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#dials">
Dials
</a>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#numbers">
Numbers
</a>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#autoknob">
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="#javascript">
Javascript
</a>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#id1">
303
</a>
</li>
<li class="toc-h2 nav-item toc-entry">
<a class="reference internal nav-link" href="#autocommit">
Autocommit
</a>
</li>
</ul>
</nav>
</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="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>
<p>If there is any syntax error, previous working code is used.</p>
<p>If the click the <code class="docutils literal notranslate"><span class="pre">execute</span> <span class="pre">transition</span></code> is selected, the transition function is run. Use this progressing the song from initializing to tweaking.</p>
<p>Patterns is an array of strings, each string can be hexadecimal, decimal or something like “x000 x000 x000 x000”.
isHit and track_no can be used to identify the layer in the live editor. Hexadecimal uses `0 `1 `2 `3 `4 `5 instead of the Roman numerals abcde for 10, 11, 12 …</p>
<p>Scheduled Time as signified by the variable time is crucial when calling note triggers. This is used by Tone.js to schedule notes to play in the future.</p>
<div class="section" id="observers">
<h3>Observers<a class="headerlink" href="#observers" title="Permalink to this headline">¶</a></h3>
<p>Sidechain compression is a simple algorithm which observes amplitude of another instrument but you can generalise it to anything. By attaching observers to time or other instruments you can create sections within the song that can trigger others with conditional logic. This is similar to pure data’s bangs - <a class="reference external" href="https://www.youtube.com/watch?v=nTTZZyD4xlE">see this</a>. In future this will be referred to as side events. You could decrease the volume of the drums to have the snares drop automatically for example.</p>
<p>This is something that you can’t do in DAWs.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="k">async</span> <span class="nx">play</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="kd">var</span> <span class="nx">cellx</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="kd">var</span> <span class="nx">$</span> <span class="o">=</span> <span class="nx">jQuery</span><span class="p">;</span>
<span class="k">await</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">context</span><span class="p">.</span><span class="nx">resume</span><span class="p">()</span>
<span class="k">await</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="k">await</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">start</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">bpm</span><span class="p">.</span><span class="nx">value</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="nx">Tone</span><span class="p">.</span><span class="nx">Transport</span><span class="p">.</span><span class="nx">swing</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">hit_map</span> <span class="o">=</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">transition</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">always</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">render_loop</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">animation</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">render_loop</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>
<span class="nx">Tone</span><span class="p">.</span><span class="nx">Master</span><span class="p">.</span><span class="nx">mute</span> <span class="o">=</span> <span class="kc">false</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">'tempo-value'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</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">'tick-value'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">mem</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">mem</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">mem</span> <span class="o">=</span> <span class="nx">mem</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">handlers</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">count</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">text</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>
<span class="nx">editor</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s2">"change"</span><span class="p">,</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">text</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>
<span class="p">});</span>
<span class="kd">var</span> <span class="nx">patterns</span> <span class="o">=</span> <span class="p">[</span> <span class="nx">cellx</span><span class="p">(</span><span class="s2">"0000"</span><span class="p">)</span> <span class="p">];</span> <span class="c1">// need this for first eval</span>
<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">"#duration"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">""</span> <span class="o">+</span> <span class="nx">bars</span> <span class="o">+</span> <span class="s2">"."</span> <span class="o">+</span> <span class="nx">tick</span> <span class="o">+</span> <span class="s2">" / "</span> <span class="o">+</span> <span class="nx">count</span> <span class="o">+</span> <span class="s2">" / "</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"><</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">'edit-mode'</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">&&</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">''</span><span class="p">)[</span><span class="nx">tick</span><span class="p">]</span> <span class="o">==</span> <span class="s2">"1"</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">'edit-mode'</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">'redo'</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">'redo'</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">'load-mode'</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">'load-mode'</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">"#error"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">""</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">"#error"</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>
</div>
</div>
<div class="section" id="dials">
<h2>Dials<a class="headerlink" href="#dials" title="Permalink to this headline">¶</a></h2>
<p>Bitrhythm provides custom dials. These dials can be mapped to any aspects of Tone.js. All dials are available as an array dials in the live code editor.</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">dial</span><span class="p">></span>
<span class="p"><</span><span class="nt">vbox</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-4"</span><span class="p">></span>
<span class="p"><</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">{"knob"</span> <span class="err">+</span> <span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mt-1"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 22px"</span> <span class="na">id</span><span class="o">=</span><span class="s">{"knob-value"</span> <span class="err">+</span> <span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"cursor-pointer"</span> <span class="na">id</span><span class="o">=</span><span class="s">{"sample"</span> <span class="err">+</span> <span class="na">this</span><span class="err">.</span><span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{remove(this.props.ti</span> <span class="na">-1</span><span class="err">)}</span><span class="p">></span>(x)<span class="p"></</span><span class="nt">span</span><span class="p">></span>
<span class="p"></</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">vbox</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
<span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>
<span class="nx">remove</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</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">props</span><span class="p">.</span><span class="nx">rmdial</span><span class="p">(</span><span class="nx">index</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">"mount"</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">Nexus</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">accent</span> <span class="o">=</span> <span class="s2">"#000000"</span>
<span class="nx">Nexus</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s2">"#ffffff"</span>
<span class="kd">var</span> <span class="nx">cell</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="mf">0.5</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">dial</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Nexus</span><span class="p">.</span><span class="nx">Dial</span><span class="p">(</span><span class="s1">'#knob'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">ti</span><span class="p">,</span> <span class="p">{</span>
<span class="s1">'size'</span><span class="o">:</span> <span class="p">[</span><span class="mf">45</span><span class="p">,</span> <span class="mf">45</span><span class="p">],</span>
<span class="s1">'value'</span><span class="o">:</span> <span class="mf">0.5</span>
<span class="p">});</span>
<span class="nx">cell</span><span class="p">.</span><span class="nx">onChange</span><span class="p">(</span><span class="nx">evt</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">prevValue</span> <span class="o">!==</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">dial</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">dial</span><span class="p">.</span><span class="nx">colorize</span><span class="p">(</span><span class="s2">"accent"</span><span class="p">,</span><span class="s2">"#000"</span><span class="p">)</span>
<span class="nx">dial</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'change'</span><span class="p">,</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">=></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">roundTo</span><span class="p">(</span><span class="nx">val</span><span class="p">,</span> <span class="mf">4</span><span class="p">);</span>
<span class="nx">$</span><span class="p">(</span><span class="s1">'#knob-value'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">ti</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span>
<span class="nx">cell</span><span class="p">(</span><span class="nx">val</span><span class="p">);</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="nx">v</span><span class="p">[</span><span class="s2">"cell"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">dial</span><span class="p">></span>
</pre></div>
</div>
</div>
<div class="section" id="numbers">
<h2>Numbers<a class="headerlink" href="#numbers" title="Permalink to this headline">¶</a></h2>
<p>These numbers can be mapped to any aspect of Tone.js. All number boxes are available as an array numbers in the live code editor. Useful for debugging purposes.</p>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">number</span><span class="p">></span>
<span class="p"><</span><span class="nt">vbox</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-4"</span><span class="p">></span>
<span class="p"><</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">{"number"</span> <span class="err">+</span> <span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mt-1"</span> <span class="na">style</span><span class="o">=</span><span class="s">"height: 22px"</span> <span class="na">id</span><span class="o">=</span><span class="s">{"number-value"</span> <span class="err">+</span> <span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"cursor-pointer"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{remove(this.props.ti</span> <span class="na">-1</span><span class="err">)}</span><span class="p">></span>(x)<span class="p"></</span><span class="nt">span</span><span class="p">></span>
<span class="p"></</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">vbox</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
<span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>
<span class="nx">remove</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</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">props</span><span class="p">.</span><span class="nx">rmnumber</span><span class="p">(</span><span class="nx">index</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">"mount"</span><span class="p">,</span> <span class="p">()</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">opts</span><span class="p">.</span><span class="nx">v</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">Nexus</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">accent</span> <span class="o">=</span> <span class="s2">"#000000"</span>
<span class="nx">Nexus</span><span class="p">.</span><span class="nx">colors</span><span class="p">.</span><span class="nx">fill</span> <span class="o">=</span> <span class="s2">"#ffffff"</span>
<span class="kd">var</span> <span class="nx">cell</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="mf">0</span><span class="p">)</span>
<span class="kd">var</span> <span class="nx">number</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Nexus</span><span class="p">.</span><span class="nb">Number</span><span class="p">(</span><span class="s1">'#number'</span> <span class="o">+</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">ti</span><span class="p">,</span> <span class="p">{</span>
<span class="s1">'value'</span><span class="o">:</span> <span class="mf">0</span><span class="p">,</span>
<span class="s1">'step'</span><span class="o">:</span> <span class="mf">0.01</span>
<span class="p">});</span>
<span class="nx">cell</span><span class="p">.</span><span class="nx">onChange</span><span class="p">(</span><span class="nx">evt</span> <span class="p">=></span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">prevValue</span> <span class="o">!==</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">number</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">evt</span><span class="p">.</span><span class="nx">data</span><span class="p">.</span><span class="nx">value</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">props</span><span class="p">.</span><span class="nx">v</span><span class="p">[</span><span class="s2">"v"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">cell</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="p"></</span><span class="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">number</span><span class="p">></span>
</pre></div>
</div>
</div>
<div class="section" id="autoknob">
<h2>AutoKnob<a class="headerlink" href="#autoknob" title="Permalink to this headline">¶</a></h2>
<p>AutoKnob enables programmatic automation in Bitrhythm</p>
<p><code class="docutils literal notranslate"><span class="pre">x</span> <span class="pre">-></span> <span class="pre">[1,</span> <span class="pre">2.5,</span> <span class="pre">4,</span> <span class="pre">3.2]</span> <span class="pre">|</span> <span class="pre">by</span> <span class="pre">0.3</span></code></p>
<p>x will go from 1 to 2.5 to 4 to 3.2 in increments of 0.3 for every tick. While x will increase till 4 … it will decrease once it reaches 4 and drop down to 3.2. After reaching 3.2 you can stay there or reverse back. At any point during live editing, you can add an extra element to the array. If you add 5 for example, the loop will continue from 3.2 to 5.</p>
<p>You can think of each element in the array as the “final knob position” and in each cycle we are moving to the next knob position in increments of 0.3</p>
<p>An alternate to AutoKnob is to use TimedKnob. In the endless acid banger project, the basic code was using a simple timer to randomly move the knob position along with note collections and weighted random choice on note collections for generating rhythms.</p>
<p>TimedKnobs can be used to add small variations in volume to make the drums sounds more natural.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">knob</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">ramp</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">ramp</span> <span class="o">||</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="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">></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="p">}</span> <span class="k">else</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="mf">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">changeContext</span><span class="p">();</span>
<span class="k">return</span> <span class="p">{</span>
<span class="s2">"cell"</span><span class="o">:</span> <span class="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">,</span>
<span class="s2">"push"</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</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">push</span><span class="p">(</span><span class="nx">val</span><span class="p">);</span>
<span class="p">},</span>
<span class="s2">"replace"</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">ramp</span> <span class="o">=</span> <span class="nx">val</span><span class="p">;</span>
<span class="p">},</span>
<span class="s2">"speed"</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">count_skip</span> <span class="o">=</span> <span class="nx">val</span><span class="p">;</span>
<span class="p">},</span>
<span class="s2">"step"</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</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">val</span><span class="p">;</span>
<span class="p">},</span>
<span class="s2">"up"</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">val</span> <span class="o">||</span> <span class="mf">0.1</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">push</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">ramp</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">]</span> <span class="o">+</span> <span class="nx">val</span><span class="p">);</span>
<span class="p">},</span>
<span class="s2">"down"</span><span class="o">:</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">val</span> <span class="o">=</span> <span class="nx">val</span> <span class="o">||</span> <span class="o">-</span><span class="mf">0.1</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">push</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">ramp</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">]</span> <span class="o">+</span> <span class="nx">val</span><span class="p">);</span>
<span class="p">},</span>
<span class="s2">"move"</span><span class="o">:</span> <span class="kd">function</span> <span class="p">()</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">current_count</span> <span class="o">>=</span> <span class="nx">context</span><span class="p">.</span><span class="nx">count_skip</span><span class="p">)</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">1</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">direction</span> <span class="o">==</span> <span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">cmp</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</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">>=</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="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">cmp</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="k">return</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">val</span><span class="p">());</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">cmp</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="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">next_val</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="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="k">if</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="nx">context</span><span class="p">.</span><span class="nx">ramp</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span><span class="mf">1</span><span class="p">)</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">reverse</span><span class="p">)</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">ramp</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">reverse</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">index</span> <span class="o">=</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="p">}</span>
<span class="p">}</span>
<span class="nx">changeContext</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">val</span><span class="p">()</span> <span class="o">+</span> <span class="nx">context</span><span class="p">.</span><span class="nx">step</span> <span class="o">*</span> <span class="nx">context</span><span class="p">.</span><span class="nx">direction</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">number</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="nx">context</span><span class="p">.</span><span class="nx">val</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="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">()</span> <span class="o">+</span> <span class="nx">context</span><span class="p">.</span><span class="nx">step</span> <span class="o">*</span> <span class="nx">context</span><span class="p">.</span><span class="nx">direction</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">number</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="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">());</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">current_count</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">context</span><span class="p">.</span><span class="nx">val</span><span class="p">();</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">timedKnob</span><span class="p">(</span><span class="nx">options</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">options</span> <span class="o">=</span> <span class="nx">options</span> <span class="o">||</span> <span class="p">{};</span>
<span class="kd">var</span> <span class="nx">context</span> <span class="o">=</span> <span class="p">{};</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">interval</span> <span class="o">=</span> <span class="nx">options</span><span class="p">.</span><span class="nx">interval</span> <span class="o">||</span> <span class="mf">100</span><span class="p">;</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">knob</span> <span class="o">=</span> <span class="nx">knob</span><span class="p">(</span><span class="nx">options</span><span class="p">);</span>
<span class="nx">context</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">context</span><span class="p">.</span><span class="nx">knob</span><span class="p">.</span><span class="nx">move</span><span class="p">();</span>
<span class="p">},</span> <span class="nx">context</span><span class="p">.</span><span class="nx">interval</span><span class="p">);</span>
<span class="nx">context</span><span class="p">.</span><span class="nx">knob</span><span class="p">[</span><span class="s2">"clear"</span><span class="p">]</span> <span class="o">=</span> <span class="kd">function</span> <span class="p">()</span> <span class="p">{</span>
<span class="nx">clearInterval</span><span class="p">(</span><span class="nx">context</span><span class="p">.</span><span class="nx">timer</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">context</span><span class="p">.</span><span class="nx">knob</span><span class="p">;</span>
<span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="main-ui">
<h2>Main UI<a class="headerlink" href="#main-ui" title="Permalink to this headline">¶</a></h2>
<div class="highlight-html notranslate"><div class="highlight"><pre><span></span><span class="p"><</span><span class="nt">bitrhythm</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">vstack</span> <span class="na">id</span><span class="o">=</span><span class="s">"header-playback"</span><span class="p">></span>
<span class="p"><</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-2"</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary w-1/10 ml-2 mt-1"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{addDial}</span><span class="p">></span>+ Dial<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary w-1/10 ml-2 mt-1"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{addNumber}</span><span class="p">></span>+ Number<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="c"><!-- <button type="button" class="btn btn-primary w-1/10 ml-2 mt-1" onclick={addSample}>+ Sample File</button> --></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary w-1/10 ml-2 mt-1"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{addSampleURL}</span><span class="p">></span>+ Sample URL<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-2"</span> <span class="p">></span>
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"tempo-value"</span><span class="p">></span>Tempo / Ticks<span class="p"></</span><span class="nt">label</span><span class="p">><</span><span class="nt">br</span><span class="p">></span>
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">id</span><span class="o">=</span><span class="s">"tempo-value"</span> <span class="na">value</span><span class="o">=</span><span class="s">{state.tempo}</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 150px"</span> <span class="na">onkeyup</span><span class="o">=</span><span class="s">{</span> <span class="na">editTempo</span> <span class="err">}</span><span class="p">/></span>
<span class="p"><</span><span class="nt">input</span> <span class="na">type</span><span class="o">=</span><span class="s">"text"</span> <span class="na">class</span><span class="o">=</span><span class="s">"mt-2"</span> <span class="na">id</span><span class="o">=</span><span class="s">"tick-value"</span> <span class="na">value</span><span class="o">=</span><span class="s">{state.ticks}</span> <span class="na">style</span><span class="o">=</span><span class="s">"width: 150px"</span> <span class="na">onkeyup</span><span class="o">=</span><span class="s">{editTicks}/</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-2"</span> <span class="na">style</span><span class="o">=</span><span class="s">"min-width: 250px;"</span><span class="p">></span>
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"duration"</span><span class="p">></span>Bars / Ticks / Seconds<span class="p"></</span><span class="nt">label</span><span class="p">><</span><span class="nt">br</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"duration"</span> <span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">class</span><span class="o">=</span><span class="s">"mt-2 ml-2"</span> <span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary w-1/10 ml-2 mt-1"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{play}</span><span class="p">></span>Play<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary ml-2"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{save}</span><span class="p">></span>Save<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary ml-2"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{reset}</span><span class="p">></span>Reset<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary ml-2"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{reload}</span><span class="p">></span>Window Reload<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">button</span> <span class="na">type</span><span class="o">=</span><span class="s">"button"</span> <span class="na">class</span><span class="o">=</span><span class="s">"btn btn-primary ml-2"</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{download}</span><span class="p">></span>Save File<span class="p"></</span><span class="nt">button</span><span class="p">></span>
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-1"</span> <span class="na">name</span><span class="o">=</span><span class="s">"edit-mode"</span> <span class="na">id</span><span class="o">=</span><span class="s">"edit-mode"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span><span class="p">/></span>
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"edit-mode"</span><span class="p">></span>Edit<span class="p"></</span><span class="nt">label</span><span class="p">></span>
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-1"</span> <span class="na">name</span><span class="o">=</span><span class="s">"load-mode"</span> <span class="na">id</span><span class="o">=</span><span class="s">"load-mode"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span><span class="p">/></span>
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"load-mode"</span><span class="p">></span>Execute Transition<span class="p"></</span><span class="nt">label</span><span class="p">></span>
<span class="p"><</span><span class="nt">input</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-1"</span> <span class="na">name</span><span class="o">=</span><span class="s">"load-mode"</span> <span class="na">id</span><span class="o">=</span><span class="s">"redo"</span> <span class="na">type</span><span class="o">=</span><span class="s">"checkbox"</span><span class="p">/></span>
<span class="p"><</span><span class="nt">label</span> <span class="na">for</span><span class="o">=</span><span class="s">"redo"</span><span class="p">></span>Redo Bar<span class="p"></</span><span class="nt">label</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">vstack</span> <span class="na">id</span><span class="o">=</span><span class="s">"samples-block"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">each</span><span class="o">=</span><span class="s">{</span> <span class="na">key</span><span class="err">,</span> <span class="na">index</span> <span class="na">in</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span><span class="err">}</span> <span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">if</span><span class="o">=</span><span class="s">{</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span> <span class="err">&&</span> <span class="na">state</span><span class="err">.</span><span class="na">samples</span><span class="err">[</span><span class="na">index</span><span class="err">]</span> <span class="err">}</span><span class="p">></span>
<span class="p"><</span><span class="nt">sample</span> <span class="na">setsample</span><span class="o">=</span><span class="s">{setSample}</span> <span class="na">rmsample</span><span class="o">=</span><span class="s">{rmSample}</span> <span class="na">samples</span><span class="o">=</span><span class="s">{state.samples}</span> <span class="na">ti</span><span class="o">=</span><span class="s">{index</span> <span class="err">+</span> <span class="na">1</span><span class="err">}</span><span class="p">></</span><span class="nt">sample</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">vstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">hstack</span> <span class="na">style</span><span class="o">=</span><span class="s">"margin-top: 16px"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">each</span><span class="o">=</span><span class="s">{</span> <span class="na">key</span><span class="err">,</span> <span class="na">index</span> <span class="na">in</span> <span class="na">state</span><span class="err">.</span><span class="na">dials</span><span class="err">}</span><span class="p">></span>
<span class="p"><</span><span class="nt">dial</span> <span class="na">rmdial</span><span class="o">=</span><span class="s">{rmDial}</span> <span class="na">v</span><span class="o">=</span><span class="s">{state.dials[index]}</span> <span class="na">ti</span><span class="o">=</span><span class="s">{index</span> <span class="err">+</span> <span class="na">1</span><span class="err">}</span><span class="p">></</span><span class="nt">dial</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">each</span><span class="o">=</span><span class="s">{</span> <span class="na">key</span><span class="err">,</span> <span class="na">index</span> <span class="na">in</span> <span class="na">state</span><span class="err">.</span><span class="na">numbers</span><span class="err">}</span><span class="p">></span>
<span class="p"><</span><span class="nt">number</span> <span class="na">rmnumber</span><span class="o">=</span><span class="s">{rmNumber}</span> <span class="na">v</span><span class="o">=</span><span class="s">{state.numbers[index]}</span> <span class="na">ti</span><span class="o">=</span><span class="s">{index</span> <span class="err">+</span> <span class="na">1</span><span class="err">}</span><span class="p">></</span><span class="nt">number</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">hstack</span><span class="p">></span>
<span class="p"></</span><span class="nt">vstack</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"cued"</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2"</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: white !important; height: 32px; font-size: 24px;"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"error"</span> <span class="na">class</span><span class="o">=</span><span class="s">"p-2"</span> <span class="na">style</span><span class="o">=</span><span class="s">"color: yellow !important; height: 32px; font-size: 12px;"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"canvas-container"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: relative;"</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"p5"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; width: 100%; background: black"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">canvas</span> <span class="na">id</span><span class="o">=</span><span class="s">"visual"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute; width: 100%; background: black;"</span><span class="p">></</span><span class="nt">canvas</span><span class="p">></span>
<span class="p"><</span><span class="nt">div</span> <span class="na">id</span><span class="o">=</span><span class="s">"code"</span> <span class="na">style</span><span class="o">=</span><span class="s">"position: absolute;"</span><span class="p">></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">style</span><span class="p">></span>
<span class="p">:</span><span class="nd">host</span> <span class="p">{</span>
<span class="k">margin-top</span><span class="p">:</span> <span class="mi">4</span><span class="kt">vh</span><span class="p">;</span>
<span class="p">}</span>
<span class="p"></</span><span class="nt">style</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
<span class="kd">var</span> <span class="nx">oldCode</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">oldPatterns</span> <span class="o">=</span> <span class="p">[];</span>
<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">stopCallback</span> <span class="o">=</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">element</span><span class="p">,</span> <span class="nx">combo</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">'f9'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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">'edit-mode'</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">'edit-mode'</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="p">}</span> <span class="k">else</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">'edit-mode'</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">'ctrl+1'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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">'redo'</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">'redo'</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="p">}</span> <span class="k">else</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">'redo'</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">'f10'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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">'load-mode'</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">'load-mode'</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="p">}</span> <span class="k">else</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">'load-mode'</span><span class="p">).</span><span class="nx">checked</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>
<span class="nx">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">'ctrl+0'</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#samples-block"</span><span class="p">).</span><span class="nx">toggle</span><span class="p">();</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</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">1</span><span class="p">;</span> <span class="nx">i</span> <span class="o"><=</span> <span class="mf">8</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">Mousetrap</span><span class="p">.</span><span class="nx">bind</span><span class="p">([</span><span class="s1">'f'</span> <span class="o">+</span> <span class="nx">i</span><span class="p">],</span> <span class="kd">function</span><span class="p">(</span><span class="nx">e</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="nx">samples</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">p</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="p">}</span>
<span class="k">return</span> <span class="kc">false</span><span class="p">;</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="c1">// var audio = new Audio();</span>
<span class="c1">// audio.loop = true;</span>
<span class="kd">const</span> <span class="nx">actx</span> <span class="o">=</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">context</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">dest</span> <span class="o">=</span> <span class="nx">actx</span><span class="p">.</span><span class="nx">createMediaStreamDestination</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">recorder</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">MediaRecorder</span><span class="p">(</span><span class="nx">dest</span><span class="p">.</span><span class="nx">stream</span><span class="p">);</span>
<span class="kd">let</span> <span class="nx">chunks</span> <span class="o">=</span> <span class="p">[];</span>
<span class="kd">var</span> <span class="nx">sampleURL</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">sam</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">mem</span><span class="o">:</span> <span class="p">{},</span>
<span class="nx">dials</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">numbers</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">samples</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">tempo</span><span class="o">:</span> <span class="mf">120</span><span class="p">,</span>
<span class="nx">ticks</span><span class="o">:</span> <span class="mf">16</span><span class="p">,</span>
<span class="p">}</span>
<span class="k">async</span> <span class="kd">function</span> <span class="nx">copyTextToClipboard</span><span class="p">(</span><span class="nx">text</span><span class="p">)</span> <span class="p">{</span>
<span class="k">try</span> <span class="p">{</span> <span class="k">await</span> <span class="nx">navigator</span><span class="p">.</span><span class="nx">clipboard</span><span class="p">.</span><span class="nx">writeText</span><span class="p">(</span><span class="nx">text</span><span class="p">);</span> <span class="p">}</span>
<span class="k">catch</span><span class="p">(</span><span class="nx">err</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">alert</span><span class="p">(</span><span class="s1">'Error in copying text: '</span><span class="p">,</span> <span class="nx">err</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">shouldUpdate</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">nextOpts</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="k">this</span><span class="p">.</span><span class="nx">on</span><span class="p">(</span><span class="s1">'mount'</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="nx">$</span><span class="p">(</span><span class="s2">"#load-mode"</span><span class="p">).</span><span class="nx">click</span><span class="p">();</span>
<span class="nx">editor</span> <span class="o">=</span> <span class="nx">CodeMirror</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">"code"</span><span class="p">),</span> <span class="p">{</span>
<span class="nx">mode</span><span class="o">:</span> <span class="s2">"null"</span><span class="p">,</span>
<span class="nx">spellcheck</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">autocorrect</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">scrollbarStyle</span><span class="o">:</span> <span class="s2">"null"</span><span class="p">,</span>
<span class="nx">lineWrapping</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">lineNumbers</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">styleActiveLine</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">styleSelectedText</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">matchBrackets</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">value</span><span class="o">:</span> <span class="sb">`// track_no, pattern, current_bit, samples, sample and Tone are available as globals`</span>
<span class="p">});</span>
<span class="nx">editor</span><span class="p">.</span><span class="nx">setSize</span><span class="p">(</span><span class="kc">null</span><span class="p">,</span> <span class="nb">window</span><span class="p">.</span><span class="nx">innerHeight</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">"header-playback"</span><span class="p">).</span><span class="nx">clientHeight</span> <span class="o">-</span> <span class="mf">160</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">props</span><span class="p">.</span><span class="nx">song</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">lib</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">JsonUrl</span><span class="p">(</span><span class="s1">'lzma'</span><span class="p">);</span>
<span class="nx">lib</span><span class="p">.</span><span class="nx">decompress</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="nx">song</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">data</span> <span class="p">=></span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">sample_names</span> <span class="o">=</span> <span class="nx">data</span><span class="p">[</span><span class="s2">"sample_names"</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">dial_count</span> <span class="o">=</span> <span class="nx">data</span><span class="p">[</span><span class="s2">"dial_count"</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">numbers_count</span> <span class="o">=</span> <span class="nx">data</span><span class="p">[</span><span class="s2">"numbers_count"</span><span class="p">];</span>
<span class="k">delete</span> <span class="nx">data</span><span class="p">[</span><span class="s2">"sample_names"</span><span class="p">];</span>
<span class="k">delete</span> <span class="nx">data</span><span class="p">[</span><span class="s2">"dial_count"</span><span class="p">];</span>
<span class="k">delete</span> <span class="nx">data</span><span class="p">[</span><span class="s2">"numbers_count"</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">tempo</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">tempo</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">ticks</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">ticks</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">code</span> <span class="o">=</span> <span class="nx">data</span><span class="p">.</span><span class="nx">code</span><span class="p">;</span>
<span class="nx">sample_names</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">url</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">url</span><span class="p">);</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"><</span> <span class="nx">dial_count</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">this</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="nx">push</span><span class="p">({});</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"><</span> <span class="nx">numbers_count</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">this</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="nx">push</span><span class="p">({});</span>
<span class="p">}</span>
<span class="nx">editor</span><span class="p">.</span><span class="nx">setValue</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">code</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="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">''</span><span class="p">);</span>
<span class="p">})</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">download</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">download</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">filename</span> <span class="o">=</span> <span class="s2">"song.txt"</span><span class="p">,</span> <span class="nx">type</span> <span class="o">=</span> <span class="s2">"text/plain"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">file</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Blob</span><span class="p">([</span><span class="nx">data</span><span class="p">],</span> <span class="p">{</span><span class="nx">type</span><span class="o">:</span> <span class="nx">type</span><span class="p">});</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"a"</span><span class="p">),</span>
<span class="nx">url</span> <span class="o">=</span> <span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">download</span> <span class="o">=</span> <span class="nx">filename</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">click</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="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">revokeObjectURL</span><span class="p">(</span><span class="nx">url</span><span class="p">);</span>
<span class="p">},</span> <span class="mf">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">download</span><span class="p">(</span><span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">())</span>
<span class="p">}</span>
<span class="nx">save</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">code</span> <span class="o">=</span> <span class="nx">editor</span><span class="p">.</span><span class="nx">getValue</span><span class="p">();</span>
<span class="kd">var</span> <span class="nx">text</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">tempo</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="nx">dial_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">dials</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">numbers_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">numbers</span><span class="p">.</span><span class="nx">length</span><span class="p">,</span>
<span class="nx">sample_names</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="nx">map</span><span class="p">(</span><span class="kd">function</span> <span class="p">(</span><span class="nx">item</span><span class="p">)</span> <span class="p">{</span><span class="k">return</span> <span class="nx">item</span><span class="p">[</span><span class="s2">"__url"</span><span class="p">]}),</span>
<span class="nx">ticks</span><span class="o">:</span> <span class="mf">16</span><span class="p">,</span>
<span class="nx">code</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">code</span><span class="p">,</span>
<span class="p">};</span>
<span class="kd">const</span> <span class="nx">lib</span> <span class="o">=</span> <span class="nb">window</span><span class="p">.</span><span class="nx">JsonUrl</span><span class="p">(</span><span class="s1">'lzma'</span><span class="p">);</span>
<span class="nx">lib</span><span class="p">.</span><span class="nx">compress</span><span class="p">(</span><span class="nx">text</span><span class="p">).</span><span class="nx">then</span><span class="p">(</span><span class="nx">encodedData</span> <span class="p">=></span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">link</span> <span class="o">=</span> <span class="s2">"/song/"</span> <span class="o">+</span> <span class="nx">encodedData</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">history</span><span class="p">.</span><span class="nx">pushState</span><span class="p">({},</span> <span class="s1">'Bitrhythm'</span><span class="p">,</span> <span class="nx">link</span><span class="p">);</span>
<span class="c1">//window.open(link, "_blank");</span>
<span class="p">});</span>
<span class="p">}</span>
<span class="nx">reload</span><span class="p">()</span> <span class="p">{</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span> <span class="s2">"//"</span> <span class="o">+</span> <span class="nb">window</span><span class="p">.</span><span class="nx">location</span><span class="p">.</span><span class="nx">host</span><span class="p">)</span>
<span class="p">}</span>
<span class="nx">reset</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">Tone</span><span class="p">.</span><span class="nx">Master</span><span class="p">.</span><span class="nx">mute</span> <span class="o">=</span> <span class="kc">true</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">stop</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="k">if</span> <span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">timer</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">clearInterval</span><span class="p">(</span><span class="nx">self</span><span class="p">.</span><span class="nx">timer</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">'tempo-value'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</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">'tick-value'</span><span class="p">).</span><span class="nx">disabled</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="nx">editor</span><span class="p">.</span><span class="nx">setValue</span><span class="p">(</span><span class="s2">""</span><span class="p">);</span>
<span class="k">this</span><span class="p">.</span><span class="nx">state</span> <span class="o">=</span> <span class="p">{</span>
<span class="nx">mem</span><span class="o">:</span> <span class="p">{},</span>
<span class="nx">dials</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">samples</span><span class="o">:</span> <span class="p">[],</span>
<span class="nx">tempo</span><span class="o">:</span> <span class="mf">120</span><span class="p">,</span>
<span class="nx">ticks</span><span class="o">:</span> <span class="mf">16</span><span class="p">,</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="nx">riot</span><span class="p">.</span><span class="nx">mount</span><span class="p">(</span><span class="s1">'bitrhythm'</span><span class="p">,</span> <span class="p">{</span>
<span class="nx">song</span><span class="o">:</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">song</span>
<span class="p">})</span>
<span class="p">}</span>
<span class="nx">editTempo</span><span class="p">(</span><span class="nx">e</span><span class="p">)</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="nx">state</span><span class="o">:</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">tempo</span><span class="o">:</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span><span class="p">)</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="p">}</span>
<span class="nx">editTicks</span><span class="p">(</span><span class="nx">e</span><span class="p">)</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="nx">state</span><span class="o">:</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">ticks</span><span class="o">:</span> <span class="nx">e</span><span class="p">.</span><span class="nx">target</span><span class="p">.</span><span class="nx">value</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">{</span><span class="nx">core_loop</span><span class="p">}</span>
<span class="nx">start</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">recorder</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">stop</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">recorder</span><span class="p">.</span><span class="nx">stop</span><span class="p">();</span>
<span class="p">}</span>
<span class="nx">addDial</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">dials</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="nx">addNumber</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">numbers</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="nx">addURL</span><span class="p">(</span><span class="nx">value</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="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="s2">"__name"</span><span class="o">:</span> <span class="nx">value</span><span class="p">});</span>
<span class="kd">var</span> <span class="nx">sam</span><span class="p">;</span>
<span class="nx">sam</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Tone</span><span class="p">.</span><span class="nx">Sampler</span><span class="p">({</span>
<span class="nx">urls</span><span class="o">:</span> <span class="p">{</span>
<span class="s2">"C3"</span><span class="o">:</span> <span class="nx">value</span><span class="p">,</span>
<span class="p">}</span>
<span class="p">});</span>
<span class="nx">sam</span><span class="p">[</span><span class="s2">"__name"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="nx">sam</span><span class="p">[</span><span class="s2">"__url"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">value</span><span class="p">;</span>
<span class="nx">self</span><span class="p">.</span><span class="nx">setSample</span><span class="p">(</span><span class="nx">sam</span><span class="p">,</span> <span class="nx">self</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">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">addSampleURL</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="nx">alertify</span><span class="p">.</span><span class="nx">prompt</span><span class="p">(</span> <span class="s1">'Enter Sample URL'</span><span class="p">,</span> <span class="s1">''</span><span class="p">,</span> <span class="s1">''</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">'Cancel'</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="nx">rmSample</span><span class="p">(</span><span class="nx">index</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">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mf">1</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="nx">rmDial</span><span class="p">(</span><span class="nx">index</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">dials</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mf">1</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="nx">rmNumber</span><span class="p">(</span><span class="nx">index</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">numbers</span><span class="p">.</span><span class="nx">splice</span><span class="p">(</span><span class="nx">index</span><span class="p">,</span> <span class="mf">1</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="nx">setSample</span><span class="p">(</span><span class="nx">e</span><span class="p">,</span> <span class="nx">i</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">i</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</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="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">bitrhythm</span><span class="p">></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">=></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">=></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"><</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"><</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">'sampler'</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"><</span><span class="nt">sample</span><span class="p">></span>
<span class="p"><</span><span class="nt">vbox</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-2"</span><span class="p">></span>
<span class="p"><</span><span class="nt">vstack</span> <span class="na">class</span><span class="o">=</span><span class="s">"ml-2"</span><span class="p">></span>
<span class="c"><!-- <input type="file" id={"sample-file" + this.props.ti} style="width: 120px;"/> --></span>
<span class="p"><</span><span class="nt">div</span><span class="p">></span>
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"max-width: 120px;text-overflow: ellipsis; white-space: nowrap;"</span><span class="p">></span>{ getLast(this.props.ti -1)} <span class="p"></</span><span class="nt">span</span><span class="p">></span>
<span class="p"><</span><span class="nt">span</span> <span class="na">class</span><span class="o">=</span><span class="s">"cursor-pointer"</span> <span class="na">id</span><span class="o">=</span><span class="s">{"sample"</span> <span class="err">+</span> <span class="na">this</span><span class="err">.</span><span class="na">props</span><span class="err">.</span><span class="na">ti</span><span class="err">}</span> <span class="na">onclick</span><span class="o">=</span><span class="s">{remove(this.props.ti</span> <span class="na">-1</span><span class="err">)}</span><span class="p">></span>(x)<span class="p"></</span><span class="nt">span</span><span class="p">></span>
<span class="p"></</span><span class="nt">div</span><span class="p">></span>
<span class="p"></</span><span class="nt">vstack</span><span class="p">></span>
<span class="p"></</span><span class="nt">vbox</span><span class="p">></span>
<span class="p"><</span><span class="nt">script</span><span class="p">></span>
<span class="k">this</span><span class="p">.</span><span class="nx">props</span> <span class="o">=</span> <span class="nx">opts</span><span class="p">;</span>
<span class="nx">remove</span><span class="p">(</span><span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</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">props</span><span class="p">.</span><span class="nx">rmsample</span><span class="p">(</span><span class="nx">index</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="nx">getLast</span> <span class="p">(</span><span class="nx">index</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">props</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">props</span><span class="p">.</span><span class="nx">samples</span><span class="p">[</span><span class="nx">index</span><span class="p">]</span> <span class="o">&&</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">samples</span><span class="p">[</span><span class="nx">index</span><span class="p">][</span><span class="s2">"__name"</span><span class="p">])</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">e</span> <span class="o">=</span> <span class="k">this</span><span class="p">.</span><span class="nx">props</span><span class="p">.</span><span class="nx">samples</span><span class="p">[</span><span class="nx">index</span><span class="p">][</span><span class="s2">"__name"</span><span class="p">];</span>
<span class="kd">var</span> <span class="nx">elems</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">"/"</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">name</span> <span class="o">=</span> <span class="nx">elems</span><span class="p">[</span><span class="nx">elems</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">];</span>
<span class="k">return</span> <span class="nx">name</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</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">""</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">"mount"</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"></</span><span class="nt">script</span><span class="p">></span>
<span class="p"></</span><span class="nt">sample</span><span class="p">></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">"visual"</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">"header-playback"</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</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">can_container</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">"canvas-container"</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">"header-playback"</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="kd">var</span> <span class="nx">state</span> <span class="o">=</span> <span class="kc">null</span><span class="p">;</span>
<span class="k">return</span> <span class="kd">function</span> <span class="p">(</span><span class="nx">val</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">((</span><span class="nx">val</span> <span class="o">>=</span> <span class="nx">range</span><span class="p">[</span><span class="mf">0</span><span class="p">])</span> <span class="o">&&</span> <span class="p">(</span><span class="nx">val</span> <span class="o"><=</span> <span class="nx">range</span><span class="p">[</span><span class="mf">1</span><span class="p">]))</span> <span class="p">{</span>
<span class="nx">state</span> <span class="o">=</span> <span class="nx">val</span><span class="p">;</span>
<span class="k">return</span> <span class="nx">val</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">state</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">romantogypsy</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">hex</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="s1">'`0'</span><span class="p">,</span><span class="s1">'a'</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">'`1'</span><span class="p">,</span><span class="s1">'b'</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">'`2'</span><span class="p">,</span><span class="s1">'c'</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">'`3'</span><span class="p">,</span><span class="s1">'d'</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">'`4'</span><span class="p">,</span><span class="s1">'e'</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">'`5'</span><span class="p">,</span><span class="s1">'f'</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">""</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">"a"</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">"b"</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">"c"</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">"d"</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">"e"</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">"f"</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"><=</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">"0"</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">""</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">"0"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0000"</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">"1"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0001"</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">"2"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0010"</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">"3"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0011"</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">"4"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0100"</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">"5"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0101"</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">"6"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0110"</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">"7"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"0111"</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">"8"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1000"</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">"9"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1001"</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">"a"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1010"</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">"b"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1011"</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">"c"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1100"</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">"d"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1101"</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">"e"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1110"</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">"f"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">bin</span> <span class="o">+=</span> <span class="s2">"1111"</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">''</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">bin</span> <span class="o">=</span> <span class="s2">""</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">bin</span> <span class="o">+=</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="k">return</span> <span class="nx">bin</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">str</span><span class="p">,</span> <span class="nx">index</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</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="o">&&</span> <span class="p">(</span><span class="nx">index</span> <span class="o"><</span> <span class="nx">str</span><span class="p">.</span><span class="nx">length</span><span class="p">))</span> <span class="p">{</span>
<span class="k">return</span> <span class="nx">str</span><span class="p">[</span><span class="nx">index</span><span class="p">];</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">null</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">pattern_meta</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</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="nx">replace</span><span class="p">(</span><span class="sr">/ /g</span><span class="p">,</span> <span class="s2">""</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">fc</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">''</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fc</span><span class="o">==</span> <span class="s2">"p"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">"xo"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">"xo"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
<span class="nx">fp</span> <span class="o">=</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/x/g</span><span class="p">,</span> <span class="s2">"1"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">fp</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="kc">null</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">meta</span> <span class="o">=</span> <span class="p">{}</span>
<span class="kd">var</span> <span class="nx">one_index</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span>
<span class="k">while</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">></span> <span class="nx">fp</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">current_meta</span> <span class="o">=</span> <span class="p">{}</span>
<span class="kd">var</span> <span class="nx">current_letter</span> <span class="o">=</span> <span class="nx">fp</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">current_letter</span> <span class="o">==</span> <span class="s2">"_"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">meta</span><span class="p">[</span><span class="nx">one_index</span> <span class="o">-</span><span class="mf">1</span><span class="p">]</span> <span class="o">=</span> <span class="p">{</span><span class="s2">"volume"</span><span class="o">:</span> <span class="s2">"off"</span> <span class="p">};</span>
<span class="nx">index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
<span class="nx">one_index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
<span class="k">continue</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">current_letter</span> <span class="o">==</span> <span class="s2">"1"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</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="k">if</span> <span class="p">(</span><span class="nx">next_letter</span> <span class="o">==</span> <span class="s2">"["</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">jump_index</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">buffer</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span>
<span class="k">while</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</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="o">+</span> <span class="nx">jump_index</span><span class="p">)</span> <span class="o">></span> <span class="nx">fp</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">let</span> <span class="nx">b_next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</span><span class="p">,</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="o">+</span> <span class="nx">jump_index</span><span class="p">));</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">b_next_letter</span> <span class="o">==</span> <span class="s2">"]"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">jump_index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">buffer</span> <span class="o">+=</span> <span class="nx">b_next_letter</span><span class="p">;</span>
<span class="nx">jump_index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">individual_meta</span> <span class="o">=</span> <span class="nx">buffer</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s2">";"</span><span class="p">)</span>
<span class="nx">individual_meta</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">e</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">"_"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">current_meta</span><span class="p">[</span><span class="s2">"pan"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">e</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">"^"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">current_meta</span><span class="p">[</span><span class="s2">"pitch"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">1</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">e</span><span class="p">.</span><span class="nx">startsWith</span><span class="p">(</span><span class="s2">"+"</span><span class="p">))</span> <span class="p">{</span>
<span class="nx">current_meta</span><span class="p">[</span><span class="s2">"delay"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">current_meta</span><span class="p">[</span><span class="s2">"volume"</span><span class="p">]</span> <span class="o">=</span> <span class="nx">e</span>
<span class="p">}</span>
<span class="p">})</span>
<span class="nx">meta</span><span class="p">[</span><span class="nx">one_index</span> <span class="o">-</span><span class="mf">1</span><span class="p">]</span> <span class="o">=</span> <span class="nx">current_meta</span>
<span class="nx">index</span> <span class="o">+=</span> <span class="nx">jump_index</span><span class="p">;</span>
<span class="nx">one_index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
<span class="k">continue</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">meta</span><span class="p">[</span><span class="nx">one_index</span> <span class="o">-</span><span class="mf">1</span><span class="p">]</span> <span class="o">=</span> <span class="nx">current_meta</span>
<span class="nx">one_index</span> <span class="o">+=</span> <span class="mf">1</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="k">continue</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">current_letter</span> <span class="o">==</span> <span class="s2">"*"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</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="k">if</span> <span class="p">(</span><span class="nx">next_letter</span> <span class="o">==</span> <span class="s2">"`"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">index</span> <span class="o">+=</span> <span class="mf">3</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
<span class="k">continue</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</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">one_index</span> <span class="o">+=</span> <span class="mf">1</span><span class="p">;</span>
<span class="k">continue</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">meta</span><span class="p">;</span>
<span class="p">}</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">pattern_meta</span> <span class="o">=</span> <span class="nx">pattern_meta</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">cue</span><span class="p">(</span><span class="nx">html</span><span class="p">,</span> <span class="nx">seconds</span> <span class="o">=</span> <span class="mf">5</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">$</span><span class="p">(</span><span class="s2">"#cued"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="nx">html</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">"#cued"</span><span class="p">).</span><span class="nx">html</span><span class="p">(</span><span class="s2">""</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">'/sampler.js'</span><span class="p">,</span> <span class="s1">'sampler'</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">'sampler'</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"><</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">=></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">=></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">"_filter"</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">'lowpass'</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">"_channel"</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">"_filter"</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">"_channel"</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">"C3"</span>
<span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">"16n"</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">"+0"</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">"_last"</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">"_channel"</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">"C3"</span>
<span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">"16n"</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">"+0"</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="p">(</span><span class="nx">s</span> <span class="o">-</span> <span class="mf">1</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">"_last"</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">"_channel"</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="o">-</span> <span class="mf">1</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">p1</span> <span class="o">=</span> <span class="nx">p1</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">pn</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">sample_no</span> <span class="o">=</span> <span class="nx">hit_map</span><span class="p">[</span><span class="nx">s</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">"C3"</span>
<span class="nx">len</span> <span class="o">=</span> <span class="nx">len</span> <span class="o">||</span> <span class="s2">"16n"</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">"+0"</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">sample_no</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">"_last"</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">"_channel"</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">sample_no</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">pn</span> <span class="o">=</span> <span class="nx">pn</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">pattern_parse</span><span class="p">(</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="o">!</span><span class="nx">p</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="s2">""</span><span class="p">;</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="nx">replace</span><span class="p">(</span><span class="sr">/ /g</span><span class="p">,</span> <span class="s2">""</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="nx">replace</span><span class="p">(</span><span class="sr">/\[.+?\]/g</span><span class="p">,</span> <span class="s2">""</span><span class="p">);</span>
<span class="kd">var</span> <span class="nx">fc</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">split</span><span class="p">(</span><span class="s1">''</span><span class="p">)[</span><span class="mf">0</span><span class="p">];</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">fc</span><span class="o">==</span> <span class="s2">"p"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">ptype</span> <span class="o">=</span> <span class="s2">"xo"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</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">ptype</span> <span class="o">=</span> <span class="s2">"hex"</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">l</span> <span class="o">=</span> <span class="p">(</span><span class="nx">p</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="o">*</span> <span class="mf">4</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">"xo"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fp</span> <span class="o">=</span> <span class="nx">p</span><span class="p">.</span><span class="nx">substr</span><span class="p">(</span><span class="mf">1</span><span class="p">);</span>
<span class="nx">fp</span> <span class="o">=</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">replace</span><span class="p">(</span><span class="sr">/x/g</span><span class="p">,</span> <span class="s2">"1"</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">ptype</span> <span class="o">==</span> <span class="s2">"xo"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">fin</span> <span class="o">=</span> <span class="s2">""</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">done</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="kd">var</span> <span class="nx">index</span> <span class="o">=</span> <span class="mf">1</span><span class="p">;</span>
<span class="k">while</span><span class="p">(</span><span class="mf">1</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">done</span><span class="p">)</span> <span class="p">{</span>
<span class="k">break</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">index</span> <span class="o">>=</span> <span class="nx">fp</span><span class="p">.</span><span class="nx">length</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">done</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="k">continue</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">current_letter</span> <span class="o">=</span> <span class="nx">fp</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="k">if</span> <span class="p">(</span><span class="nx">current_letter</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">current_letter</span> <span class="o">==</span> <span class="s2">"*"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</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">next_letter</span> <span class="o">==</span> <span class="s2">"`"</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">next_next_letter</span> <span class="o">=</span> <span class="nx">get_char</span><span class="p">(</span><span class="nx">fp</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">fin</span> <span class="o">+=</span> <span class="nx">lettertodec</span><span class="p">(</span><span class="nx">romantogypsy</span><span class="p">(</span><span class="nx">next_letter</span> <span class="o">+</span> <span class="nx">next_next_letter</span><span class="p">));</span>
<span class="nx">index</span> <span class="o">+=</span> <span class="mf">3</span><span class="p">;</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">fin</span> <span class="o">+=</span> <span class="nx">lettertodec</span><span class="p">(</span><span class="nx">next_letter</span><span class="p">);</span>
<span class="nx">index</span> <span class="o">+=</span> <span class="mf">2</span><span class="p">;</span>
<span class="p">}</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">fin</span> <span class="o">+=</span> <span class="nx">current_letter</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="p">}</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">fin</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">fp</span> <span class="o">=</span> <span class="nx">hex2bin</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">fp</span><span class="p">;</span>
<span class="p">}</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">pattern_parse</span> <span class="o">=</span> <span class="nx">pattern_parse</span><span class="p">;</span>
<span class="kd">function</span> <span class="nx">download</span><span class="p">(</span><span class="nx">data</span><span class="p">,</span> <span class="nx">filename</span><span class="p">,</span> <span class="nx">type</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">file</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Blob</span><span class="p">([</span><span class="nx">data</span><span class="p">],</span> <span class="p">{</span> <span class="nx">type</span><span class="o">:</span> <span class="nx">type</span> <span class="p">});</span>
<span class="k">if</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">msSaveOrOpenBlob</span><span class="p">)</span> <span class="c1">// IE10+</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">navigator</span><span class="p">.</span><span class="nx">msSaveOrOpenBlob</span><span class="p">(</span><span class="nx">file</span><span class="p">,</span> <span class="nx">filename</span><span class="p">);</span>
<span class="k">else</span> <span class="p">{</span> <span class="c1">// Others</span>
<span class="kd">var</span> <span class="nx">a</span> <span class="o">=</span> <span class="nb">document</span><span class="p">.</span><span class="nx">createElement</span><span class="p">(</span><span class="s2">"a"</span><span class="p">),</span>
<span class="nx">url</span> <span class="o">=</span> <span class="nx">URL</span><span class="p">.</span><span class="nx">createObjectURL</span><span class="p">(</span><span class="nx">file</span><span class="p">);</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">href</span> <span class="o">=</span> <span class="nx">url</span><span class="p">;</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">download</span> <span class="o">=</span> <span class="nx">filename</span><span class="p">;</span>
<span class="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">appendChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
<span class="nx">a</span><span class="p">.</span><span class="nx">click</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="nb">document</span><span class="p">.</span><span class="nx">body</span><span class="p">.</span><span class="nx">removeChild</span><span class="p">(</span><span class="nx">a</span><span class="p">);</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">URL</span><span class="p">.</span><span class="nx">revokeObjectURL</span><span class="p">(</span><span class="nx">url</span><span class="p">);</span>
<span class="p">},</span> <span class="mf">0</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="c1">// https://stackoverflow.com/questions/15762768/javascript-math-round-to-two-decimal-places</span>
<span class="kd">function</span> <span class="nx">roundTo</span><span class="p">(</span><span class="nx">n</span><span class="p">,</span> <span class="nx">digits</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">var</span> <span class="nx">negative</span> <span class="o">=</span> <span class="kc">false</span><span class="p">;</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">digits</span> <span class="o">===</span> <span class="kc">undefined</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">digits</span> <span class="o">=</span> <span class="mf">0</span><span class="p">;</span>
<span class="p">}</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">n</span> <span class="o"><</span> <span class="mf">0</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">negative</span> <span class="o">=</span> <span class="kc">true</span><span class="p">;</span>
<span class="nx">n</span> <span class="o">=</span> <span class="nx">n</span> <span class="o">*</span> <span class="o">-</span><span class="mf">1</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">var</span> <span class="nx">multiplicator</span> <span class="o">=</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="mf">10</span><span class="p">,</span> <span class="nx">digits</span><span class="p">);</span>
<span class="nx">n</span> <span class="o">=</span> <span class="nb">parseFloat</span><span class="p">((</span><span class="nx">n</span> <span class="o">*</span> <span class="nx">multiplicator</span><span class="p">).</span><span class="nx">toFixed</span><span class="p">(</span><span class="mf">11</span><span class="p">));</span>
<span class="nx">n</span> <span class="o">=</span> <span class="p">(</span><span class="nb">Math</span><span class="p">.</span><span class="nx">round</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="o">/</span> <span class="nx">multiplicator</span><span class="p">).</span><span class="nx">toFixed</span><span class="p">(</span><span class="nx">digits</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">negative</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">n</span> <span class="o">=</span> <span class="p">(</span><span class="nx">n</span> <span class="o">*</span> <span class="o">-</span><span class="mf">1</span><span class="p">).</span><span class="nx">toFixed</span><span class="p">(</span><span class="nx">digits</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="nx">n</span><span class="p">;</span>
<span class="p">}</span>
<span class="nx">$</span><span class="p">{</span><span class="nx">knob_code</span><span class="p">}</span>
</pre></div>
</div>
</div>
<div class="section" id="id1">
<h2>303<a class="headerlink" href="#id1" title="Permalink to this headline">¶</a></h2>
<p>Taken from <a class="reference external" href="https://www.vitling.xyz/toys/acid-banger/">endless acid banger</a>.</p>
<div class="highlight-js notranslate"><div class="highlight"><pre><span></span><span class="kd">function</span> <span class="nx">ThreeOhUnit</span><span class="p">(</span><span class="nx">audio</span><span class="p">,</span> <span class="nx">waveform</span><span class="p">,</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="kc">null</span><span class="p">,</span> <span class="nx">output</span><span class="p">,</span> <span class="nx">patternLength</span> <span class="o">=</span> <span class="mf">16</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">synth</span> <span class="o">=</span> <span class="nx">audio</span><span class="p">.</span><span class="nx">ThreeOh</span><span class="p">(</span><span class="nx">waveform</span><span class="p">,</span> <span class="nx">defaults</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">,</span> <span class="nx">output</span><span class="p">);</span>
<span class="kd">function</span> <span class="nx">step</span><span class="p">(</span><span class="nx">note</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="p">{</span>
<span class="nx">type</span><span class="o">:</span> <span class="s2">"on"</span><span class="p">,</span>
<span class="nx">accent</span><span class="o">:</span> <span class="kc">false</span><span class="p">,</span>
<span class="nx">glide</span><span class="o">:</span> <span class="kc">true</span><span class="p">,</span>
<span class="nx">note</span><span class="o">:</span> <span class="s2">"A3"</span><span class="p">,</span>
<span class="p">};</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">note</span> <span class="o">==</span> <span class="s2">"off"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">synth</span><span class="p">.</span><span class="nx">noteOff</span><span class="p">();</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">synth</span><span class="p">.</span><span class="nx">noteOn</span><span class="p">(</span><span class="nx">note</span><span class="p">.</span><span class="nx">note</span><span class="p">,</span> <span class="nx">note</span><span class="p">.</span><span class="nx">accent</span><span class="p">,</span> <span class="nx">note</span><span class="p">.</span><span class="nx">glide</span><span class="p">);</span>
<span class="p">}</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">step</span><span class="p">,</span>
<span class="nx">params</span><span class="o">:</span> <span class="nx">synth</span><span class="p">.</span><span class="nx">params</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">textNoteToNumber</span><span class="p">(</span><span class="nx">note</span><span class="p">)</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">lookupTable</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Map</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">revLook</span> <span class="o">=</span> <span class="k">new</span> <span class="nx">Map</span><span class="p">();</span>
<span class="p">(()</span> <span class="p">=></span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">add</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">n</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">lookupTable</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">n</span><span class="p">);</span>
<span class="nx">revLook</span><span class="p">.</span><span class="nx">set</span><span class="p">(</span><span class="nx">n</span><span class="p">,</span> <span class="nx">note</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'A'</span><span class="p">,</span> <span class="mf">9</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'A#'</span><span class="p">,</span> <span class="mf">10</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'B'</span><span class="p">,</span> <span class="mf">11</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'C'</span><span class="p">,</span> <span class="mf">0</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'C#'</span><span class="p">,</span> <span class="mf">1</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'D'</span><span class="p">,</span> <span class="mf">2</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'D#'</span><span class="p">,</span> <span class="mf">3</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'E'</span><span class="p">,</span> <span class="mf">4</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'F'</span><span class="p">,</span> <span class="mf">5</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'F#'</span><span class="p">,</span> <span class="mf">6</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'G'</span><span class="p">,</span> <span class="mf">7</span><span class="p">);</span>
<span class="nx">add</span><span class="p">(</span><span class="s1">'G#'</span><span class="p">,</span> <span class="mf">8</span><span class="p">);</span>
<span class="p">})();</span>
<span class="kd">const</span> <span class="nx">o</span> <span class="o">=</span> <span class="nx">note</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="nx">note</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">n</span> <span class="o">=</span> <span class="nx">note</span><span class="p">.</span><span class="nx">substring</span><span class="p">(</span><span class="mf">0</span><span class="p">,</span> <span class="nx">note</span><span class="p">.</span><span class="nx">length</span> <span class="o">-</span> <span class="mf">1</span><span class="p">);</span>
<span class="c1">// @ts-ignore</span>
<span class="k">return</span> <span class="nb">parseInt</span><span class="p">(</span><span class="nx">o</span><span class="p">)</span> <span class="o">*</span> <span class="mf">12</span> <span class="o">+</span> <span class="nx">lookupTable</span><span class="p">.</span><span class="nx">get</span><span class="p">(</span><span class="nx">n</span><span class="p">)</span> <span class="o">+</span> <span class="mf">12</span><span class="p">;</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">midiNoteToFrequency</span><span class="p">(</span><span class="nx">noteNumber</span><span class="p">)</span> <span class="p">{</span>
<span class="k">return</span> <span class="mf">440</span> <span class="o">*</span> <span class="nb">Math</span><span class="p">.</span><span class="nx">pow</span><span class="p">(</span><span class="mf">2</span><span class="p">,</span> <span class="p">(</span><span class="nx">noteNumber</span> <span class="o">-</span> <span class="mf">69</span><span class="p">)</span> <span class="o">/</span> <span class="mf">12</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">Audio</span><span class="p">(</span><span class="nx">au</span> <span class="o">=</span> <span class="k">new</span> <span class="p">(</span><span class="nb">window</span><span class="p">.</span><span class="nx">AudioContext</span> <span class="o">||</span> <span class="nb">window</span><span class="p">.</span><span class="nx">webkitAudioContext</span><span class="p">)())</span> <span class="p">{</span>
<span class="kd">function</span> <span class="nx">masterChannel</span><span class="p">()</span> <span class="p">{</span>
<span class="kd">const</span> <span class="nx">gain</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createGain</span><span class="p">();</span>
<span class="nx">gain</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.5</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">limiter</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createDynamicsCompressor</span><span class="p">();</span>
<span class="nx">limiter</span><span class="p">.</span><span class="nx">attack</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.005</span><span class="p">;</span>
<span class="nx">limiter</span><span class="p">.</span><span class="nx">release</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.1</span><span class="p">;</span>
<span class="nx">limiter</span><span class="p">.</span><span class="nx">ratio</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">15.0</span><span class="p">;</span>
<span class="nx">limiter</span><span class="p">.</span><span class="nx">knee</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.0</span><span class="p">;</span>
<span class="nx">limiter</span><span class="p">.</span><span class="nx">threshold</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="o">-</span><span class="mf">0.5</span><span class="p">;</span>
<span class="nx">gain</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">limiter</span><span class="p">);</span>
<span class="nx">limiter</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">destination</span><span class="p">);</span>
<span class="k">return</span> <span class="p">{</span>
<span class="k">in</span><span class="o">:</span> <span class="nx">gain</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">master</span> <span class="o">=</span> <span class="nx">masterChannel</span><span class="p">();</span>
<span class="kd">function</span> <span class="nx">ThreeOh</span><span class="p">(</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"sawtooth"</span><span class="p">,</span> <span class="nx">defaults</span><span class="p">,</span> <span class="nx">out</span> <span class="o">=</span> <span class="nx">master</span><span class="p">.</span><span class="k">in</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">defaults</span> <span class="o">=</span> <span class="nx">defaults</span> <span class="o">||</span> <span class="p">{</span>
<span class="s2">"cutoff"</span><span class="o">:</span> <span class="mf">400</span><span class="p">,</span>
<span class="s2">"resonance"</span><span class="o">:</span> <span class="mf">15</span><span class="p">,</span>
<span class="s2">"envMod"</span><span class="o">:</span> <span class="mf">4000</span><span class="p">,</span>
<span class="s2">"decay"</span><span class="o">:</span> <span class="mf">0.5</span>
<span class="p">}</span>
<span class="kd">const</span> <span class="nx">filter</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createBiquadFilter</span><span class="p">();</span>
<span class="nx">filter</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="s2">"lowpass"</span><span class="p">;</span>
<span class="nx">filter</span><span class="p">.</span><span class="nx">Q</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">resonance</span><span class="p">;</span>
<span class="nx">filter</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">cutoff</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">pResonance</span> <span class="o">=</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">Q</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">pCutoff</span> <span class="o">=</span> <span class="nx">filter</span><span class="p">.</span><span class="nx">frequency</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">decayTimeNode</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createConstantSource</span><span class="p">();</span>
<span class="nx">decayTimeNode</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">decay</span><span class="p">;</span>
<span class="nx">decayTimeNode</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">pDecay</span> <span class="o">=</span> <span class="nx">decayTimeNode</span><span class="p">.</span><span class="nx">offset</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">env</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createConstantSource</span><span class="p">();</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.0</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">scaleNode</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createGain</span><span class="p">();</span>
<span class="nx">scaleNode</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="nx">defaults</span><span class="p">.</span><span class="nx">envMod</span><span class="p">;</span>
<span class="kd">const</span> <span class="nx">pEnvMod</span> <span class="o">=</span> <span class="nx">scaleNode</span><span class="p">.</span><span class="nx">gain</span><span class="p">;</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">scaleNode</span><span class="p">);</span>
<span class="nx">scaleNode</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">filter</span><span class="p">.</span><span class="nx">detune</span><span class="p">);</span>
<span class="kd">const</span> <span class="nx">osc</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createOscillator</span><span class="p">();</span>
<span class="nx">osc</span><span class="p">.</span><span class="nx">type</span> <span class="o">=</span> <span class="nx">type</span><span class="p">;</span>
<span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">440</span><span class="p">;</span>
<span class="nx">osc</span><span class="p">.</span><span class="nx">start</span><span class="p">();</span>
<span class="kd">const</span> <span class="nx">vca</span> <span class="o">=</span> <span class="nx">au</span><span class="p">.</span><span class="nx">createGain</span><span class="p">();</span>
<span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">value</span> <span class="o">=</span> <span class="mf">0.0</span><span class="p">;</span>
<span class="nx">osc</span><span class="p">.</span><span class="nx">connect</span><span class="p">(</span><span class="nx">vca</span><span class="p">);</span>
<span class="nx">vca</span><span class="p">.</span><span class="nx">connect</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="nx">connect</span><span class="p">(</span><span class="nx">out</span><span class="p">);</span>
<span class="kd">function</span> <span class="nx">noteOn</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">accent</span> <span class="o">=</span> <span class="kc">false</span><span class="p">,</span> <span class="nx">glide</span> <span class="o">=</span> <span class="kc">false</span><span class="p">)</span> <span class="p">{</span>
<span class="k">if</span> <span class="p">(</span><span class="nx">accent</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="c1">//env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">setValueAtTime</span><span class="p">(</span><span class="mf">1.0</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">exponentialRampToValueAtTime</span><span class="p">(</span><span class="mf">0.01</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">+</span> <span class="nx">pDecay</span><span class="p">.</span><span class="nx">value</span> <span class="o">/</span> <span class="mf">3</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">else</span> <span class="p">{</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="c1">//env.offset.setTargetAtTime(1.0,au.currentTime, 0.001);</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">setValueAtTime</span><span class="p">(</span><span class="mf">1.0</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="nx">env</span><span class="p">.</span><span class="nx">offset</span><span class="p">.</span><span class="nx">exponentialRampToValueAtTime</span><span class="p">(</span><span class="mf">0.01</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">+</span> <span class="nx">pDecay</span><span class="p">.</span><span class="nx">value</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="k">if</span> <span class="p">(</span><span class="k">typeof</span> <span class="nx">note</span> <span class="o">==</span> <span class="s2">"number"</span><span class="p">)</span> <span class="p">{</span>
<span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">setTargetAtTime</span><span class="p">(</span><span class="nx">note</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">,</span> <span class="nx">glide</span> <span class="o">?</span> <span class="mf">0.02</span> <span class="o">:</span> <span class="mf">0.002</span><span class="p">);</span>
<span class="p">}</span> <span class="k">else</span> <span class="p">{</span>
<span class="nx">osc</span><span class="p">.</span><span class="nx">frequency</span><span class="p">.</span><span class="nx">setTargetAtTime</span><span class="p">(</span><span class="nx">midiNoteToFrequency</span><span class="p">(</span><span class="nx">textNoteToNumber</span><span class="p">(</span><span class="nx">note</span><span class="p">)),</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">,</span> <span class="nx">glide</span> <span class="o">?</span> <span class="mf">0.02</span> <span class="o">:</span> <span class="mf">0.002</span><span class="p">);</span>
<span class="p">}</span>
<span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">setValueAtTime</span><span class="p">(</span><span class="nx">accent</span> <span class="o">?</span> <span class="mf">0.2</span> <span class="o">:</span> <span class="mf">0.15</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="c1">//vca.gain.setTargetAtTime(accent ? 0.5 : 0.3,au.currentTime, 0.001);</span>
<span class="c1">//vca.gain.setValueAtTime(0.2, au.currentTime);</span>
<span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">linearRampToValueAtTime</span><span class="p">(</span><span class="mf">0.1</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span> <span class="o">+</span> <span class="mf">0.2</span><span class="p">);</span>
<span class="p">}</span>
<span class="kd">function</span> <span class="nx">noteOff</span><span class="p">()</span> <span class="p">{</span>
<span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">cancelScheduledValues</span><span class="p">(</span><span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">);</span>
<span class="nx">vca</span><span class="p">.</span><span class="nx">gain</span><span class="p">.</span><span class="nx">setTargetAtTime</span><span class="p">(</span><span class="mf">0.0</span><span class="p">,</span> <span class="nx">au</span><span class="p">.</span><span class="nx">currentTime</span><span class="p">,</span> <span class="mf">0.01</span><span class="p">);</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">noteOn</span><span class="p">,</span>
<span class="nx">noteOff</span><span class="p">,</span>
<span class="nx">params</span><span class="o">:</span> <span class="p">{</span>
<span class="nx">cutoff</span><span class="o">:</span> <span class="nx">pCutoff</span><span class="p">,</span>
<span class="nx">resonance</span><span class="o">:</span> <span class="nx">pResonance</span><span class="p">,</span>
<span class="nx">envMod</span><span class="o">:</span> <span class="nx">pEnvMod</span><span class="p">,</span>
<span class="nx">decay</span><span class="o">:</span> <span class="nx">pDecay</span>
<span class="p">}</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="k">return</span> <span class="p">{</span>
<span class="nx">ThreeOh</span><span class="p">,</span>
<span class="nx">master</span><span class="p">,</span>
<span class="nx">context</span><span class="o">:</span> <span class="nx">au</span>
<span class="p">};</span>
<span class="p">}</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">Audio</span> <span class="o">=</span> <span class="nx">Audio</span><span class="p">;</span>
<span class="nb">window</span><span class="p">.</span><span class="nx">ThreeOhUnit</span> <span class="o">=</span> <span class="nx">ThreeOhUnit</span><span class="p">;</span>
</pre></div>
</div>
</div>
<div class="section" id="autocommit">
<h2>Autocommit<a class="headerlink" href="#autocommit" title="Permalink to this headline">¶</a></h2>
<p><a class="reference external" href="https://xiaoouwang.medium.com/tutorial-advanced-use-of-watchdog-in-python-excluding-files-a-git-auto-commit-example-part-7024913ad5a8">https://xiaoouwang.medium.com/tutorial-advanced-use-of-watchdog-in-python-excluding-files-a-git-auto-commit-example-part-7024913ad5a8</a><br />
<a class="reference external" href="https://github.com/gitwatch/gitwatch">https://github.com/gitwatch/gitwatch</a></p>
<div class="highlight-python notranslate"><div class="highlight"><pre><span></span>
<span class="kn">import</span> <span class="nn">time</span>
<span class="kn">from</span> <span class="nn">watchdog.observers</span> <span class="kn">import</span> <span class="n">Observer</span>
<span class="kn">from</span> <span class="nn">watchdog.events</span> <span class="kn">import</span> <span class="n">RegexMatchingEventHandler</span>
<span class="kn">import</span> <span class="nn">os</span>
<span class="k">def</span> <span class="nf">on_created</span><span class="p">(</span><span class="n">event</span><span class="p">):</span>
<span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> has been created"</span><span class="p">)</span>
<span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">"git add </span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2">"</span><span class="p">)</span>
<span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">"git commit -m '</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> created'"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">on_deleted</span><span class="p">(</span><span class="n">event</span><span class="p">):</span>
<span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">"Delete </span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2">!"</span><span class="p">)</span>
<span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">"git commit -m '</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> deleted'"</span><span class="p">)</span>
<span class="k">def</span> <span class="nf">on_modified</span><span class="p">(</span><span class="n">event</span><span class="p">):</span>
<span class="nb">print</span><span class="p">(</span><span class="sa">f</span><span class="s2">"</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> has been modified"</span><span class="p">)</span>
<span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">"git add ."</span><span class="p">)</span>
<span class="n">os</span><span class="o">.</span><span class="n">system</span><span class="p">(</span><span class="sa">f</span><span class="s2">"git commit -m '</span><span class="si">{</span><span class="n">event</span><span class="o">.</span><span class="n">src_path</span><span class="si">}</span><span class="s2"> modified'"</span><span class="p">)</span>
<span class="k">if</span> <span class="vm">__name__</span> <span class="o">==</span> <span class="s2">"__main__"</span><span class="p">:</span>
<span class="c1"># create the event handler</span>
<span class="n">ignore_patterns</span> <span class="o">=</span> <span class="p">[</span><span class="sa">r</span><span class="s2">"^.+/\.git.*"</span><span class="p">]</span>
<span class="n">ignore_directories</span> <span class="o">=</span> <span class="kc">False</span>
<span class="n">case_sensitive</span> <span class="o">=</span> <span class="kc">True</span>
<span class="n">my_event_handler</span> <span class="o">=</span> <span class="n">RegexMatchingEventHandler</span><span class="p">(</span><span class="n">ignore_regexes</span><span class="o">=</span><span class="n">ignore_patterns</span><span class="p">,</span> <span class="n">ignore_directories</span><span class="o">=</span><span class="n">ignore_directories</span><span class="p">,</span> <span class="n">case_sensitive</span><span class="o">=</span><span class="n">case_sensitive</span><span class="p">)</span>
<span class="n">my_event_handler</span><span class="o">.</span><span class="n">on_created</span> <span class="o">=</span> <span class="n">on_created</span>
<span class="n">my_event_handler</span><span class="o">.</span><span class="n">on_deleted</span> <span class="o">=</span> <span class="n">on_deleted</span>
<span class="n">my_event_handler</span><span class="o">.</span><span class="n">on_modified</span> <span class="o">=</span> <span class="n">on_modified</span>
<span class="c1"># create an observer</span>
<span class="n">path</span> <span class="o">=</span> <span class="s2">"."</span>
<span class="n">go_recursively</span> <span class="o">=</span> <span class="kc">True</span>
<span class="n">my_observer</span> <span class="o">=</span> <span class="n">Observer</span><span class="p">()</span>
<span class="n">my_observer</span><span class="o">.</span><span class="n">schedule</span><span class="p">(</span><span class="n">my_event_handler</span><span class="p">,</span> <span class="n">path</span><span class="p">,</span> <span class="n">recursive</span><span class="o">=</span><span class="n">go_recursively</span><span class="p">)</span>
<span class="n">my_observer</span><span class="o">.</span><span class="n">start</span><span class="p">()</span>
<span class="k">try</span><span class="p">:</span>
<span class="k">while</span> <span class="kc">True</span><span class="p">:</span>
<span class="n">time</span><span class="o">.</span><span class="n">sleep</span><span class="p">(</span><span class="mi">5</span><span class="p">)</span>
<span class="k">except</span><span class="p">:</span>
<span class="n">my_observer</span><span class="o">.</span><span class="n">stop</span><span class="p">()</span>
<span class="nb">print</span><span class="p">(</span><span class="s2">"Observer Stopped"</span><span class="p">)</span>
<span class="n">my_observer</span><span class="o">.</span><span class="n">join</span><span class="p">()</span>
</pre></div>
</div>
</div>
</div>
</div>
<div class='prev-next-bottom'>
<a class='left-prev' id="prev-link" href="changelog.html" title="previous page">Changelog</a>
<a class='right-next' id="next-link" href="alternate-implementation.html" title="next page">Alternate Implementations</a>
</div>
</div>
</div>
<footer class="footer mt-5 mt-md-0">
<div class="container">
<p>
By Xyzzy Apps<br/>
© Copyright (c) Xyzzy Apps, 2021.<br/>
</p>
</div>
</footer>
</main>
</div>
</div>
<script src="_static/js/index.1c5a1a01449ed65a7b51.js"></script>
</body>
</html>