[{"_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":29,"_34":12,"_35":12,"_36":12,"_37":29,"_38":-5,"_39":40},"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","68ebbf54f62081918f4555933c3244f9","versionInt","title","Intonační Trenažér Zpěvu – Zuš (react + Tone","type","code/react","content","import React, { useEffect, useMemo, useRef, useState } from \"react\";\nimport * as Tone from \"tone\";\nimport { Play, Square, Dice5, Volume2, VolumeX, Timer, Music2 } from \"lucide-react\";\nimport { Button } from \"@/components/ui/button\";\nimport { Card, CardContent, CardHeader, CardTitle } from \"@/components/ui/card\";\nimport { Slider } from \"@/components/ui/slider\";\nimport { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from \"@/components/ui/select\";\n\n// ------------------------------------------------------------\n// INTONAČNÍ TRENAŽÉR ZPĚVU (7–15 let)\n// Funkce: Aplikace přehraje motiv, počká 5 s, poté přehraje další motiv.\n// Možnosti: Volba tóniny (dur/moll), rozsahu (c1–c2), délky motivu.\n// UI: hravé, jednoduché, s vizualizací klaviatury a názvů tónů.\n// ------------------------------------------------------------\n\n// Pomocné: převod mezi MIDI a názvy tónů (české značení s H)\nconst NOTE_NAMES_CZ = [\"c\", \"cis\", \"d\", \"dis\", \"e\", \"f\", \"fis\", \"g\", \"gis\", \"a\", \"b\", \"h\"];\n\nfunction midiToNameCZ(midi) {\n const octave = Math.floor(midi / 12) - 1; // MIDI 60 -> oktáva 4\n const pc = midi % 12;\n const base = NOTE_NAMES_CZ[pc];\n // české značení oktáv: kontra C (C1) ... c1 (C4) atd. Zde pro jednoduchost: c1 = C4 = MIDI 60\n const humanOct = octave; // zobrazíme jako číslo oktávy (např. c4)\n return `${base}${humanOct}`;\n}\n\n// Rozsah c1–c2 => MIDI 60–72 včetně\nconst MIDI_MIN = 60;\nconst MIDI_MAX = 72;\n\n// Stupnice dur/moll (půltóny)\nconst MAJOR_STEPS = [0, 2, 4, 5, 7, 9, 11, 12];\nconst NAT_MINOR_STEPS = [0, 2, 3, 5, 7, 8, 10, 12];\n\n// Podle zvolené tóniny (kořen v MIDI) a typu vrací pole povolených MIDI tónů v rozsahu\nfunction buildScalePitches(rootMidi, type) {\n const steps = type === \"moll\" ? NAT_MINOR_STEPS : MAJOR_STEPS;\n const allowed = new Set();\n // v rámci rozsahu generujeme více oktáv\n for (let base = MIDI_MIN - 24; base <= MIDI_MAX + 24; base += 12) {\n for (const s of steps) {\n const m = rootMidi + s + (base - rootMidi);\n if (m >= MIDI_MIN && m <= MIDI_MAX) allowed.add(m);\n }\n }\n return Array.from(allowed).sort((a, b) => a - b);\n}\n\n// Zvolené kořeny (dur/moll) – kořen definujeme jako C4 (60) + posun půltónů\nconst KEYS = [\n { id: \"C\", offset: 0 },\n { id: \"C#\", offset: 1 },\n { id: \"D\", offset: 2 },\n { id: \"Eb\", offset: 3 },\n { id: \"E\", offset: 4 },\n { id: \"F\", offset: 5 },\n { id: \"F#\", offset: 6 },\n { id: \"G\", offset: 7 },\n { id: \"Ab\", offset: 8 },\n { id: \"A\", offset: 9 },\n { id: \"Bb\", offset: 10 },\n { id: \"B(H)\", offset: 11 },\n];\n\n// Jednoduchá vizualizace klaviatury v rozsahu c1–c2\nfunction Piano({ activeNotes = [] }) {\n const keys = useMemo(() => {\n const arr = [];\n for (let m = MIDI_MIN; m <= MIDI_MAX; m++) {\n const pc = m % 12;\n const isBlack = [1, 3, 6, 8, 10].includes(pc);\n arr.push({ midi: m, isBlack });\n }\n return arr;\n }, []);\n\n return (\n

\n {/* White keys layer */}\n

\n {keys.filter(k => !k.isBlack).map(k => (\n \n ))}\n

\n {/* Black keys layer */}\n

\n {keys.map((k, idx) => {\n if (!k.isBlack) return

;\n return (\n

\n );\n })}\n

\n );\n}\n\nexport default function IntonacniTrenazerZpevu() {\n const [isRunning, setIsRunning] = useState(false);\n const [volume, setVolume] = useState(-8);\n const [keyId, setKeyId] = useState(\"C\");\n const [mode, setMode] = useState(\"dur\"); // dur | moll\n const [motifLen, setMotifLen] = useState(4); // 2–6\n const [bpm, setBpm] = useState(80);\n const [gapSeconds, setGapSeconds] = useState(5); // požadováno zadáním\n const [activeNotes, setActiveNotes] = useState([]);\n const [currentMotif, setCurrentMotif] = useState([]);\n\n const synthRef = useRef(null);\n const loopRef = useRef(null);\n const stopTimeoutRef = useRef(null);\n\n // Inicializace synťáku\n useEffect(() => {\n const synth = new Tone.PolySynth(Tone.Synth, {\n oscillator: { type: \"triangle\" },\n envelope: { attack: 0.01, decay: 0.1, sustain: 0.2, release: 0.2 },\n }).toDestination();\n const vol = new Tone.Volume(volume).toDestination();\n synth.connect(vol);\n synthRef.current = { synth, vol };\n Tone.Transport.bpm.value = bpm;\n return () => {\n synth.dispose();\n vol.dispose();\n };\n }, []);\n\n useEffect(() => {\n if (synthRef.current?.vol) synthRef.current.vol.volume.rampTo(volume, 0.05);\n }, [volume]);\n\n useEffect(() => {\n Tone.Transport.bpm.rampTo(bpm, 0.2);\n }, [bpm]);\n\n // Vytvoření nového motivu\n const generateMotif = () => {\n const key = KEYS.find(k => k.id === keyId) || KEYS[0];\n const rootC4 = 60; // C4\n const root = rootC4 + key.offset; // kořen v oktávě 4\n const pool = buildScalePitches(root, mode);\n\n const motif = [];\n let prev = null;\n for (let i = 0; i < motifLen; i++) {\n // vyhneme se velkým skokům po sobě, preferujeme krok – tercie\n const candidates = pool.filter(m => {\n if (prev == null) return true;\n const dist = Math.abs(m - prev);\n return dist <= 5; // do kvarty včetně\n });\n const pickFrom = candidates.length ? candidates : pool;\n const note = pickFrom[Math.floor(Math.random() * pickFrom.length)];\n motif.push(note);\n prev = note;\n }\n setCurrentMotif(motif);\n return motif;\n };\n\n // Přehrát motiv (čtvrťové noty na zadané BPM)\n const playMotif = async (motif) => {\n await Tone.start();\n const { synth } = synthRef.current;\n setActiveNotes([]);\n\n const now = Tone.now();\n const beatDur = 60 / bpm; // délka čtvrťové\n\n motif.forEach((m, i) => {\n const t = now + i * beatDur;\n const freq = Tone.Frequency(m, \"midi\").toFrequency();\n synth.triggerAttackRelease(freq, beatDur * 0.95, t);\n // vizuální zvýraznění klávesy\n setTimeout(() => setActiveNotes([m]), (i * beatDur) * 1000);\n });\n\n // vypnout zvýraznění po doznění poslední noty\n const total = motif.length * beatDur;\n setTimeout(() => setActiveNotes([]), total * 1000 + 50);\n };\n\n // Hlavní smyčka: přehraj motiv -> čekej gapSeconds -> generuj další -> opakuj\n const start = async () => {\n if (isRunning) return;\n setIsRunning(true);\n\n const cycle = async () => {\n if (!isRunningRef.current) return;\n const motif = generateMotif();\n await playMotif(motif);\n // čekej gapSeconds a spusť znovu\n stopTimeoutRef.current = setTimeout(cycle, gapSeconds * 1000);\n };\n\n // ref pro aktuální stav (uvnitř callbacku)\n isRunningRef.current = true;\n await cycle();\n };\n\n const stop = () => {\n isRunningRef.current = false;\n setIsRunning(false);\n if (stopTimeoutRef.current) clearTimeout(stopTimeoutRef.current);\n setActiveNotes([]);\n };\n\n const isRunningRef = useRef(false);\n\n // Jednorázové přehrání nového motivu (bez zapnutí smyčky)\n const playOnce = async () => {\n const motif = generateMotif();\n await playMotif(motif);\n };\n\n // Rychlé legendy názvů aktuálního motivu\n const motifNames = currentMotif.map(midiToNameCZ).join(\" – \");\n\n return (\n

\n Intonační trenažér zpěvu (c1–c2)\n

\n {!isRunning ? (\n \n ) : (\n \n )}\n \n

\n\n \n \n Nastavení cvičení\n \n \n

\n Tónina\n

\n \n \n

\n\n

\n \n BPM (tempo)\n \n

\n setBpm(v[0])} className=\"w-48\" />\n

{bpm}

\n\n

\n Délka motivu (počet tónů)\n

\n setMotifLen(v[0])} className=\"w-48\" />\n

{motifLen}

\n\n

\n \n Hlasitost {volume <= -48 ? : }\n \n

\n setVolume(v[0])} className=\"w-48\" />\n

{volume} dB

\n\n

\n \n Pauza mezi motivy \n \n

\n setGapSeconds(v[0])} className=\"w-48\" />\n

{gapSeconds}s

\n \n \n\n \n \n Vizualizace (c1–c2)\n \n \n \n

\n Aktuální motiv: {currentMotif.length ? motifNames : \"(zatím nic)\"}\n

\n \n \n\n \n

\n );\n}\n","access","public","isModerationBlocked","isAnonifyApiKeyDetected","dd",{"_41":42,"_43":44},"disablePrefetch",true,"shouldPrefetchAccount","shouldPrefetchUser","shouldPrefetchSystemHints","manageRootRouteStylesheet","mobileWebHandoffEnabled","promoteCss","disableSSR","stripModulepreloadImports","paidCampaignAppRedirect","statsigGateEvaluationsPromise",["P",40],"traceId","10388347943693004533","traceTime",1791155848947]