[{"_1":2,"_3":-5,"_4":-5},"loaderData",{"_5":6,"_7":8},"actionData","errors","root",{"_26":27,"_28":29,"_30":12,"_31":12,"_32":12,"_33":12,"_34":12,"_35":12,"_36":37},"routes/canvas.shared.$sharedTextdocId",{"_9":10,"_11":12},"sharedTextdoc",{"_13":14,"_15":-7,"_16":17,"_18":19,"_20":21,"_22":23,"_24":12,"_25":12},"isAuthenticated",false,"sharedTextdocId","67aa82b19b1c819189e3f1ff16233c90","versionInt","title","Canvas Piano","type","code/react","content","import React, { useRef, useEffect } from \"react\";\n\n// Frequencies for one octave: C4 to C5\n// We included the black keys as well.\n// Reference: https://pages.mtu.edu/~suits/notefreqs.html\nconst notesData = [\n // White keys\n { name: \"C4\", frequency: 261.63, color: \"white\", x: 0 },\n { name: \"D4\", frequency: 293.66, color: \"white\", x: 1 },\n { name: \"E4\", frequency: 329.63, color: \"white\", x: 2 },\n { name: \"F4\", frequency: 349.23, color: \"white\", x: 3 },\n { name: \"G4\", frequency: 392.0, color: \"white\", x: 4 },\n { name: \"A4\", frequency: 440.0, color: \"white\", x: 5 },\n { name: \"B4\", frequency: 493.88, color: \"white\", x: 6 },\n { name: \"C5\", frequency: 523.25, color: \"white\", x: 7 },\n];\n\n// Black keys (sharps)\n// We'll store them separately with approximate x positions\n// The x value references the white key block. We'll refine the exact pixel offset.\nconst blackKeysData = [\n { name: \"C#4\", frequency: 277.18, color: \"black\", x: 0.6 },\n { name: \"D#4\", frequency: 311.13, color: \"black\", x: 1.6 },\n // E-F gap has no black key in between\n { name: \"F#4\", frequency: 369.99, color: \"black\", x: 3.6 },\n { name: \"G#4\", frequency: 415.3, color: \"black\", x: 4.6 },\n { name: \"A#4\", frequency: 466.16, color: \"black\", x: 5.6 },\n];\n\n// Dimensions\nconst WHITE_KEY_WIDTH = 50;\nconst WHITE_KEY_HEIGHT = 150;\nconst BLACK_KEY_WIDTH = 30;\nconst BLACK_KEY_HEIGHT = 90;\n\nexport default function CanvasPiano() {\n const canvasRef = useRef(null);\n const audioCtxRef = useRef(null);\n\n useEffect(() => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const ctx = canvas.getContext(\"2d\");\n if (!ctx) return;\n\n drawPiano(ctx);\n }, []);\n\n const drawPiano = (ctx) => {\n // Clear the canvas\n ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);\n\n // Draw white keys\n notesData.forEach((note) => {\n const xPos = note.x * WHITE_KEY_WIDTH;\n ctx.fillStyle = \"white\";\n ctx.strokeStyle = \"black\";\n ctx.lineWidth = 2;\n ctx.fillRect(xPos, 0, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT);\n ctx.strokeRect(xPos, 0, WHITE_KEY_WIDTH, WHITE_KEY_HEIGHT);\n });\n\n // Draw black keys\n blackKeysData.forEach((note) => {\n const xPos = note.x * WHITE_KEY_WIDTH; // approximate position\n ctx.fillStyle = \"black\";\n ctx.fillRect(\n xPos + (WHITE_KEY_WIDTH - BLACK_KEY_WIDTH) / 2,\n 0,\n BLACK_KEY_WIDTH,\n BLACK_KEY_HEIGHT\n );\n });\n };\n\n const handlePlayNote = (frequency) => {\n if (!audioCtxRef.current) {\n audioCtxRef.current = new (window.AudioContext || window.webkitAudioContext)();\n }\n const audioCtx = audioCtxRef.current;\n const osc = audioCtx.createOscillator();\n const gainNode = audioCtx.createGain();\n\n osc.type = \"sine\";\n osc.frequency.value = frequency;\n\n osc.connect(gainNode);\n gainNode.connect(audioCtx.destination);\n\n // Attack and release\n gainNode.gain.setValueAtTime(0, audioCtx.currentTime);\n gainNode.gain.linearRampToValueAtTime(1, audioCtx.currentTime + 0.01);\n gainNode.gain.linearRampToValueAtTime(\n 0,\n audioCtx.currentTime + 0.8 // length of note\n );\n\n osc.start(audioCtx.currentTime);\n osc.stop(audioCtx.currentTime + 0.8);\n };\n\n const handleCanvasClick = (e) => {\n const canvas = canvasRef.current;\n if (!canvas) return;\n const rect = canvas.getBoundingClientRect();\n const x = e.clientX - rect.left;\n const y = e.clientY - rect.top;\n\n // Check black keys first (on top)\n for (let i = 0; i < blackKeysData.length; i++) {\n const note = blackKeysData[i];\n const keyXPos = note.x * WHITE_KEY_WIDTH + (WHITE_KEY_WIDTH - BLACK_KEY_WIDTH) / 2;\n const keyYPos = 0;\n if (\n x >= keyXPos &&\n x <= keyXPos + BLACK_KEY_WIDTH &&\n y >= keyYPos &&\n y <= keyYPos + BLACK_KEY_HEIGHT\n ) {\n handlePlayNote(note.frequency);\n return;\n }\n }\n\n // If not black key, check white keys\n for (let i = 0; i < notesData.length; i++) {\n const note = notesData[i];\n const keyXPos = note.x * WHITE_KEY_WIDTH;\n const keyYPos = 0;\n if (\n x >= keyXPos &&\n x <= keyXPos + WHITE_KEY_WIDTH &&\n y >= keyYPos &&\n y <= keyYPos + WHITE_KEY_HEIGHT\n ) {\n handlePlayNote(note.frequency);\n return;\n }\n }\n };\n\n return (\n

Canvas Piano

\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_38":39,"_40":41},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","promoteCss","disableSSR","stripModulepreloadImports","statsigGateEvaluationsPromise",["P",37],"traceId","14525412263335199075","traceTime",1779244885441]