|
|
<!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" type="text/css" href="../abcjs-audio.css"> |
|
|
<link rel="stylesheet" href="examples-styles.css" /> |
|
|
|
|
|
<title>Swing with Editor</title> |
|
|
<script src="../dist/abcjs-basic.js" type="text/javascript"></script> |
|
|
<script type="text/javascript"> |
|
|
var editor; |
|
|
var renderParams = { selectTypes: false }; |
|
|
var synthOptions = {}; |
|
|
var swingElement; |
|
|
var codeEl; |
|
|
var abcEl; |
|
|
window.onload = function () { |
|
|
abcEl = document.querySelector("#abc"); |
|
|
swingElement = document.querySelector(".swing-value"); |
|
|
codeEl = document.querySelector(".editor-code"); |
|
|
|
|
|
editor = new ABCJS.Editor("abc", { |
|
|
canvas_id: "paper", |
|
|
warnings_id: "warnings", |
|
|
abcjsParams: renderParams, |
|
|
synth: { |
|
|
el: "#audio", |
|
|
options: { displayRestart: true, displayPlay: true, displayProgress: true, options: {} } |
|
|
} |
|
|
}); |
|
|
|
|
|
swingElement.addEventListener("change", paramChanged); |
|
|
paramChanged(); |
|
|
}; |
|
|
|
|
|
function paramChanged() { |
|
|
var output = 'new ABCJS.Editor("abc", {\n' + |
|
|
' canvas_id: "paper",\n' + |
|
|
' warnings_id: "warnings",\n' + |
|
|
' abcjsParams: renderParams,\n' + |
|
|
' synth: {\n' + |
|
|
' el: "#audio",\n' + |
|
|
' options: {\n' + |
|
|
' displayRestart: true, displayPlay: true, displayProgress: true,\n' + |
|
|
' options: synthOptions\n' + |
|
|
' }\n' + |
|
|
' },\n' + |
|
|
'});' |
|
|
|
|
|
editor.paramChanged(renderParams); |
|
|
|
|
|
synthOptions = { swing: parseFloat(swingElement.value, 10) }; |
|
|
editor.synthParamChanged(synthOptions); |
|
|
|
|
|
output = output.replace("renderParams", JSON.stringify(renderParams)); |
|
|
output = output.replace("synthOptions", JSON.stringify(synthOptions)); |
|
|
codeEl.innerHTML = output; |
|
|
} |
|
|
</script> |
|
|
<style> |
|
|
</style> |
|
|
</head> |
|
|
|
|
|
<body> |
|
|
<header> |
|
|
<img src="https://paulrosen.github.io/abcjs/img/abcjs_comp_extended_08.svg" alt="abcjs logo"> |
|
|
<h1>abcjs swing with editor</h1> |
|
|
</header> |
|
|
<div class="container"> |
|
|
<main> |
|
|
<p>This demonstrates the addition of swing in a tune. |
|
|
The swing is added to the MIDI player, so it is not reflected in the sheet music. |
|
|
The swing is represented as a percentage of the duration of the first note to the |
|
|
duration of the pair of eighth notes. |
|
|
The default is 50%, which is no swing; both eights have the same duration and the ratio is 1:1. |
|
|
66% is a common value for triplet-swing, with a 2:1 ratio of the first note to the second. |
|
|
Other common swing values are 60% which corresponds to a 3:2 ratio of the first note to the second and 57% |
|
|
which corresponds to a 4:3 ratio. |
|
|
The maximum value of swing is 75; in this case the first half of the pair is 3 times longer than the second |
|
|
half. |
|
|
resulting to a 3:1 ratio or a dotted-eighth followed by a sixteenth note. |
|
|
</p> |
|
|
<p>In the example below, change the value of the swing to see how it matches of differs from the explicit |
|
|
triplets of dotted eighth and sixteenth notes. |
|
|
</p> |
|
|
<p> |
|
|
Swing is supported in all X/4 and X/8 meters. In a X/8 meter the sixteenths swing. |
|
|
You can try a X/8 meter by changing the meter in the ABC string to "M: 4/8 |
|
|
L: 1/16" |
|
|
However, meter changes in the middle of a tune do not affect the main swing duration. |
|
|
</p> |
|
|
<section class="input"> |
|
|
<h2>ABC String</h2> |
|
|
<textarea aria-label="ABC string" id="abc" spellcheck="false"> |
|
|
M:4/4 |
|
|
L:1/8 |
|
|
Q:1/8=140 |
|
|
"^swung notes"cc cc cc cc | "^triplets"(3:2:2c2c (3:2:2c2c (3:2:2c2c (3:2:2c2c | |
|
|
"^swung notes"cc cc cc cc | "^dotted eighth and sixteenth"c>c c>c c>c c2 | |
|
|
"^swung notes"zc cz cc zc |"^sixteenths are not affected in a 4/4"c/c/c/c/ z/c/c/z/ c/c/z/c/ c/z/c/c/ | |
|
|
</textarea> |
|
|
<fieldset> |
|
|
<legend>Options</legend> |
|
|
<h2>Swing Parameters</h2> |
|
|
<label>Swing: |
|
|
<input class="swing-value" type="number" min="50" max="75" step="1" value="60"> |
|
|
</label> |
|
|
</fieldset> |
|
|
</section> |
|
|
|
|
|
<section class="output"> |
|
|
<h2>Output</h2> |
|
|
<div id="audio"></div> |
|
|
<div id="warnings"></div> |
|
|
<div id="paper" class="visible-background"></div> |
|
|
</section> |
|
|
|
|
|
<section class="explanation"> |
|
|
<h2>Code Sample</h2> |
|
|
<pre class="editor-code"> |
|
|
</pre> |
|
|
</section> |
|
|
</main> |
|
|
</div> |
|
|
</body> |
|
|
|
|
|
</html> |
