Voice Interface Builder Skill

I help you build voice-enabled interfaces using the Web Speech API and modern voice technologies.

What I Do

Speech Recognition:

Voice commands and controls Voice-to-text input Continuous dictation Command detection

Text-to-Speech:

Reading content aloud Voice feedback and notifications Multilingual speech output Voice selection and customization

Voice UI:

Voice-first interfaces Accessibility features Hands-free controls Voice search Web Speech API Basics Speech Recognition // hooks/useSpeechRecognition.ts 'use client' import { useState, useEffect, useRef } from 'react'

interface SpeechRecognitionOptions { continuous?: boolean language?: string onResult?: (transcript: string) => void onError?: (error: string) => void }

export function useSpeechRecognition({ continuous = false, language = 'en-US', onResult, onError }: SpeechRecognitionOptions = {}) { const [isListening, setIsListening] = useState(false) const [transcript, setTranscript] = useState('') const recognitionRef = useRef(null)

useEffect(() => { if (typeof window === 'undefined') return

const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition

if (!SpeechRecognition) {
  console.warn('Speech recognition not supported')
  return
}

const recognition = new SpeechRecognition()
recognition.continuous = continuous
recognition.lang = language
recognition.interimResults = true

recognition.onresult = event => {
  const transcript = Array.from(event.results)
    .map(result => result[0].transcript)
    .join('')

  setTranscript(transcript)
  onResult?.(transcript)
}

recognition.onerror = event => {
  console.error('Speech recognition error:', event.error)
  onError?.(event.error)
  setIsListening(false)
}

recognition.onend = () => {
  setIsListening(false)
}

recognitionRef.current = recognition

return () => {
  recognition.stop()
}

}, [continuous, language, onResult, onError])

const start = () => { if (recognitionRef.current && !isListening) { recognitionRef.current.start() setIsListening(true) } }

const stop = () => { if (recognitionRef.current && isListening) { recognitionRef.current.stop() setIsListening(false) } }

return { isListening, transcript, start, stop } }

Usage:

'use client' import { useSpeechRecognition } from '@/hooks/useSpeechRecognition'

export function VoiceInput() { const { isListening, transcript, start, stop } = useSpeechRecognition({ onResult: (text) => console.log('Recognized:', text) })

return (

{transcript}

) }

Text-to-Speech // hooks/useSpeechSynthesis.ts 'use client' import { useState, useEffect } from 'react'

export function useSpeechSynthesis() { const [voices, setVoices] = useState([]) const [speaking, setSpeaking] = useState(false)

useEffect(() => { if (typeof window === 'undefined') return

const loadVoices = () => {
  const availableVoices = window.speechSynthesis.getVoices()
  setVoices(availableVoices)
}

loadVoices()
window.speechSynthesis.onvoiceschanged = loadVoices

}, [])

const speak = ( text: string, options?: { voice?: SpeechSynthesisVoice rate?: number pitch?: number volume?: number } ) => { if (typeof window === 'undefined') return

const utterance = new SpeechSynthesisUtterance(text)

if (options?.voice) utterance.voice = options.voice
if (options?.rate) utterance.rate = options.rate // 0.1 - 10
if (options?.pitch) utterance.pitch = options.pitch // 0 - 2
if (options?.volume) utterance.volume = options.volume // 0 - 1

utterance.onstart = () => setSpeaking(true)
utterance.onend = () => setSpeaking(false)
utterance.onerror = () => setSpeaking(false)

window.speechSynthesis.speak(utterance)

}

const cancel = () => { if (typeof window !== 'undefined') { window.speechSynthesis.cancel() setSpeaking(false) } }

return { speak, cancel, speaking, voices } }

Usage:

'use client' import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis'

