MusikimUnterricht.de

Benutzer-Werkzeuge

Webseiten-Werkzeuge

tools:rhythmustrainer-fortgeschritten

Unterschiede

Hier werden die Unterschiede zwischen zwei Versionen der Seite angezeigt.

Link zu der Vergleichsansicht

Nächste Überarbeitung		Vorherige Überarbeitung
tools:rhythmustrainer-fortgeschritten [10/08/2025 16:07] – angelegt Eric Webertools:rhythmustrainer-fortgeschritten [12/08/2025 21:37] (aktuell) – Eric Weber
Zeile 121: Zeile 121:
         .rhythm-trainer .rhythm-notation {         .rhythm-trainer .rhythm-notation {
             font-size: 3em;             font-size: 3em;
-            font-family: 'Courier New', monospace;+            font-family: 'Times New Roman', serif;
             font-weight: bold;             font-weight: bold;
             color: #2d3748;             color: #2d3748;
Zeile 188: Zeile 188:
             color: #4a5568;             color: #4a5568;
             min-width: 80px;             min-width: 80px;
 +        }
 +
 +        .rhythm-trainer .legend {
 +            background: #f0fff4;
 +            border: 1px solid #9ae6b4;
 +            border-radius: 10px;
 +            padding: 15px;
 +            margin: 20px 0;
 +            display: flex;
 +            justify-content: space-around;
 +            flex-wrap: wrap;
 +            gap: 15px;
 +        }
 +
 +        .rhythm-trainer .legend-item {
 +            display: flex;
 +            align-items: center;
 +            gap: 8px;
 +            font-size: 14px;
 +        }
 +
 +        .rhythm-trainer .legend-symbol {
 +            font-size: 24px;
 +            font-family: 'Times New Roman', serif;
 +            font-weight: bold;
         }         }
  
Zeile 204: Zeile 229:
     <div class="rhythm-trainer" style="text-align: center">     <div class="rhythm-trainer" style="text-align: center">
         <h1>🎵 Rhythmus-Trainer</h1>         <h1>🎵 Rhythmus-Trainer</h1>
-        <h2>Fortgeschritten (Viertelnoten, Achtelnoten, Punktierte Viertelnoten)</h2>+        <h2>Fortgeschritten (Viertel- und Achtelnoten</h2>
                  
         <div class="info">         <div class="info">
             <strong>Anleitung:</strong> Klicken Sie auf "Neuen Rhythmus generieren", um einen zufälligen 4/4-Takt zu erstellen.              <strong>Anleitung:</strong> Klicken Sie auf "Neuen Rhythmus generieren", um einen zufälligen 4/4-Takt zu erstellen. 
-            Der Rhythmus kann Viertelnoten (♩), zwei Achtelnoten (♫) oder punktierte Viertelnoten mit Achtelnote (♩. ♪) enthalten. 
             Hören Sie sich den Rhythmus an und versuchen Sie ihn zu notieren. Mit "Lösung anzeigen" können Sie Ihre Antwort überprüfen.             Hören Sie sich den Rhythmus an und versuchen Sie ihn zu notieren. Mit "Lösung anzeigen" können Sie Ihre Antwort überprüfen.
 +        </div>
 +
 +        <div class="legend">
 +            <div class="legend-item">
 +                <span class="legend-symbol">♪</span>
 +                <span>Achtelnote (0,5 Schläge)</span>
 +            </div>
 +            <div class="legend-item">
 +                <span class="legend-symbol">♩</span>
 +                <span>Viertelnote (1 Schlag)</span>
 +            </div>
         </div>         </div>
  
Zeile 260: Zeile 295:
         let audioContext;         let audioContext;
         let isAudioReady = false;         let isAudioReady = false;
 +
 +        // Note types with their durations and symbols
 +        const noteTypes = [
 +            { symbol: '♪', duration: 0.5, name: 'eighth' },      // Achtelnote
 +            { symbol: '♩', duration: 1.0, name: 'quarter' },    // Viertelnote
 +        ];
  
         async function initAudio() {         async function initAudio() {
Zeile 268: Zeile 309:
         }         }
  
-        function playBeep(frequency = 800, duration = 0.2, startTime = 0) {+        function playBeep(frequency = 800, duration = 0.2, startTime = 0, volume = 0.3) {
             if (!audioContext) return;             if (!audioContext) return;
                          
Zeile 281: Zeile 322:
                          
             gainNode.gain.setValueAtTime(0, audioContext.currentTime + startTime);             gainNode.gain.setValueAtTime(0, audioContext.currentTime + startTime);
-            gainNode.gain.linearRampToValueAtTime(0.3, audioContext.currentTime + startTime + 0.01);+            gainNode.gain.linearRampToValueAtTime(volume, audioContext.currentTime + startTime + 0.01);
             gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + startTime + duration);             gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + startTime + duration);
                          
Zeile 288: Zeile 329:
         }         }
  
