Spaces:

KEXEL
/

abcjs

Running

File size: 7,207 Bytes

af6912c

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