export function TextToSpeech() { const { speak, cancel, speaking, voices } = useSpeechSynthesis() const [text, setText] = useState('Hello, how can I help you today?')

return (

setText(e.target.value)}
        rows={4}
      /></p>
<pre class="codehilite"><code>  <button
    onClick={() => speak(text)}
    disabled={speaking}
  >
    {speaking ? 'Speaking...' : '🔊 Speak'}
  </button>

<select onChange={(e) => {
    const voice = voices.find(v => v.name === e.target.value)
    if (voice) speak(text, { voice })
  }}>
    {voices.map((voice) => (
      <option key={voice.name} value={voice.name}>
        {voice.name} ({voice.lang})
      </option>
    ))}
  </select>
</div>
</code></pre>

<p>)
}</p>
<p>Voice Commands
Command Detection
'use client'
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition'
import { useEffect } from 'react'</p>
<p>interface Command {
  phrase: string | RegExp
  action: () => void
}</p>
<p>export function VoiceCommands({ commands }: { commands: Command[] }) {
  const { isListening, transcript, start, stop } = useSpeechRecognition({
    continuous: true
  })</p>
<p>useEffect(() => {
    if (!transcript) return</p>
<pre class="codehilite"><code>const lowerTranscript = transcript.toLowerCase()

for (const command of commands) {
  if (typeof command.phrase === 'string') {
    if (lowerTranscript.includes(command.phrase.toLowerCase())) {
      command.action()
    }
  } else {
    if (command.phrase.test(lowerTranscript)) {
      command.action()
    }
  }
}
</code></pre>

<p>}, [transcript, commands])</p>
<p>return (
    <button onClick={isListening ? stop : start}>
      {isListening ? '🔴 Stop Voice Commands' : '🎤 Start Voice Commands'}
    </button>
  )
}</p>
<p>Usage:</p>
<p>export function App() {
  const commands = [
    {
      phrase: 'go home',
      action: () => router.push('/')
    },
    {
      phrase: 'open menu',
      action: () => setMenuOpen(true)
    },
    {
      phrase: 'search for',
      action: () => {
        // Extract search query after "search for"
      }
    }
  ]</p>
<p>return <VoiceCommands commands={commands} />
}</p>
<p>Voice Search
'use client'
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition'
import { useState } from 'react'</p>
<p>export function VoiceSearch() {
  const [query, setQuery] = useState('')</p>
<p>const { isListening, start, stop } = useSpeechRecognition({
    onResult: (transcript) => {
      setQuery(transcript)
    }
  })</p>
<p>const handleSearch = () => {
    if (query) {
      // Perform search with query
      console.log('Searching for:', query)
    }
  }</p>
<p>return (
    <div className="flex gap-2">
      <input
        type="text"
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search or speak..."
        className="flex-1 px-4 py-2 border rounded"
      /></p>
<pre class="codehilite"><code>  <button
    onClick={isListening ? stop : start}
    className={`px-4 py-2 rounded ${
      isListening ? 'bg-red-600 text-white' : 'bg-gray-200'
    }`}
  >
    {isListening ? '🔴' : '🎤'}
  </button>

<button
    onClick={handleSearch}
    className="px-4 py-2 bg-blue-600 text-white rounded"
  >
    Search
  </button>
</div>
</code></pre>

<p>)
}</p>
<p>Accessibility Features
Read Article Aloud
'use client'
import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis'</p>
<p>export function ReadAloudButton({ content }: { content: string }) {
  const { speak, cancel, speaking } = useSpeechSynthesis()</p>
<p>return (
    <button
      onClick={() => speaking ? cancel() : speak(content)}
      className="flex items-center gap-2 px-4 py-2 bg-blue-600 text-white rounded"
    >
      {speaking ? '⏹️ Stop Reading' : '🔊 Read Aloud'}
    </button>
  )
}</p>
<p>Voice Navigation
'use client'
import { useRouter } from 'next/navigation'
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition'
import { useEffect } from 'react'</p>
<p>export function VoiceNavigation() {
  const router = useRouter()
  const { isListening, transcript, start, stop } = useSpeechRecognition()</p>
<p>useEffect(() => {
    const lower = transcript.toLowerCase()</p>
<pre class="codehilite"><code>if (lower.includes('go to home')) router.push('/')
else if (lower.includes('go to about')) router.push('/about')
else if (lower.includes('go to contact')) router.push('/contact')
else if (lower.includes('go back')) router.back()
</code></pre>

<p>}, [transcript, router])</p>
<p>return (
    <button onClick={isListening ? stop : start}>
      {isListening ? 'Disable Voice Nav' : 'Enable Voice Nav'}
    </button>
  )
}</p>
<p>Voice Dictation
'use client'
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition'
import { useState } from 'react'</p>
<p>export function VoiceDictation() {
  const [text, setText] = useState('')</p>
<p>const { isListening, start, stop } = useSpeechRecognition({
    continuous: true,
    onResult: (transcript) => {
      setText(transcript)
    }
  })</p>
<p>return (
    <div>
      <textarea
        value={text}
        onChange={(e) => setText(e.target.value)}
        rows={10}
        className="w-full p-4 border rounded"
        placeholder="Start dictating..."
      /></p>
<pre class="codehilite"><code>  <div className="mt-4 flex gap-2">
    <button
      onClick={isListening ? stop : start}
      className={`px-4 py-2 rounded ${
        isListening ? 'bg-red-600 text-white' : 'bg-blue-600 text-white'
      }`}
    >
      {isListening ? '🔴 Stop Dictation' : '🎤 Start Dictation'}
    </button>

<button
      onClick={() => setText('')}
      className="px-4 py-2 bg-gray-200 rounded"
    >
      Clear
    </button>
  </div>
</div>
</code></pre>

<p>)
}</p>
<p>Multilingual Support
'use client'
import { useSpeechRecognition } from '@/hooks/useSpeechRecognition'
import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis'
import { useState } from 'react'</p>
<p>const languages = [
  { code: 'en-US', name: 'English (US)' },
  { code: 'es-ES', name: 'Spanish (Spain)' },
  { code: 'fr-FR', name: 'French (France)' },
  { code: 'de-DE', name: 'German (Germany)' },
  { code: 'ja-JP', name: 'Japanese' },
  { code: 'zh-CN', name: 'Chinese (Simplified)' }
]</p>
<p>export function MultilingualVoice() {
  const [language, setLanguage] = useState('en-US')
  const [text, setText] = useState('')</p>
<p>const { isListening, transcript, start, stop } = useSpeechRecognition({
    language,
    onResult: (t) => setText(t)
  })</p>
<p>const { speak } = useSpeechSynthesis()</p>
<p>return (
    <div>
      <select
        value={language}
        onChange={(e) => setLanguage(e.target.value)}
        className="px-4 py-2 border rounded"
      >
        {languages.map((lang) => (
          <option key={lang.code} value={lang.code}>
            {lang.name}
          </option>
        ))}
      </select></p>
<pre class="codehilite"><code>  <div className="mt-4">
    <button onClick={isListening ? stop : start}>
      {isListening ? '🔴 Stop' : '🎤 Speak'}
    </button>

<button onClick={() => speak(text)}>
      🔊 Read Aloud
    </button>
  </div>

<textarea
    value={text}
    onChange={(e) => setText(e.target.value)}
    rows={4}
    className="w-full mt-4 p-4 border rounded"
  />
</div>
</code></pre>

<p>)
}</p>
<p>Voice Feedback
'use client'
import { useSpeechSynthesis } from '@/hooks/useSpeechSynthesis'</p>
<p>export function useVoiceFeedback() {
  const { speak } = useSpeechSynthesis()</p>
<p>const announce = (message: string) => {
    speak(message, { rate: 1.1, volume: 0.8 })
  }</p>
<p>return {
    success: (message: string) => announce(<code>Success: ${message}</code>),
    error: (message: string) => announce(<code>Error: ${message}</code>),
    info: (message: string) => announce(message),
    confirm: (action: string) => announce(<code>${action} confirmed</code>)
  }
}</p>
<p>// Usage
export function Form() {
  const voice = useVoiceFeedback()</p>
<p>const handleSubmit = async () => {
    try {
      await submitForm()
      voice.success('Form submitted successfully')
    } catch (error) {
      voice.error('Failed to submit form')
    }
  }</p>
<p>return <form onSubmit={handleSubmit}>...</form>
}</p>
<p>When to Use Me</p>
<p>Perfect for:</p>
<p>Building voice-controlled interfaces
Adding accessibility features
Creating hands-free experiences
Implementing voice search
Building voice assistants</p>
<p>I'll help you:</p>
<p>Implement speech recognition
Add text-to-speech
Build voice commands
Support multiple languages
Create accessible voice UI
What I'll Create
🎤 Speech Recognition
🔊 Text-to-Speech
🗣️ Voice Commands
🔍 Voice Search
🌍 Multilingual Support
♿ Accessibility Features</p>
<p>Let's make your app voice-enabled!</p>
                </article>

