|
|
<!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> |
