Index.html

Aperta
  • Qualcosa non va?
#10,570 0 commenti 0 reazioni 0 assegnatari Vedi su GitHub

I maintainer di solito rispondono entro 1 giorno

Nessuno ha ancora preso questa issue.

Valutazione

Difficoltà
4/5
Tempo stimato
Più di una settimana
Idoneità per principianti
8/100
Tipo di issue
Documentazione
Chiarezza
Da chiarire
Stato di attività
Attiva
Stack tecnologico
html, javascript
Ambito
documentation

Direzione di ricerca

The body is a complete standalone page, a VocalKey Pro guided-mode app with an inline script block that loads Tone.js from a CDN, and it names no file in this repository. Nothing in the text asks for a change, so the first step is to ask the author what they want changed here. Done would be a scoped request that names a file in microsoft/vscode-docs.

Scritto dal modello di indicizzazione a partire dal testo della issue.

Descrizione

<title>VocalKey Pro - Modo Guiado</title> <script src="https://cdnjs.cloudflare.com/ajax/libs/tone/14.8.49/Tone.js"></script> <style> * { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } body { margin: 0; padding: 12px; background: #0b0e14; color: #fff; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; display: flex; flex-direction: column; height: 100vh; justify-content: space-between; } header { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; background: #161b22; border-radius: 8px; border: 1px solid #30363d; } header h2 { margin: 0; font-size: 1rem; color: #58a6ff; } 
.status-badge {
  font-size: 0.75rem; padding: 4px 8px; border-radius: 4px; background: #21262d; color: #8b949e;
}
.status-badge.recording { background: #da3633; color: #fff; animation: pulse 1s infinite; }
@keyframes pulse { 0% { opacity: 1; } 50% { opacity: 0.5; } 100% { opacity: 1; } }

/* Painel do Modo Guiado */
.guided-panel {
  background: #161b22; padding: 12px; border-radius: 8px; border: 1px solid #30363d;
  text-align: center; margin: 8px 0;
}
.btn-rec {
  width: 100%; padding: 14px; background: #238636; color: #fff; border: none;
  border-radius: 8px; font-weight: bold; font-size: 0.95rem; cursor: pointer;
}
.btn-rec.active { background: #da3633; }

/* Grid de Efeitos & Ritmo */
.pads-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px;
}
.pad {
  background: #21262d; border: 1px solid #30363d; border-radius: 6px;
  height: 50px; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: bold; color: #c9d1d9; text-align: center;
}
.pad:active { background: #d2a8ff; color: #000; }
.pad.active-groove { background: #238636; color: #fff; }

/* Teclado Virtual */
.keyboard {
  height: 140px; background: #000; border-radius: 8px; display: flex; position: relative;
  overflow: hidden; border: 1px solid #30363d;
}
.m-key {
  flex: 1; background: #f0f6fc; border: 1px solid #000; border-radius: 0 0 4px 4px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  color: #000; font-size: 0.6rem; font-weight: bold;
}
.m-key.black {
  background: #161b22; color: #fff; height: 60%; width: 7%; position: absolute; z-index: 2;
}
.m-key.active { background: #58a6ff !important; }
</style>

🎤 VocalKey — IA Guiada

Pronto 🔴 Gravar Voz (3 Segundos)

Cante um trecho curto. A IA irá processar e criar o acompanhamento de piano.

▶ GROOVE (Bateria) FX: REVERB FX: DELAY ACORDE DÓ <script> let synth, kick, snare; let isRecording = false; let isGrooving = false; let drumLoop; // Inicialização do sintetizador function initAudio() { if (!synth) { Tone.start(); synth = new Tone.PolySynth(Tone.Synth, { oscillator: { type: 'triangle' }, envelope: { attack: 0.005, decay: 1, sustain: 0.4, release: 1.2 } }).toDestination(); kick = new Tone.MembraneSynth().toDestination(); snare = new Tone.NoiseSynth({ envelope: { attack: 0.001, decay: 0.2, sustain: 0 } }).toDestination(); } } // Gravação Guiada (3 Segundos) const btnRecord = document.getElementById('btnRecord'); const statusBadge = document.getElementById('statusBadge'); const infoText = document.getElementById('infoText'); btnRecord.onclick = async () => { initAudio(); if (isRecording) return; try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); isRecording = true; btnRecord.classList.add('active'); btnRecord.textContent = '🎙️ A Ouvir... Cante Agora!'; statusBadge.textContent = 'A Gravar'; statusBadge.classList.add('recording'); setTimeout(() => { // Para a captura stream.getTracks().forEach(track => track.stop()); isRecording = false; btnRecord.classList.remove('active'); btnRecord.textContent = '⚡ A Processar IA...'; statusBadge.textContent = 'A Analisar'; statusBadge.classList.remove('recording'); // Simula a análise harmónica da voz e toca o acompanhamento setTimeout(() => { btnRecord.textContent = '🔴 Gravar Voz (3 Segundos)'; statusBadge.textContent = 'Acompanhando'; infoText.textContent = 'IA: Tom detetado (Dó Maior). A tocar acompanhamento...'; playAccompaniment(); }, 1000); }, 3000); } catch (err) { alert('Permissão de microfone necessária para o modo guiado.'); } }; // Toca acompanhamento automático de piano function playAccompaniment() { const now = Tone.now(); synth.triggerAttackRelease(['C4', 'E4', 'G4', 'B4'], '1n', now); synth.triggerAttackRelease(['A3', 'C4', 'E4', 'G4'], '1n', now + 1.5); synth.triggerAttackRelease(['F3', 'A3', 'C4', 'E4'], '1n', now + 3); } function playChord(chord) { initAudio(); if (chord === 'C') synth.triggerAttackRelease(['C4', 'E4', 'G4'], '2n'); } function toggleGroove() { initAudio(); isGrooving = !isGrooving; const btn = document.getElementById('btnGroove'); if (isGrooving) { btn.classList.add('active-groove'); btn.textContent = '⏹ PARAR'; let step = 0; drumLoop = Tone.Transport.scheduleRepeat((time) => { if (step % 2 === 0) kick.triggerAttackRelease('C1', '8n', time); if (step % 4 === 2) snare.triggerAttackRelease('8n', time); step = (step + 1) % 4; }, '4n'); Tone.Transport.start(); } else { btn.classList.remove('active-groove'); btn.textContent = '▶ GROOVE'; if (drumLoop) Tone.Transport.clear(drumLoop); Tone.Transport.stop(); } } function triggerFX(type) { navigator.vibrate && navigator.vibrate(30); } // Teclado const keyboardEl = document.getElementById('mobileKeyboard'); const notes = [ {note: 'C4', type: 'white', left: 0}, {note: 'C#4', type: 'black', left: 12}, {note: 'D4', type: 'white', left: 14}, {note: 'D#4', type: 'black', left: 26}, {note: 'E4', type: 'white', left: 28}, {note: 'F4', type: 'white', left: 42}, {note: 'F#4', type: 'black', left: 54}, {note: 'G4', type: 'white', left: 56}, {note: 'G#4', type: 'black', left: 68}, {note: 'A4', type: 'white', left: 70}, {note: 'A#4', type: 'black', left: 82}, {note: 'B4', type: 'white', left: 84} ]; notes.forEach(n => { const key = document.createElement('div'); key.className = `m-key ${n.type}`; if (n.type === 'black') key.style.left = `${n.left}%`; key.textContent = n.note.replace('4',''); key.addEventListener('touchstart', (e) => { e.preventDefault(); initAudio(); synth.triggerAttack(n.note); key.classList.add('active'); }); key.addEventListener('touchend', (e) => { e.preventDefault(); synth.triggerRelease(n.note); key.classList.remove('active'); }); keyboardEl.appendChild(key); }); </script>
Lingua principale
Markdown
Stelle
6.7k
Fork
5.8k
Merge medio
18h 28m
PR unite (30g)
108

Preparare l'ambiente

Apri in Codespaces

Avvia il container di sviluppo del progetto nel browser, con il tuo account GitHub.

Come iniziare

  1. Leggi tutta la issue e poi la guida ai contributi del progetto.
  2. Commenta sulla issue per dire che te ne occupi tu — evita che due persone facciano lo stesso lavoro.
  3. Fai un fork del repository e lavora su un branch.
  4. Apri una pull request che faccia riferimento al numero della issue.

Altre issue di microsoft/vscode-docs

Tutte le issue di microsoft/vscode-docs

Issue simili

Altre issue su Documentation

Ricevi le nuove issue nella tua casella

Un breve riepilogo di issue GitHub adatte ai principianti.