<a href="/" class="back-link">← <span data-i18n="detail.backToLeaderboard">返回排行榜</span></a>
            </div>

<aside class="sidebar">
                <section class="related-skills" id="relatedSkillsSection">
                    <h2 class="related-title" data-i18n="detail.relatedSkills">相关 Skills</h2>
                    <div class="related-list" id="relatedSkillsList">
                        
                            
                            
                            
                            <a href="/zh-CN/skill/daffy0208/ai-dev-standards/animation-designer" class="related-card">
                                <div class="related-name">animation-designer</div>
                                <div class="related-meta">
                                    <span class="related-owner">daffy0208</span>
                                    <span class="related-installs">671</span>
                                </div>
                                <div class="related-desc">Animation Designer Skill  I help you create smooth, professi...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/daffy0208/ai-dev-standards/brand-designer" class="related-card">
                                <div class="related-name">brand-designer</div>
                                <div class="related-meta">
                                    <span class="related-owner">daffy0208</span>
                                    <span class="related-installs">481</span>
                                </div>
                                <div class="related-desc">Brand Designer Skill  I help you create cohesive brand ident...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/daffy0208/ai-dev-standards/data-visualizer" class="related-card">
                                <div class="related-name">data-visualizer</div>
                                <div class="related-meta">
                                    <span class="related-owner">daffy0208</span>
                                    <span class="related-installs">348</span>
                                </div>
                                <div class="related-desc">Data Visualizer Skill  I help you build beautiful, interacti...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/daffy0208/ai-dev-standards/video-producer" class="related-card">
                                <div class="related-name">video-producer</div>
                                <div class="related-meta">
                                    <span class="related-owner">daffy0208</span>
                                    <span class="related-installs">286</span>
                                </div>
                                <div class="related-desc">Video Producer Skill  I help you build video players, handle...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/daffy0208/ai-dev-standards/3d-visualizer" class="related-card">
                                <div class="related-name">3d-visualizer</div>
                                <div class="related-meta">
                                    <span class="related-owner">daffy0208</span>
                                    <span class="related-installs">240</span>
                                </div>
                                <div class="related-desc">3D Visualizer Skill I help you create 3D visualizations, int...</div>
                            </a>
                            
                            
                            
                            <a href="/zh-CN/skill/daffy0208/ai-dev-standards/mobile-developer" class="related-card">
                                <div class="related-name">mobile-developer</div>
                                <div class="related-meta">
                                    <span class="related-owner">daffy0208</span>
                                    <span class="related-installs">207</span>
                                </div>
                                <div class="related-desc">Mobile Developer Skill  I help you build cross-platform mobi...</div>
                            </a>
                            
                        
                    </div>
                </section>

