| <!DOCTYPE html> |
| <html lang="en"> |
|
|
| <head> |
| <meta charset="utf-8"> |
| <meta http-equiv="x-ua-compatible" content="ie=edge"> |
| <meta name="viewport" content="width=device-width, initial-scale=1"> |
| <link rel="icon" href="favicon.ico" type="image/x-icon" /> |
| <link rel="stylesheet" href="examples-styles.css" /> |
|
|
| <title>abcjs: Accompaniment Demo</title> |
|
|
| <link rel="stylesheet" type="text/css" href="../abcjs-audio.css"> |
| <style> |
| label { |
| font-weight: bold; |
| } |
| .options { |
| margin-bottom: 10px; |
| } |
| h2 { |
| display: inline; |
| font-size: 1em; |
| } |
| .code { |
| color: white; |
| background-color: black; |
| padding: 10px; |
| display: inline-block; |
| border-radius: 4px; |
| } |
| </style> |
|
|
| <script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
| <script type="text/javascript"> |
| var abcCooley = "T: Cooley's\n" + |
| "M: 4/4\n" + |
| "L: 1/8\n" + |
| "R: reel\n" + |
| "K: Emin\n" + |
| "|:D2|EB{c}BA B2 EB|~B2 AB dBAG|FDAD BDAD|FDAD dAFD|\n" + |
| "EBBA B2 EB|B2 AB defg|afe^c dBAF|DEFD E2:|\n" + |
| "|:gf|eB B2 efge|eB B2 gedB|A2 FA DAFA|A2 FA defg|\n" + |
| "eB B2 eBgB|eB B2 defg|afe^c dBAF|DEFD E2:|"; |
| |
| var abcArpeggio = |
| 'X:9\n' + |
| 'T:Nocturne \n' + |
| 'C:Avetik Topchyan\n' + |
| 'C:upd 11 June 2024\n' + |
| 'M:4/4\n' + |
| 'L:1/16\n' + |
| 'Q:1/4=80\n' + |
| 'K:Em\n' + |
| 'P:A\n' + |
| '"Em" B8 g3e3B2 | \\n' + |
| '"Am" c8 f3e3c2 | \\n' + |
| '"Em" B8 "C" c4 A2G2 | \\n' + |
| '"Am" F4A2G2 "B7" G2^F2G2A2 :| \n' |
| |
| var abcJazz = |
| 'X:1\n' + |
| 'T:At the Jazz Band Ball\n' + |
| 'C:1918 Original Dixieland Jazz Band\n' + |
| 'M:4/4\n' + |
| 'L:1/8\n' + |
| 'Q:1/4=160\n' + |
| 'K:Bb\n' + |
| 'P:Verse\n' + |
| '"Gm"GG2D GG2G|GBG2G4|z2^c2d3=c|BGB2G4|\n' + |
| '"F7"z2FFG2AB-|"Bb"BBA2"G7"G3F|"C7"=E2G2B2dc-|"F7"c4z=EF^F|\n' + |
| '"Gm"GG2D GG2G|GBG2G4|z2d^c d=cBG|BG2G-G4|\n' + |
| '"C7"z2cd cBG2|z2cd cBG2|c2^c2dc2=c-|"F7"c4z=EF^F||\n' + |
| 'P:Chorus\n' + |
| '"G7"G2=B2dB2G-|G4zG_GF|"C7"=E2G2BG2d-|d8|\n' + |
| '"F7"z2d2dcAF|cdc2AFGF|"Bb"B2DF A2GF-|F4z=EF^F|\n' + |
| '"G7"GG=B2d2BG-|G4zG_GF|"C7"=EEG2BG2d-|d4zB2G|\n' + |
| '"Eb"B2BB "E°7"AG2G|"Bb"FF^F2"G7"G4|"C7"GB2G"F7"A2dB-|"Bb"B6z2|]\n' |
| |
| var abcFleur = |
| 'X: 1\n' + |
| 'T: Petite Fleur\n' + |
| 'M: 4/4\n' + |
| 'L: 1/4\n' + |
| 'Q: 1/4=120\n' + |
| 'C: Sidney Bechet 1959\n' + |
| 'K: Bb\n' + |
| 'E3/2E/|: [P:A]"D7"D4-|D^F/A/ (3ced|"Gm"B4-|BD/G/ A/B/A/G/|\n' + |
| '"A7"A4-|"D7"A =E/^F/ (3GAF|"Gm"D4-|D"^break"zE3/2E/|\n' |
| |
| var synthControl; |
| var accompanimentStyle = 'boom-chick' |
| var stressStyle = 'even' |
| var durationStyle = 'even' |
| var mute = false |
| var swing = false |
| |
| var tunes = { |
| 'boom-chick': abcCooley, |
| jazz: abcJazz, |
| arpeggio: abcArpeggio, |
| tango: abcFleur, |
| } |
| |
| var accompaniments = { |
| 'boom-chick': '', |
| jazz: '%%MIDI gchord bzczbzcz\n', |
| arpeggio: '%%MIDI gchord GHIJghij\n', |
| tango: '%%MIDI gchord bzzcbzbz\n', |
| } |
| |
| var stresses = { |
| 'even': '', |
| bass: '%%MIDI gchordstress 2 1 0.25 1 2 1 0.25 1\n', |
| chord: '%%MIDI gchordstress 0.25 1 2 1 0.25 1 2 1\n', |
| } |
| |
| var durations = { |
| 'even': '', |
| bass: '%%MIDI gchordduration 2 1 0.5 1 2 1 0.5 1\n', |
| chord: '%%MIDI gchordduration 0.5 1 2 1 0.5 1 2 1\n', |
| overlap: '%%MIDI gchordduration 3\n', |
| } |
| |
| function addDirectives() { |
| var directives = accompaniments[accompanimentStyle] + |
| stresses[stressStyle] + durations[durationStyle] |
| |
| var el = document.querySelector(".code") |
| el.innerHTML = directives ? directives : "% nothing selected" |
| return directives + tunes[accompanimentStyle] |
| } |
| function recreateAudio() { |
| var abcString = addDirectives() |
| if (ABCJS.synth.supportsAudio()) { |
| var visualObj = ABCJS.renderAbc("paper", abcString)[0]; |
| |
| const options = { |
| swing: swing ? 75 : 50, |
| bassprog: 58, |
| bassvol: 80, |
| chordprog: 25, |
| chordvol: 40, |
| program: 24, |
| pan: [ -0.5, 0.5 ], |
| voicesOff: mute |
| } |
| |
| if (!synthControl) { |
| synthControl = new ABCJS.synth.SynthController(); |
| synthControl.load("#audio", null, {displayLoop: true, displayRestart: true, displayPlay: true, displayProgress: true, displayWarp: true}); |
| } |
| synthControl.setTune(visualObj, true, options).then(function (response) { |
| console.log("Audio successfully loaded.") |
| }).catch(function (error) { |
| console.warn("Audio problem:", error); |
| }); |
| } else { |
| document.querySelector(".error").innerHTML = "<div class='audio-error'>Audio is not supported in this browser.</div>"; |
| } |
| } |
| |
| function load() { |
| recreateAudio() |
| } |
| |
| function styleChange(newStyle) { |
| accompanimentStyle = newStyle |
| recreateAudio() |
| } |
| |
| function stressChange(newStyle) { |
| stressStyle = newStyle |
| recreateAudio() |
| } |
| |
| function durationChange(newStyle) { |
| durationStyle = newStyle |
| recreateAudio() |
| } |
| |
| function muteMelody(a) { |
| var el = document.querySelector('input[name="melody"]') |
| mute = el.checked |
| recreateAudio() |
| } |
| |
| function swingRhythm(a) { |
| var el = document.querySelector('input[name="swing"]') |
| swing = el.checked |
| recreateAudio() |
| } |
| |
| </script> |
| </head> |
|
|
| <body onload="load()"> |
| <header> |
| <img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
| <h1>Accompaniment</h1> |
| </header> |
| <main> |
| <p>This shows different options for tweaking the sound of the accompaniment.</p> |
| <div class="options"> |
| <h2>Pattern:</h2> |
| <label><input type="radio" name="gchord" value="boom-chick" onclick="styleChange('boom-chick')" checked>Boom Chick (default)</label> |
| <label><input type="radio" name="gchord" value="jazz" onclick="styleChange('jazz')">Jazz</label> |
| <label><input type="radio" name="gchord" value="arpeggio" onclick="styleChange('arpeggio')">Arpeggio</label> |
| <label><input type="radio" name="gchord" value="tango" onclick="styleChange('tango')">Tango</label> |
| </div> |
| <div class="options"> |
| <h2>Stress:</h2> |
| <label><input type="radio" name="stress" value="even" onclick="stressChange('even')" checked>Even (default)</label> |
| <label><input type="radio" name="stress" value="bass" onclick="stressChange('bass')">Bass heavy</label> |
| <label><input type="radio" name="stress" value="chord" onclick="stressChange('chord')">Chord heavy</label> |
| </div> |
| <div class="options"> |
| <h2>Duration:</h2> |
| <label><input type="radio" name="duration" value="even" onclick="durationChange('even')" checked>Even (default)</label> |
| <label><input type="radio" name="duration" value="bass" onclick="durationChange('bass')">Long Bass</label> |
| <label><input type="radio" name="duration" value="chord" onclick="durationChange('chord')">Long Chord</label> |
| <label><input type="radio" name="duration" value="overlap" onclick="durationChange('overlap')">Overlapping</label> |
| </div> |
| <div class="options"> |
| <h2>Melody:</h2> |
| <label><input type="checkbox" name="melody" onclick="muteMelody()">Mute Melody</label> |
| <label><input type="checkbox" name="swing" onclick="swingRhythm()">Swing Rhythm</label> |
| </div> |
| <div id="audio" class="abcjs-large"></div> |
| <div class="error"></div> |
| <p>Add this to your code:</p> |
| <pre class="code"></pre> |
| <div id="paper"></div> |
| </main> |
| </body> |
|
|
| </html> |
