https://plypp.net/components/chord-selector/chord-selector.js

1import*as n from"../../player.js";import{registerFunctionComponent as d}from"webact";const i={dur:[0,4,7],moll:[0,3,7],sus2:[0,2,7],sus:[0,5,7],"7sus4":[0,5,7,10],aug5:[0,4,8],maug5:[0,3,8],mm5:[0,3,6],m7m5:[0,3,6,10],6:[0,4,7,9],m6:[0,3,7,9],7:[0,4,7,10],m7:[0,3,7,10],maj7:[0,4,7,11],dim7:[0,3,6,9],"7b9":[0,4,7,10,13],"7s9":[0,4,7,10,15],9:[0,4,7,10,14],add9:[0,4,7,14],maj9:[0,4,7,11,14],11:[0,4,7,10,14,17],add11:[0,4,7,17],13:[0,4,7,10,14,17,21]};function v(){const{css:p,html:s,postRender:u,$:t}=this;s`
2    <fieldset>
3      <legend>Chord Selector</legend>
4      <label>
5        Key:
6        <select id="base-key">
7          <option value="48">C</option>
8		  <option value="49">C#</option>
9          <option value="50">D</option>
10		  <option value="51">D#</option>
11          <option value="52">E</option>
12          <option value="53">F</option>
13		  <option value="54">F#</option>
14          <option value="55">G</option>
15		  <option value="56">G#</option>
16          <option value="57">A</option>
17		  <option value="58">A#</option>
18          <option value="59">B</option>
19        </select>
20      </label>
21	  <label>
22        Flavour:
23        <select id="flavour">
24          ${Object.keys(i).map(o=>`<option value="${o}">${o}</option>`)}
25        </select>
26      </label>
27	  <button type="button" id="play">Play</button>
28    </fieldset>
29  `,p`
30    :host {
31      color: white;
32      display: flex;
33    }
34
35    input[type="file"] {
36      display: none;
37    }
38  `,u(()=>{const o=t("#base-key"),l=t("#flavour");t("#play").addEventListener("click",()=>e());function e(){const a=Number.parseInt(o.value),r=l.value;n.noteOn(0,a),i[r].forEach(c=>n.noteOn(0,a+c)),setTimeout(()=>{n.allNotesOff(0)},1e3)}o.addEventListener("change",e),l.addEventListener("change",e),e()})}var f=d(v,{name:"chord-selector"});export{f as default};