<section class="recommended-resources">
                    <h2 class="related-title" data-i18n="detail.recommended">Recommended</h2>
                    <div class="resource-list">
                        
                        <a href="https://www.getvoxbrief.com/" target="_blank" rel="noopener" class="resource-card">
                            <div class="resource-name">VoxBrief – Deep Audio Book Walkthroughs</div>
                            <div class="resource-desc">Master any book in 15 minutes with structured audio summaries</div>
                        </a>
                        
                    </div>
                </section>
                
            </aside>
        </div>
    </div>

// Load language files (only current + fallback for performance)
        async function loadLanguageResources() {
            const savedLang = localStorage.getItem('i18nextLng') || 'en';
            const langsToLoad = new Set([savedLang, 'en']); // current + fallback
            await Promise.all([...langsToLoad].map(async (lang) => {
                try {
                    const response = await fetch(`/locales/${lang}.json`);
                    if (response.ok) {
                        resources[lang] = { translation: await response.json() };
                    }
                } catch (error) {
                    console.warn(`Failed to load ${lang} language file:`, error);
                }
            }));
        }

// Load a single language on demand (for language switching)
        async function loadLanguage(lang) {
            if (resources[lang]) return;
            try {
                const response = await fetch(`/locales/${lang}.json`);
                if (response.ok) {
                    resources[lang] = { translation: await response.json() };
                    i18next.addResourceBundle(lang, 'translation', resources[lang].translation);
                }
            } catch (error) {
                console.warn(`Failed to load ${lang} language file:`, error);
            }
        }

