@goplayerjuggler/abc-tools 1.0.6 → 1.0.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@goplayerjuggler/abc-tools",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "sorting algorithm and implementation for ABC tunes; plus other tools for parsing and manipulating ABC tunes",
   "main": "src/index.js",
   "scripts": {

package/src/incipit.js

@@ -54,8 +54,8 @@ function cleanIncipitLine(theTextIncipit) {
 	//   theTextIncipit = theTextIncipit.replaceAll("]", "");
 	//console.log(theTextIncipit);
 
-	// Strip out continuations
-	theTextIncipit = theTextIncipit.replaceAll("\\", "");
+	// keep continuations!
+	// theTextIncipit = theTextIncipit.replaceAll("\\", "");
 
 	// Segno
 	theTextIncipit = theTextIncipit.replaceAll("S", "");
@@ -333,7 +333,7 @@ function getContourFromFullAbc(abc) {
 		if (abc.length === 0) return null;
 		abc = abc[0];
 	}
-	return getContour(getIncipitForContourGeneration(abc));
+	return getContour(getIncipitForContourGeneration(abc), { withSvg: true });
 }
 
 module.exports = {

package/src/parse/header-parser.js

@@ -54,6 +54,15 @@ function getUnitLength(abc) {
 	}
 	return new Fraction(1, 8); // Default to 1/8
 }
+/**
+ * Extract titles - there may be 0..N titles
+ *
+ * @param {string} abc - ABC notation string
+ * @returns {[string]} - array of titles
+ */
+function getTitles(abc) {
+	return [...abc.matchAll(/^(?:T:\s*.(.+)\n)/gm)];
+}
 
 /**
  * Process ABC lines: extract music lines with metadata
@@ -100,9 +109,11 @@ function getMusicLines(abc) {
 		// Check for line continuation
 		const hasContinuation = trimmed.match(/\\\s*(%|$)/) !== null;
 
-		// Remove inline comments and line continuation marker
+		// Remove inline comments
 		trimmed = trimmed.replace(/\s*%.*$/, "").trim();
-		trimmed = trimmed.replace(/\\\s*$/, "").trim();
+
+		// Do *not* remove continuations: `\` at the end of a line
+		// trimmed = trimmed.replace(/\\\s*$/, "").trim();
 
 		if (trimmed) {
 			musicLines.push(trimmed);
@@ -137,4 +148,5 @@ module.exports = {
 	getMeter,
 	getUnitLength,
 	getMusicLines,
+	getTitles,
 };

package/src/parse/note-parser.js

@@ -12,6 +12,7 @@ const { Fraction } = require("../math.js");
 // - Chord symbols and annotations
 // - Tuplets/triplets
 // - Broken rhythms
+// - Grace notes
 //
 // ============================================================================
 
@@ -193,6 +194,87 @@ function parseChord(chordStr, unitLength) {
 	};
 }
 
+/**
+ * Parse grace notes from a token
+ * Grace notes are enclosed in curly braces and have zero duration
+ *
+ * @param {string} graceStr - Grace note string (e.g., '{ABC}', '{^AB_c}', '{[CEG]A}')
+ * @returns {Array<object>|null} - Array of grace note objects, or null if not valid grace notes
+ *
+ * Each grace note has:
+ * - isGraceNote: true
+ * - duration: Fraction(0, 1)
+ * - pitch, octave: as normal
+ * - isChord: true (if chord in brackets)
+ * - chordNotes: Array (if chord)
+ */
+function parseGraceNotes(graceStr) {
+	if (!graceStr.startsWith("{") || !graceStr.endsWith("}")) {
+		return null;
+	}
+
+	const content = graceStr.slice(1, -1);
+	if (!content) {
+		return null;
+	}
+
+	const graceNotes = [];
+
+	// Match individual notes or chords: accidental + pitch + octave (+ duration to ignore)
+	// Supports: A, ^A, _B', [CEG], [^C_E'G], A2, B/2, etc.
+	const noteRegex = /(?:\[[^\]]+\]|[=^_]?[A-Ga-g][',]*)[0-9]*\/?[0-9]*/g;
+
+	let match;
+	while ((match = noteRegex.exec(content)) !== null) {
+		const noteToken = match[0];
+
+		// Check if it's a chord
+		if (noteToken.startsWith("[")) {
+			const chord = parseChord(noteToken, new Fraction(1, 8)); // unitLength irrelevant
+			if (chord && chord.notes) {
+				// Find topmost note for the grace chord
+				let topNote = chord.notes[0];
+				for (const note of chord.notes) {
+					const topPos =
+						(topNote.octave || 0) * 7 +
+						(NOTE_TO_DEGREE[topNote.pitch?.toUpperCase()] || 0);
+					const notePos =
+						(note.octave || 0) * 7 +
+						(NOTE_TO_DEGREE[note.pitch?.toUpperCase()] || 0);
+					if (notePos > topPos) {
+						topNote = note;
+					}
+				}
+
+				// Set zero duration for all notes in grace chord
+				chord.notes.forEach((note) => {
+					note.duration = new Fraction(0, 1);
+				});
+
+				graceNotes.push({
+					...topNote,
+					isGraceNote: true,
+					duration: new Fraction(0, 1),
+					isChord: true,
+					chordNotes: chord.notes,
+				});
+			}
+		} else {
+			// Single grace note
+			const pitchData = getPitch(noteToken);
+			if (pitchData) {
+				graceNotes.push({
+					...pitchData,
+					isGraceNote: true,
+					duration: new Fraction(0, 1),
+				});
+			}
+		}
+	}
+
+	return graceNotes.length > 0 ? graceNotes : null;
+}
+
 /**
  * Parse broken rhythm from a token
  * Broken rhythms modify the duration of two adjacent notes (e.g., A>B, C<<D)
@@ -210,12 +292,10 @@ function parseChord(chordStr, unitLength) {
  * - 3: triple-dotted rhythm (15:1 multiplier)
  */
 function parseBrokenRhythm(token) {
-	const brokenMatch = token.match(/^(.+?)\s*(<{1,3}|>{1,3})$/);
+	const brokenMatch = token.match(/^(<{1,3}|>{1,3})$/);
 	if (brokenMatch) {
-		const firstNoteToken = brokenMatch[1],
-			symbol = brokenMatch[2];
+		const symbol = brokenMatch[1];
 		return {
-			firstNoteToken,
 			isBrokenRhythm: true,
 			direction: symbol[0],
 			dots: symbol.length,
@@ -459,4 +539,5 @@ module.exports = {
 	parseTuplet,
 	parseBrokenRhythm,
 	applyBrokenRhythm,
+	parseGraceNotes,
 };

package/src/parse/parser.js

@@ -10,6 +10,7 @@ const {
 	parseTuplet,
 	parseBrokenRhythm,
 	applyBrokenRhythm,
+	parseGraceNotes,
 } = require("./note-parser.js");
 const { classifyBarLine } = require("./barline-parser.js");
 const {
@@ -34,6 +35,7 @@ const {
 // - Back quotes: ` (ignored spacing for legibility, preserved in metadata)
 // - Triplets: (3ABC, (3A/B/C/, (3A2B2C2
 // - Broken rhythms: A>B, C<<D, etc. (>, >>, >>>, <, <<, <<<)
+// - Grace notes: {ABC}, {^AB_c}, etc. (zero duration, transparent to broken rhythms)
 // - Repeat notation: |:, :|, |1, |2, etc.
 // - Bar lines: |, ||, |], [|, etc.
 // - Decorations: symbol decorations (~.MPSTHUV) and !name! decorations
@@ -47,7 +49,6 @@ const {
 // - Line breaks: preserves information about newlines in music
 //
 // NOT YET SUPPORTED:
-// - Grace notes: {ABC}
 // - Slurs: ()
 // - Lyrics: w: lines
 // - Multiple voices: V: fields
@@ -104,7 +105,8 @@ const {
  *     text: string
  *   },
  *   isChord: true,              // Present if this is a chord [CEG]
- *   chordNotes: Array<NoteObject> // All notes in the chord (when isChord=true)
+ *   chordNotes: Array<NoteObject>, // All notes in the chord (when isChord=true)
+ *   isGraceNote: true           // Present if this is a grace note (has zero duration)
  * }
  *
  * NoteObject structure (silence/rest):
@@ -238,6 +240,7 @@ function parseABCWithBars(abc, options = {}) {
 	const barLines = [];
 	let currentBar = [];
 	let barCount = 0;
+	let previousRealNote = null; // Track last non-grace note for broken rhythms
 
 	// Split music text by bar lines while preserving positions
 	let lastBarPos = 0;
@@ -277,6 +280,34 @@ function parseABCWithBars(abc, options = {}) {
 					tokenMatch.index + fullToken.length
 				);
 
+				// Check for grace notes
+				if (fullToken.startsWith("{")) {
+					const graceNotes = parseGraceNotes(fullToken);
+					if (graceNotes) {
+						// Add each grace note to the bar
+						graceNotes.forEach((graceNote, idx) => {
+							currentBar.push({
+								...graceNote,
+								token: fullToken,
+								sourceIndex: tokenStartPos,
+								sourceLength: fullToken.length,
+								// Only the last grace note gets the spacing
+								spacing:
+									idx === graceNotes.length - 1
+										? spacing
+										: {
+												whitespace: "",
+												backquotes: 0,
+												beamBreak: false,
+												lineBreak: false,
+										  },
+							});
+						});
+						// Grace notes don't update previousRealNote
+						continue;
+					}
+				}
+
 				// Check for inline field
 				const inlineField = parseInlineField(fullToken);
 				if (inlineField) {
@@ -308,65 +339,69 @@ function parseABCWithBars(abc, options = {}) {
 						spacing,
 					};
 					currentBar.push(inlineFieldObj);
-					// previousNote = null; // Inline fields break note sequences
+					previousRealNote = null; // Inline fields break note sequences
 					continue;
 				}
 
 				// Check for broken rhythm
 				const brokenRhythm = parseBrokenRhythm(fullToken);
 				if (brokenRhythm) {
-					const { firstNoteToken } = brokenRhythm;
-					const firstNote = parseNote(firstNoteToken, unitLength, currentTuple);
-					// Find the next note token
-					const nextTokenMatch = tokenRegex.exec(segment);
-					if (nextTokenMatch) {
-						const nextToken = nextTokenMatch[0];
-						const nextTokenStartPos = lastBarPos + nextTokenMatch.index;
-						const nextSpacing = analyzeSpacing(
-							segment,
-							nextTokenMatch.index + nextToken.length
-						);
-
-						// Parse the next note
-						const nextNote = parseNote(nextToken, unitLength, currentTuple);
-						if (nextNote && nextNote.duration && firstNote.duration) {
-							// Apply broken rhythm to both notes
-							applyBrokenRhythm(firstNote, nextNote, brokenRhythm);
-
-							//add the firstNote
-							currentBar.push({
-								...firstNote,
-								token: fullToken,
-								sourceIndex: tokenStartPos,
-								sourceLength: fullToken.length,
-							});
-
-							// Add the broken rhythm marker to the bar
-							currentBar.push({
-								...brokenRhythm,
-							});
+					if (previousRealNote) {
+						// Find the next REAL note token (skip grace notes)
+						let nextTokenMatch = tokenRegex.exec(segment);
+						while (nextTokenMatch) {
+							const nextToken = nextTokenMatch[0];
+							// Skip grace notes
+							if (nextToken.startsWith("{")) {
+								nextTokenMatch = tokenRegex.exec(segment);
+								continue;
+							}
+							break;
+						}
 
-							// Add the next note to the bar
-							const nextNoteObj = {
-								...nextNote,
-								token: nextToken,
-								sourceIndex: nextTokenStartPos,
-								sourceLength: nextToken.length,
-								spacing: nextSpacing,
-							};
-							currentBar.push(nextNoteObj);
-							// previousNote = nextNoteObj;
-							continue;
+						if (nextTokenMatch) {
+							const nextToken = nextTokenMatch[0];
+							const nextTokenStartPos = lastBarPos + nextTokenMatch.index;
+							const nextSpacing = analyzeSpacing(
+								segment,
+								nextTokenMatch.index + nextToken.length
+							);
+
+							// Parse the next note
+							const nextNote = parseNote(nextToken, unitLength, currentTuple);
+							if (nextNote && nextNote.duration && previousRealNote.duration) {
+								// Apply broken rhythm to both notes
+								applyBrokenRhythm(previousRealNote, nextNote, brokenRhythm);
+
+								// Add the broken rhythm marker to the bar
+								currentBar.push({
+									...brokenRhythm,
+								});
+
+								// Add the next note to the bar
+								const nextNoteObj = {
+									...nextNote,
+									token: nextToken,
+									sourceIndex: nextTokenStartPos,
+									sourceLength: nextToken.length,
+									spacing: nextSpacing,
+								};
+								currentBar.push(nextNoteObj);
+								previousRealNote = null; //can't have successive broken rhythms
+								continue;
+							}
 						}
 					}
 					// If we couldn't apply the broken rhythm, just skip it
-					// previousNote = null;
+					previousRealNote = null;
 					continue;
 				}
 
 				// Tuplets
 				if (fullToken.match(/\(\d(?::\d?){0,2}/g)) {
-					const tuple = parseTuplet(fullToken);
+					const isCompound =
+						meter[1] === 8 && [6, 9, 12, 15, 18].indexOf(meter[0]) >= 0;
+					const tuple = parseTuplet(fullToken, isCompound);
 					if (tuple) {
 						if (currentTuple) {
 							throw new Error("nested tuples not handled");
@@ -378,7 +413,7 @@ function parseABCWithBars(abc, options = {}) {
 							sourceIndex: tokenStartPos,
 							sourceLength: fullToken.length,
 						});
-						// previousNote = null; // Tuplet markers break note sequences
+						previousRealNote = null; // Tuplet markers break note sequences
 						continue;
 					}
 				}
@@ -393,7 +428,7 @@ function parseABCWithBars(abc, options = {}) {
 						sourceLength: fullToken.length,
 						spacing,
 					});
-					// Chord symbols do note break note sequences - leave previousNote
+					// Chord symbols don't break note sequences
 					continue;
 				}
 
@@ -407,7 +442,7 @@ function parseABCWithBars(abc, options = {}) {
 						sourceLength: fullToken.length,
 						spacing,
 					});
-					// Chord symbols do note break note sequences - leave previousNote
+					// Decorations don't break note sequences
 					continue;
 				}
 
@@ -422,8 +457,10 @@ function parseABCWithBars(abc, options = {}) {
 						spacing,
 					};
 					currentBar.push(noteObj);
-					// Only track as previous note if it has duration (for broken rhythms)
-					// previousNote = note.duration ? noteObj : null;
+					// Only track as previous note if it has non-zero duration (for broken rhythms)
+					if (note.duration && note.duration.n !== 0) {
+						previousRealNote = noteObj;
+					}
 				}
 			}
 		}
@@ -457,6 +494,7 @@ function parseABCWithBars(abc, options = {}) {
 			bars.push(currentBar);
 			barCount++;
 			currentBar = [];
+			previousRealNote = null; // Bar lines break note sequences
 
 			// Check if we've reached max bars
 			if (barCount >= maxBars) {

package/src/parse/token-utils.js

@@ -13,6 +13,9 @@ const TokenRegexComponents = {
 	// Tuplet notation: (3, (3:2, (3:2:4
 	tuplet: String.raw`\(\d(?::\d?){0,2}`,
 
+	// Grace notes: {ABC}, {^AB_c}, etc.
+	graceNotes: String.raw`\{[^}]+\}`,
+
 	// Inline field changes: [K:D], [L:1/4], [M:3/4], [P:A]
 	inlineField: String.raw`\[(?:[KLMP]):[^\]]+\]`,
 
@@ -48,17 +51,19 @@ const TokenRegexComponents = {
 	// but we could have A16, or z10 (full bar rest for M:5/4; L:1/8)
 	duration: String.raw`[0-9]*\/?[0-9]*`,
 
-	// Tie (-) or broken rhythm (>, >>, >>>, <, <<, <<<)
-	// Optional: may have neither, or may have whitespace before broken rhythm
-	tieOrBroken: String.raw`(?:-|\s*(?:<{1,3}|>{1,3}))?`,
+	// Tie (-) - optional
+	tie: String.raw`-?`,
+
+	// Broken rhythm (>, >>, >>>, <, <<, <<<)
+	broken: String.raw`<{1,3}|>{1,3}`,
 };
 
 /**
  * Get regex for matching ABC music tokens
  * Built from documented components for maintainability
  *
- * Matches: tuplets, inline fields, chord symbols, notes, rests, chords in brackets,
- * decorations, ties, and broken rhythms
+ * Matches: tuplets, grace notes, inline fields, chord symbols, notes, rests,
+ * chords in brackets, decorations, ties, and broken rhythms
  *
  * @returns {RegExp} - Regular expression for tokenising ABC music
  */
@@ -72,16 +77,18 @@ const getTokenRegex = () => {
 		s.pitch +
 		s.octave +
 		s.duration +
-		s.tieOrBroken;
+		s.tie;
 
 	// Combine all patterns with alternation
 	const fullPattern = [
 		s.tuplet,
+		s.graceNotes,
 		s.inlineField,
 		s.quotedText,
 		//allow standalone bang and symbol decorations (?)
 		notePattern,
 		s.bangDecoration,
+		s.broken,
 	].join("|");
 
 	return new RegExp(fullPattern, "g");

package/src/sort/contour-svg.js

@@ -13,11 +13,19 @@ const { decodeChar } = require("./encode.js");
  * @property {number} paddingBottom - Bottom padding in pixels
  * @property {number} paddingLeft - Left padding in pixels
  * @property {number} paddingRight - Right padding in pixels
- * @property {boolean} forceBaseline - ensures the baseline at zero is displayed
+ * @property {boolean} forceBaseline - Ensures the baseline at zero is displayed
  * @property {number|null} minDegree - Minimum degree for vertical range (null for auto)
  * @property {number|null} maxDegree - Maximum degree for vertical range (null for auto)
  * @property {string} class - CSS class name for the SVG element
  * @property {string} ariaLabel - Accessible label for screen readers
+ * @property {number} noteStartRadius - Radius of the circle marking note starts (played notes only)
+ * @property {boolean} onlyShowMeaningfulStartOfPlayedNotes - If true, only show start markers when previous note is same pitch; if false, show on all played notes
+ * @property {boolean} showYAxis - Whether to display the Y axis
+ * @property {string} yAxisColor - Colour for the Y axis line
+ * @property {number} yAxisWidth - Width of the Y axis line
+ * @property {number} yAxisTickLength - Length of regular ticks (for 5th degree markers)
+ * @property {number} yAxisTonicTickLength - Length of tonic ticks (for tonic degree markers)
+ * @property {number} yAxisTickWidth - Width of tick marks
  */
 
 /**
@@ -25,35 +33,42 @@ const { decodeChar } = require("./encode.js");
  * @type {SvgConfig}
  */
 const contourToSvg_defaultConfig = {
-	degreeHeight: 5, // much smaller (default is 12)
-	paddingTop: 1, // less padding (default is 20)
-	paddingBottom: 1, // less padding (default is 20)
-	strokeWidth: 2, // slightly thinner lines (default is 3)
+	degreeHeight: 5,
+	paddingTop: 3,
+	paddingBottom: 3,
+	strokeWidth: 2,
 	unitWidth: 15,
-	// degreeHeight: 12,
-	// strokeWidth: 3,
 	playedColor: "#2563eb", // blue
-	heldColor: "#93c5fd", // lighter blue (held notes)
+	heldColor: "#2563eb", // same as played (no longer lighter blue)
 	baselineColor: "#555555", // Davy's grey
-	// paddingTop: 20,
-	// paddingBottom: 20,
 	paddingLeft: 10,
 	paddingRight: 10,
-	minDegree: null, // null means auto-calculate from contour
-	maxDegree: null, // null means auto-calculate from contour
+	minDegree: null,
+	maxDegree: null,
 	forceBaseline: true,
 	class: "contour-svg",
 	ariaLabel: "Tune contour",
+	noteStartRadius: 3,
+	onlyShowMeaningfulStartOfPlayedNotes: true,
+	showYAxis: true,
+	yAxisColor: "#888888",
+	yAxisWidth: 1,
+	yAxisTickLength: 4,
+	yAxisTonicTickLength: 6,
+	yAxisTickWidth: 1,
 };
 
 /**
- * Converts a tune contour object into an SVG visualization
+ * Converts a tune contour object into an SVG visualisation
  *
  * The SVG represents the melodic contour as a series of connected horizontal line segments.
  * Each segment's vertical position corresponds to its modal degree (pitch relative to tonic),
  * and its horizontal length represents its duration relative to the common subdivision of the beat.
  * The resulting SVG is landscape-oriented (wider than tall).
  *
+ * Played notes are marked with a small filled circle at their start point.
+ * Held notes (continuations of the same pitch) have no start marker.
+ *
  * Silences are not drawn but occupy space on the x-axis, causing subsequent notes to be
  * positioned after the cumulative duration of preceding silences.
  *
@@ -75,7 +90,7 @@ const contourToSvg_defaultConfig = {
  * // With fixed vertical range for comparing multiple contours
  * const svg = contourToSvg(contour, { minDegree: -15, maxDegree: 15 });
  *
- * // Auto range  - calculates from the contour's actual pitch range
+ * // Auto range - calculates from the contour's actual pitch range
  * const svg2 = contourToSvg(contour, {
  *   minDegree: null,
  *   maxDegree: null
@@ -87,7 +102,7 @@ const contourToSvg_defaultConfig = {
  * // You can also set just one bound
  * const svg3 = contourToSvg(contour, {
  *   minDegree: -15,
- *   maxDegree: null //maxDegree will auto-calculate
+ *   maxDegree: null // maxDegree will auto-calculate
  * });
  */
 function contourToSvg(contour, svgConfig = {}) {
@@ -156,7 +171,11 @@ function contourToSvg(contour, svgConfig = {}) {
 	const svgWidth = totalWidth + config.paddingLeft + config.paddingRight;
 	const svgHeight = chartHeight + config.paddingTop + config.paddingBottom;
 
-	// Helper function to convert position to Y coordinate
+	/**
+	 * Converts a modal degree position to Y coordinate in SVG space
+	 * @param {number} pos - Modal degree position
+	 * @returns {number} Y coordinate
+	 */
 	const positionToY = (pos) => {
 		const relativePos = maxPosition - pos;
 		return config.paddingTop + relativePos * config.degreeHeight;
@@ -165,6 +184,47 @@ function contourToSvg(contour, svgConfig = {}) {
 	// Build SVG path elements
 	const pathElements = [];
 
+	// Add Y axis if configured
+	if (config.showYAxis) {
+		const yAxisX = config.paddingLeft - 5;
+		const yAxisTop = positionToY(maxPosition);
+		const yAxisBottom = positionToY(minPosition);
+
+		pathElements.push(
+			`<line x1="${yAxisX}" y1="${yAxisTop}" ` +
+				`x2="${yAxisX}" y2="${yAxisBottom}" ` +
+				`stroke="${config.yAxisColor}" stroke-width="${config.yAxisWidth}" />`
+		);
+
+		// Add tick marks for positions within range
+		// Regular ticks at positions: ..., -11, -4, 4, 11, 18, ... (5th degree in each octave)
+		// Tonic ticks at positions: ..., -14, -7, 0, 7, 14, ... (tonic in each octave)
+		const minPos = Math.floor(minPosition);
+		const maxPos = Math.ceil(maxPosition);
+
+		for (let pos = minPos; pos <= maxPos; pos++) {
+			let tickLength = 0;
+
+			// Check if this is a tonic position (0, ±7, ±14, ...)
+			if (pos % 7 === 0) {
+				tickLength = config.yAxisTonicTickLength;
+			}
+			// Check if this is a 5th position (±4, ±11, ±18, ...)
+			else if (pos % 7 === 4 || pos % 7 === -3) {
+				tickLength = config.yAxisTickLength;
+			}
+
+			if (tickLength > 0) {
+				const tickY = positionToY(pos);
+				pathElements.push(
+					`<line x1="${yAxisX - tickLength}" y1="${tickY}" ` +
+						`x2="${yAxisX}" y2="${tickY}" ` +
+						`stroke="${config.yAxisColor}" stroke-width="${config.yAxisTickWidth}" />`
+				);
+			}
+		}
+	}
+
 	// Add baseline at position 0 if it's within range
 	if (minPosition <= 0 && maxPosition >= 0) {
 		const baselineY = positionToY(0);
@@ -196,6 +256,39 @@ function contourToSvg(contour, svgConfig = {}) {
 				`stroke-linecap="round" />`
 		);
 
+		// Add note start marker (filled circle) for played notes
+		// If onlyShowMeaningfulStartOfPlayedNotes is true, only show when previous note is same pitch
+		if (!seg.isHeld) {
+			let showStartMarker = true;
+
+			if (config.onlyShowMeaningfulStartOfPlayedNotes) {
+				// Find previous non-silence segment
+				let prevNonSilenceIdx = i - 1;
+				while (
+					prevNonSilenceIdx >= 0 &&
+					segments[prevNonSilenceIdx].isSilence
+				) {
+					prevNonSilenceIdx--;
+				}
+
+				// Only show marker if previous note exists and is at same position
+				if (prevNonSilenceIdx >= 0) {
+					const prevSeg = segments[prevNonSilenceIdx];
+					showStartMarker = prevSeg.position === seg.position;
+				} else {
+					// First note: don't show marker
+					showStartMarker = false;
+				}
+			}
+
+			if (showStartMarker) {
+				pathElements.push(
+					`<circle cx="${x1}" cy="${y}" r="${config.noteStartRadius}" ` +
+						`fill="${color}" />`
+				);
+			}
+		}
+
 		// Add connecting vertical line to next non-silence segment if position changes
 		let nextNonSilenceIdx = i + 1;
 		while (