Skip to content

Commit cf1291e

Browse files
author
Paul Adams
committed
update
1 parent 41a041d commit cf1291e

2 files changed

Lines changed: 55 additions & 271 deletions

File tree

‎pages/piano.html‎

Lines changed: 29 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -1,37 +1,36 @@
11
<h1>Piano Roll</h1>
22

33
<div class="piano-controls-section">
4-
<div class="controls">
5-
<button id="clearBtn">Clear</button>
6-
<button id="playBtn">Play</button>
7-
<button id="stopBtn">Stop</button>
8-
</div>
9-
10-
<div class="song-selector">
11-
<label for="songSelect">Load Song:</label>
12-
<select id="songSelect">
13-
<option value="">-- Select a Song --</option>
14-
<optgroup label="Ragtime & Honky Tonk">
15-
<option value="entertainer">The Entertainer</option>
16-
<option value="honky-tonk" selected>Honky Tonk Stomp</option>
17-
</optgroup>
18-
</select>
19-
<button id="loadSongBtn">Load</button>
20-
21-
<label for="bpmSelect" style="margin-left: 20px;">BPM:</label>
22-
<select id="bpmSelect">
23-
<option value="60">60</option>
24-
<option value="80">80</option>
25-
<option value="100">100</option>
26-
<option value="120" selected>120</option>
27-
<option value="140">140</option>
28-
<option value="160">160</option>
29-
<option value="180">180</option>
30-
<option value="200">200</option>
31-
</select>
32-
</div>
4+
<div class="controls">
5+
<button id="clearBtn">Clear</button>
6+
<button id="playBtn">Play</button>
7+
<button id="stopBtn">Stop</button>
8+
</div>
9+
10+
<div class="song-selector">
11+
<label for="songSelect">Load Song:</label>
12+
<select id="songSelect">
13+
<option value="">-- Select a Song --</option>
14+
<optgroup label="Ragtime & Honky Tonk">
15+
<option value="honky-tonk" selected>Honky Tonk Stomp</option>
16+
</optgroup>
17+
</select>
18+
<button id="loadSongBtn">Load</button>
19+
20+
<label for="bpmSelect" style="margin-left: 20px">BPM:</label>
21+
<select id="bpmSelect">
22+
<option value="60">60</option>
23+
<option value="80">80</option>
24+
<option value="100">100</option>
25+
<option value="120" selected>120</option>
26+
<option value="140">140</option>
27+
<option value="160">160</option>
28+
<option value="180">180</option>
29+
<option value="200">200</option>
30+
</select>
31+
</div>
3332
</div>
3433

3534
<div class="piano-roll-wrapper">
36-
<canvas id="pianoRoll"></canvas>
35+
<canvas id="pianoRoll"></canvas>
3736
</div>

‎pages/piano.js‎

Lines changed: 26 additions & 241 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,27 @@ if (canvas) {
3939
canvas.height = CANVAS_HEIGHT;
4040
}
4141

