30:[] 2e:{"title":"Chords","cells":[{"id":0,"value":"md`# Chords\n...is a small JS/TS library for computing, transposing, generating and rendering chords for string instruments. Available at [GitHub](https://github.com/ondras/chords).\n\nThis document showcases some basic features of the library.\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"md`## Instrument\nPick an instrument and/or tuning. There are not many built-in variants, but you can always specify your tuning manually.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":21,"value":"viewof instrument = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":66,"value":"md`## Chord generation\nThe main feature of this library is the ability to generate chord layouts programatically, i.e. without a prior database of well-known finger combinations. This allows you to construct, discover and adjust chords for any needs.\n\nLet's start with a simple set of chords: C, G and D:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":69,"value":" renderChords([\"C\", \"G\", \"D\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":111,"value":"md`If you switch individual instruments, you will see different layouts. Also, we can see that there is no **G** chord generated for a guitar tuned with dropped D. This is because by default, chord layouts are generated only on the first three frets. This setting is useful for beginners, but we can always switch to the *nonempty* search strategy that goes up the neck until it finds a fret suitable for the given chord.\n\nLet's try this with some more complex chords: G (problematic with drop-D tuning), C♯ and D9:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":114,"value":"renderChords([\"G\", \"C#\", \"D9\", \"Bmi7/5-\"], {strategy:\"nonempty\"})","pinned":false,"hidden":false,"mode":"ojs"},{"id":116,"value":"md`Note that these diagrams often start with a non-zero fret offset. This is indicated by the missing nut line (strong) and by the offset displayed in Roman numerals.\n\nWe can also instruct the library to find **all** suitable layouts for a given chord and fret range. Let's try this for A-minor:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":118,"value":"renderChords([\"D9\"], {strategy:\"all\", startFret:1, maxFret:12})","pinned":false,"hidden":false,"mode":"ojs"},{"id":125,"value":"md `## Tone/chord inputs\nAll twelve semitones can form chord roots. You can pick from a large set of chord variants:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":128,"value":"viewof tone = DOM.select([\"C\", \"C#\", \"D\", \"D#\", \"E\", \"F\", \"F#\", \"G\", \"G#\", \"A\", \"Bb\", \"B\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":132,"value":"viewof type = DOM.select([\"major\", \"maj6\",\"dom7\", \"maj7\", \"aug\", \"aug7\", \"dom9\", \"minor\", \"min6\", \"min7\", \"min/maj7\", \"dim\", \"dim7\", \"m7b5\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":134,"value":"{\n let base = api.tones.parse(tone)\n let chord = api.chords.create(type, base)\n let name = api.chords.toString(chord)\n let layouts = api.layouts.create(instrument, chord, {strategy:\"nonempty\", fingerRange:3})\n return renderLayouts(layouts, name)\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":147,"value":"{\n function parse(name) {\n try {\n let ch = api.chords.parse(name);\n let tones = ch.tones.map(tone => api.tones.toString(tone)).join(\"/\");\n return md`The chord \"${api.chords.toString(ch)}\" contains ${tones}.`;\n } catch (e) {\n return e;\n }\n }\n return md`Chord names can be given using traditional notation. Try entering other chord names to see what tone do they contain:\n\n${parse(chordName)}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":165,"value":"viewof chordName = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":177,"value":"{\n let english = [\"A\", \"B♭\", \"B\", \"C\"];\n let tones = english.map(t => api.tones.parse(t, \"english\"))\n let german = tones.map(t => api.tones.toString(t, \"german\"))\n return md`Finally, both European and German note naming systems are supported and we can convert between them.\n\n English names: ${english.join(\" \")}\n\n German names: ${german.join(\" \")}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"md`## Transposition\n...is done by specifying a chord and an offset (in semitones). Use the slider below to specify the positive or negative transposition offset.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":261,"value":"viewof offset = html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"{\n let chords = [\"Fmaj7\", \"Bmi7/5-\", \"Cmi7\", \"D9\", \"Gmi7\"].map(ch => api.chords.parse(ch))\n let base = api.tones.parse(\"F\")\n \n let transposedChords = chords.map(ch => api.chords.transpose(ch, offset))\n let transposedBase = api.tones.transpose(base, offset)\n \n let names = transposedChords.map(ch => api.chords.toString(ch))\n \n return md`**Karel Plíhal – Myš (in ${api.tones.toString(transposedBase)}):** ${names.join(\" / \")}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":187,"value":"md`## One last thing\nYou can render chord diagrams either via SVG or using ASCII symbols (for easier copy-paste). Try changing the rendering mode and revisiting earlier parts of this page.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":190,"value":"viewof renderer = DOM.select([\"SVG\", \"ASCII\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"md`## Appendix\nThese helper functions import and interact with the Chords library.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":210,"value":"function renderChords(chords, options) {\n let nodes = chords.map(name => {\n let chord = api.chords.parse(name)\n let layouts = api.layouts.create(instrument, chord, options)\n console.log(layouts)\n return renderLayouts(layouts, api.chords.toString(chord))\n });\n return html`${nodes}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"function renderLayouts(layouts, name) {\n let nodes = []\n switch (renderer) {\n case \"SVG\":\n nodes = layouts.map(layout => api.render.svg(layout, name))\n break\n case \"ASCII\":\n const style = \"display:inline-block;margin: 0 2ch 1em 0;line-height:1.2\"\n nodes = layouts.map(layout => api.render.ascii(layout, name)).map(str => html`

${str}

`)\n break\n }\n return html`${nodes}`\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":2,"value":"api = import(\"https://cdn.jsdelivr.net/gh/ondras/chords@0.0.1/lib/api.js\")","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}