// Initialize i18next
        async function initI18n() {
            try {
                await loadLanguageResources();
                
                // Filter out null values from resources
                const validResources = {};
                for (const [lang, data] of Object.entries(resources)) {
                    if (data !== null) {
                        validResources[lang] = data;
                    }
                }
                
                console.log('Loaded languages:', Object.keys(validResources));
                console.log('zh-CN resource:', validResources['zh-CN']);
                console.log('detail.home in resource:', validResources['zh-CN']?.translation?.detail?.home);
                
                // 检查是否有保存的语言偏好
                const savedLang = localStorage.getItem('i18nextLng');
                // 如果没有保存的语言偏好，默认使用英文
                const defaultLang = savedLang && ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'].includes(savedLang) 
                    ? savedLang 
                    : 'en';
                
                await i18next
                    .use(i18nextBrowserLanguageDetector)
                    .init({
                        lng: defaultLang,  // 强制设置初始语言
                        fallbackLng: 'en',
                        supportedLngs: ['zh-CN', 'en', 'ja', 'ko', 'zh-TW', 'es', 'fr'],
                        resources: validResources,
                        detection: {
                            order: ['localStorage'],  // 只使用 localStorage，不检测浏览器语言
                            caches: ['localStorage'],
                            lookupLocalStorage: 'i18nextLng'
                        },
                        interpolation: {
                            escapeValue: false
                        }
                    });

console.log('i18next initialized, language:', i18next.language);
                console.log('Test translation:', i18next.t('detail.home'));

// Set initial language in selector
                const langSwitcher = document.getElementById('langSwitcher');
                langSwitcher.value = i18next.language;

// Update page language
                updatePageLanguage();

// Language switch event
                langSwitcher.addEventListener('change', async (e) => {
                    await loadLanguage(e.target.value); // load on demand
                    i18next.changeLanguage(e.target.value).then(() => {
                        updatePageLanguage();
                        localStorage.setItem('i18nextLng', e.target.value);
                    });
                });
            } catch (error) {
                console.error('i18next init failed:', error);
            }
        }

// Translation helper
        function t(key, options = {}) {
            return i18next.t(key, options);
        }

// Update all translatable elements
        function updatePageLanguage() {
            // Update HTML lang attribute
            document.documentElement.lang = i18next.language;

// Update elements with data-i18n attribute
            document.querySelectorAll('[data-i18n]').forEach(el => {
                const key = el.getAttribute('data-i18n');
                el.textContent = t(key);
            });
        }

// Copy command function
        function copyCommand() {
            const command = document.getElementById('installCommand').textContent;
            const btn = document.getElementById('copyBtn');
            
            navigator.clipboard.writeText(command).then(() => {
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            }).catch(() => {
                // Fallback for non-HTTPS
                const textArea = document.createElement('textarea');
                textArea.value = command;
                textArea.style.position = 'fixed';
                textArea.style.left = '-9999px';
                document.body.appendChild(textArea);
                textArea.select();
                document.execCommand('copy');
                document.body.removeChild(textArea);
                
                btn.textContent = t('copied');
                btn.classList.add('copied');
                setTimeout(() => {
                    btn.textContent = t('copy');
                    btn.classList.remove('copied');
                }, 2000);
            });
        }

// Initialize
        document.getElementById('copyBtn').addEventListener('click', copyCommand);
        initI18n();

// 异步加载相关 Skills
        async function loadRelatedSkills() {
            const owner = 'daffy0208';
            const skillName = 'voice-interface-builder';
            const currentLang = 'zh-CN';
            const listContainer = document.getElementById('relatedSkillsList');
            const section = document.getElementById('relatedSkillsSection');

try {
                const response = await fetch(`/api/related-skills/${encodeURIComponent(owner)}/${encodeURIComponent(skillName)}?limit=6`);
                
                if (!response.ok) {
                    throw new Error('Failed to load');
                }

const data = await response.json();
                const relatedSkills = data.related_skills || [];

if (relatedSkills.length === 0) {
                    // 没有相关推荐时隐藏整个区域
                    section.style.display = 'none';
                    return;
                }

// 渲染相关 Skills
                listContainer.innerHTML = relatedSkills.map(skill => {
                    const desc = skill.description || '';
                    const truncatedDesc = desc.length > 60 ? desc.substring(0, 60) + '...' : desc;
                    return `
                        <a href="${currentLang === 'en' ? '' : '/' + currentLang}/skill/${skill.owner}/${skill.repo}/${skill.skill_name}" class="related-card fade-in">
                            <div class="related-name">${escapeHtml(skill.skill_name)}</div>
                            <div class="related-meta">
                                <span class="related-owner">${escapeHtml(skill.owner)}</span>
                                <span class="related-installs">${skill.installs}</span>
                            </div>
                            <div class="related-desc">${escapeHtml(truncatedDesc)}</div>
                        </a>
                    `;
                }).join('');

} catch (error) {
                console.error('Failed to load related skills:', error);
                // 加载失败时显示提示或隐藏
                listContainer.innerHTML = '<div class="related-empty">暂无相关推荐</div>';
            }
        }

// HTML 转义
        function escapeHtml(text) {
            const div = document.createElement('div');
            div.textContent = text;
            return div.innerHTML;
        }

// 页面加载完成后异步加载相关 Skills
        if (document.readyState === 'loading') {
            document.addEventListener('DOMContentLoaded', loadRelatedSkills);
        } else {
            loadRelatedSkills();
        }

</script>

</body>
</html>

安装