42+
// Preload all audio samples
43+
async function preloadAllSamples() {
44+
const loadPromises = [];
45+
for (const octave of OCTAVES) {
46+
for (const note of NOTES) {
47+
loadPromises.push(loadAudioFile(`${note}${octave}`));
48+
}
49+
}
50+
try {
51+
await Promise.all(loadPromises);
52+
} catch (error) {
53+
console.error("Failed to preload some audio samples:", error);
54+
}
55+
}
56+
57+
// Initialize and draw
58+
(async () => {
59+
await preloadAllSamples();
60+
drawGrid();
61+
})();
62+
4263
// Draw grid
4364
function drawGrid() {
4465
if (!ctx) {
@@ -276,11 +297,11 @@ document.getElementById("playBtn").addEventListener("click", async () => {
276297
// Sort by time
277298
scheduledNotes.sort((a, b) => a.time - b.time);
278299

279-
// Pre-load all audio buffers first
280-
const audioPromises = scheduledNotes.map((note) =>
281-
loadAudioFile(note.noteName)
282-
);
283-
await Promise.all(audioPromises);
300+
// Pre-load all audio buffers first - no longer needed, they are preloaded
301+
// const audioPromises = scheduledNotes.map((note) =>
302+
// loadAudioFile(note.noteName)
303+
// );
304+
// await Promise.all(audioPromises);
284305

285306
// Now start both audio and visual at the same moment
286307
const audioStartTime = audioContext.currentTime;
@@ -326,242 +347,6 @@ document.getElementById("playBtn").addEventListener("click", async () => {
326347

327348
// Pre-defined songs
328349
const SONGS = {
329-
entertainer: {
330-
name: "The Entertainer",
331-
notes: [
332-
// Main Theme A - measure 1-4
333-
// Bass line
334-
["C2", 0],
335-
["G2", 2],
336-
["C2", 4],
337-
["G2", 6],
338-
["C2", 8],
339-
["G2", 10],
340-
["C2", 12],
341-
["G2", 14],
342-
343-
// Melody - the famous opening: D D# E C / E C / E C
344-
["D4", 0.75],
345-
["D#4", 1.25],
346-
["E4", 1.75],
347-
["C5", 2.25],
348-
["E4", 3],
349-
["C5", 4],
350-
["E4", 5],
351-
["C5", 6],
352-
["E4", 7],
353-
["C4", 8],
354-
["D4", 8.5],
355-
["E4", 9],
356-
["B3", 9.5],
357-
["D4", 10],
358-
["C4", 11],
359-
360-
// Measure 5-8
361-
["C2", 16],
362-
["G2", 18],
363-
["C2", 20],
364-
["G2", 22],
365-
["C2", 24],
366-
["G2", 26],
367-
["G2", 28],
368-
["D3", 30],
369-
370-
["D4", 16.75],
371-
["D#4", 17.25],
372-
["E4", 17.75],
373-
["C5", 18.25],
374-
["E4", 19],
375-
["C5", 20],
376-
["E4", 21],
377-
["C5", 22],
378-
["C5", 23],
379-
["A4", 24],
380-
["G4", 24.5],
381-
["F#4", 25],
382-
["A4", 25.5],
383-
["C4", 26],
384-
["E4", 26.5],
385-
["D4", 27],
386-
387-
// Measure 9-12
388-
["C2", 32],
389-
["G2", 34],
390-
["F2", 36],
391-
["C3", 38],
392-
["C2", 40],
393-
["G2", 42],
394-
["G2", 44],
395-
["D3", 46],
396-
397-
["C4", 33],
398-
["D4", 33.5],
399-
["D#4", 34],
400-
["E4", 34.5],
401-
["C4", 35],
402-
["D4", 35.5],
403-
["E4", 36],
404-
["B3", 36.5],
405-
["D4", 37],
406-
["C4", 38],
407-
["D4", 40.75],
408-
["D#4", 41.25],
409-
["E4", 41.75],
410-
["C5", 42.25],
411-
["E4", 43],
412-
["C5", 44],
413-
["E4", 45],
414-
["C5", 46],
415-
416-
// Measure 13-16
417-
["C2", 48],
418-
["G2", 50],
419-
["C2", 52],
420-
["G2", 54],
421-
["F2", 56],
422-
["C3", 58],
423-
["C2", 60],
424-
["G2", 62],
425-
426-
["E4", 47],
427-
["C4", 48],
428-
["D4", 48.5],
429-
["E4", 49],
430-
["B3", 49.5],
431-
["D4", 50],
432-
["C4", 51],
433-
["D4", 52.75],
434-
["D#4", 53.25],
435-
["E4", 53.75],
436-
["C5", 54.25],
437-
["E4", 55],
438-
["C5", 56],
439-
["C5", 57],
440-
["A4", 58],
441-
["G4", 58.5],
442-
["F#4", 59],
443-
["A4", 59.5],
444-
["C4", 60],
445-
["E4", 60.5],
446-
["D4", 61],
447-
448-
// Measure 17-20
449-
["C2", 64],
450-
["G2", 66],
451-
["G2", 68],
452-
["D3", 70],
453-
["C2", 72],
454-
["G2", 74],
455-
["C2", 76],
456-
["G2", 78],
457-
458-
["C4", 65],
459-
["D4", 65.5],
460-
["D#4", 66],
461-
["E4", 66.5],
462-
["C4", 67],
463-
["D4", 67.5],
464-
["E4", 68],
465-
["B3", 68.5],
466-
["D4", 69],
467-
["C4", 70],
468-
["C4", 72],
469-
["C4", 73],
470-
["C4", 74],
471-
["C4", 75],
472-
473-
// B Section (Trio) - Measure 21-28
474-
["F2", 80],
475-
["C3", 82],
476-
["F2", 84],
477-
["C3", 86],
478-
["F2", 88],
479-
["C3", 90],
480-
["F2", 92],
481-
["C3", 94],
482-
483-
["C4", 80],
484-
["C4", 81],
485-
["G4", 82],
486-
["E4", 82.5],
487-
["C4", 83],
488-
["E4", 84],
489-
["D4", 85],
490-
["D4", 86],
491-
["D4", 87],
492-
["A#3", 88],
493-
["G3", 88.5],
494-
["F3", 89],
495-
["G3", 89.5],
496-
["A3", 90],
497-
["A3", 91],
498-
["C5", 92],
499-
["A4", 92.5],
500-
["F4", 93],
501-
["A4", 94],
502-
["G4", 95],
503-
504-
// Measure 29-36
505-
["G2", 96],
506-
["D3", 98],
507-
["G2", 100],
508-
["D3", 102],
509-
["F2", 104],
510-
["C3", 106],
511-
["F2", 108],
512-
["C3", 110],
513-
514-
["G4", 96],
515-
["G4", 97],
516-
["D4", 98],
517-
["B3", 98.5],
518-
["G3", 99],
519-
["B3", 100],
520-
["A3", 101],
521-
["A3", 102],
522-
["A3", 103],
523-
["C4", 104],
524-
["C4", 105],
525-
["G4", 106],
526-
["E4", 106.5],
527-
["C4", 107],
528-
["E4", 108],
529-
["D4", 109],
530-
["D4", 110],
531-
["D4", 111],
532-
533-
// Measure 37-40
534-
["A#2", 112],
535-
["F3", 114],
536-
["F2", 116],
537-
["C3", 118],
538-
["C2", 120],
539-
["G2", 122],
540-
["C2", 124],
541-
["G2", 126],
542-
543-
["A#3", 112],
544-
["G3", 112.5],
545-
["F3", 113],
546-
["G3", 113.5],
547-
["A3", 114],
548-
["A3", 115],
549-
["F4", 116],
550-
["A4", 116.5],
551-
["C5", 117],
552-
["A4", 118],
553-
["F4", 119],
554-
["C4", 120],
555-
["C4", 121],
556-
["C4", 122],
557-
["C4", 123],
558-
["C4", 124],
559-
["C4", 125],
560-
["C4", 126],
561-
["C4", 127],
562-
],
563-
},
564-
565350
"honky-tonk": {
566351
name: "Honky Tonk Stomp",
567352
notes: [

0 commit comments

Comments
 (0)