-        // Generate random rhythm+        // Generate random rhythm that adds up to exactly 4 beats
         function generateRhythm() {         function generateRhythm() {
             currentRhythm = [];             currentRhythm = [];
-            for (let i = 0; i < 4; i++) { +            let totalDuration = 0; 
-                // 0 = quarter note, 1 = two eighth notes, 2 = dotted quarter + eighth +            const targetDuration = 4; // 4/4 Takt 
-                const rand = Math.random(); +             
-                if (rand < 0.33) { +            // Generate rhythm until we reach exactly 4 beats 
-                    currentRhythm.push(0);  // Quarter note +            while (totalDuration < targetDuration) { 
-                } else if (rand < 0.66) { +                const remainingDuration = targetDuration - totalDuration; 
-                    currentRhythm.push(1);  // Two eighth notes +                 
-                } else { +                // Filter notes that fit in remaining time 
-                    currentRhythm.push(2);  // Dotted quarter + eighth+                const validNotes = noteTypes.filter(note => note.duration <= remainingDuration); 
 +                 
 +                if (validNotes.length === 0) { 
 +                    // If no note fits, fill with eighth notes 
 +                    while (totalDuration < targetDuration) { 
 +                        currentRhythm.push(noteTypes[0]); // Achtelnote 
 +                        totalDuration += 0.5; 
 +                    } 
 +                    break;
                 }                 }
 +                
 +                const randomNote = validNotes[Math.floor(Math.random() * validNotes.length)];
 +                currentRhythm.push(randomNote);
 +                totalDuration += randomNote.duration;
             }             }
 +            
 +            // Reset solution state
             solutionVisible = false;             solutionVisible = false;
 +            showBtn.textContent = 'Lösung anzeigen';
 +            
             playBtn.disabled = false;             playBtn.disabled = false;
             showBtn.disabled = false;             showBtn.disabled = false;
Zeile 311: Zeile 368:
         // Convert rhythm to notation         // Convert rhythm to notation
         function rhythmToNotation(rhythm) {         function rhythmToNotation(rhythm) {
-            const notation = rhythm.map(beat => { +            return rhythm.map(note => note.symbol).join('  ');
-                if (beat === 0) return '♩';           // Quarter note +
-                else if (beat === 1) return '♫';      // Two eighth notes +
-                else return '♩. ♪';                   // Dotted quarter + eighth note +
-            }).join('  '); +
-            return notation;+
         }         }
  
-        // Play rhythm+        // Play rhythm with visual beat indication
         async function playRhythm() {         async function playRhythm() {
             if (isPlaying) return;             if (isPlaying) return;
Zeile 329: Zeile 381:
                          
             const beatDuration = 60 / tempo; // Duration of one beat in seconds             const beatDuration = 60 / tempo; // Duration of one beat in seconds
-            let totalTime = 0; 
                          
-            for (let i = 0; i < currentRhythm.length; i++) { +            // Highlight beats independently (every beat for 4 beats) 
-                // Highlight current beat after delay+            for (let beat = 0; beat < 4; beat++) {
                 setTimeout(() => {                 setTimeout(() => {
-                    beats.forEach(beat => beat.classList.remove('active')); +                    beats.forEach(b => b.classList.remove('active')); 
-                    beats[i].classList.add('active'); +                    beats[beat].classList.add('active'); 
-                }, totalTime * 1000);+                }, beat * beatDuration * 1000); 
 +            } 
 +             
 +            // Play the rhythm notes 
 +            let currentTime = 0; 
 +            for (let i = 0; i < currentRhythm.length; i++) { 
 +                const note = currentRhythm[i];
                                  
-                if (currentRhythm[i] === 0) { +                // Play the note sound 
-                    // Quarter note - one beep +                playBeep(523, Math.min(note.duration * beatDuration * 0.8, 0.4), currentTime * beatDuration, 0.3);
-                    playBeep(523, 0.3, totalTime); // C5 note +
-                } else if (currentRhythm[i] === 1) { +
-                    // Two eighth notes - two shorter beeps +
-                    playBeep(523, 0.15, totalTime); // First eighth note +
-                    playBeep(523, 0.15, totalTime + beatDuration * 0.5); // Second eighth note +
-                } else { +
-                    // Dotted quarter + eighth note +
-                    playBeep(523, 0.45, totalTime); // Dotted quarter (3/4 of the beat) +
-                    playBeep(523, 0.15, totalTime + beatDuration * 0.75); // Eighth note (last 1/4 of beat) +
-                }+
                                  
-                totalTime += beatDuration;+                currentTime += note.duration;
             }             }
                          
-            // Clean up after rhythm is finished+            // Clean up after rhythm is finished (after 4 beats) 
 +            const totalTime = 4 * beatDuration;
             setTimeout(() => {             setTimeout(() => {
                 beats.forEach(beat => beat.classList.remove('active'));                 beats.forEach(beat => beat.classList.remove('active'));
Zeile 363: Zeile 411:
         }         }
  
-        // Show solution+        // Show/hide solution
         function showSolution() {         function showSolution() {
             if (!solutionVisible) {             if (!solutionVisible) {
tools/rhythmustrainer-fortgeschritten.1754834826.txt.gz · Zuletzt geändert: von Eric Weber