import React, { useState, useCallback, useRef, useEffect } from "react"; import * as Tone from "tone"; var LANG = (typeof navigator !== "undefined" ? navigator.language : "ko").slice(0, 2); var T = { ko: { title: "피아노", octave: "옥타브" }, en: { title: "Piano", octave: "Octave" }, ja: { title: "ピアノ", octave: "オクターブ" }, zh: { title: "钢琴", octave: "八度" }, }; var t = T[LANG] || T.en; var WHITE_KEYS = [ { note: "C", idx: 0 }, { note: "D", idx: 2 }, { note: "E", idx: 4 }, { note: "F", idx: 5 }, { note: "G", idx: 7 }, { note: "A", idx: 9 }, { note: "B", idx: 11 }, ]; var BLACK_KEYS = [ { note: "C#", idx: 1, left: "13%" }, { note: "D#", idx: 3, left: "27%" }, { note: "F#", idx: 6, left: "56%" }, { note: "G#", idx: 8, left: "70%" }, { note: "A#", idx: 10, left: "84%" }, ]; export default function App() { var [octave, setOctave] = useState(4); var [activeKeys, setActiveKeys] = useState({}); var synthRef = useRef(null); var startedRef = useRef(false); useEffect(function() { try { synthRef.current = new Tone.PolySynth(Tone.Synth, { oscillator: { type: "triangle" }, envelope: { attack: 0.02, decay: 0.3, sustain: 0.2, release: 0.8 }, }).toDestination(); } catch(e) {} return function() { if (synthRef.current) { try { synthRef.current.dispose(); } catch(e) {} } }; }, []); var playNote = useCallback(function(note) { if (!synthRef.current) return; if (!startedRef.current) { try { Tone.start(); } catch(e) {} startedRef.current = true; } var fullNote = note + octave; try { synthRef.current.triggerAttackRelease(fullNote, "8n"); } catch(e) {} setActiveKeys(function(prev) { var n = {}; for (var k in prev) n[k] = prev[k]; n[note] = true; return n; }); setTimeout(function() { setActiveKeys(function(prev) { var n = {}; for (var k in prev) { if (k !== note) n[k] = prev[k]; } return n; }); }, 200); }, [octave]); return (

🎹 {t.title}

C{octave}

{WHITE_KEYS.map(function(key) { var isActive = activeKeys[key.note]; return ( ); })}

{BLACK_KEYS.map(function(key) { var isActive = activeKeys[key.note]; return ( ); })}

{[2, 3, 4, 5, 6].map(function(o) { return ( ); })}

); }

Piano

Piano

reviews