测试

 

// 創建 AudioContext (處理所有音效) const audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // 預設音量控制：控制整體音量不要太大聲 (0.3 為適中偏小) const masterGain = audioCtx.createGain(); masterGain.gain.value = 0.3; masterGain.connect(audioCtx.destination); // ========================================== // 1. 閃電聲音效 (使用白噪音 + 快速衰減，模擬雷擊) // ========================================== function playLightningSound() { const bufferSize = audioCtx.sampleRate * 1.0; // 1秒長度 const buffer = audioCtx.createBuffer(1, bufferSize, audioCtx.sampleRate); const data = buffer.getChannelData(0); // 生成白噪音 for (let i = 0; i < bufferSize; i++) { data[i] = Math.random() * 2 - 1; } const noise = audioCtx.createBufferSource(); noise.buffer = buffer; const filter = audioCtx.createBiquadFilter(); filter.type = 'lowpass'; filter.frequency.value = 1000; // 低通濾波，保留悶雷聲 const gainNode = audioCtx.createGain(); noise.connect(filter); filter.connect(gainNode); gainNode.connect(masterGain); const now = audioCtx.currentTime; // 模擬閃電的突發感 gainNode.gain.setValueAtTime(0, now); gainNode.gain.linearRampToValueAtTime(0.6, now + 0.01); gainNode.gain.exponentialRampToValueAtTime(0.001, now + 0.8); noise.start(now); noise.stop(now + 1); } // ========================================== // 2. 飛碟音效 (具備漸強與漸弱的空間感) // ========================================== function playUFOSound(isArriving, duration = 3) { const osc = audioCtx.createOscillator(); osc.type = 'sawtooth'; // 鋸齒波，適合營造科幻感 const gainNode = audioCtx.createGain(); const filter = audioCtx.createBiquadFilter(); filter.type = 'lowpass'; osc.connect(filter); filter.connect(gainNode); gainNode.connect(masterGain); const now = audioCtx.currentTime; // 飛碟的頻率滑移 (營造嗡嗡聲) osc.frequency.setValueAtTime(100, now); osc.frequency.exponentialRampToValueAtTime(600, now + duration); filter.frequency.setValueAtTime(500, now); filter.frequency.exponentialRampToValueAtTime(2500, now + duration); if (isArriving) { // 飛碟到來：聲音由小變大 gainNode.gain.setValueAtTime(0.001, now); gainNode.gain.exponentialRampToValueAtTime(0.2, now + duration); } else { // 飛碟離開：聲音由大變小 gainNode.gain.setValueAtTime(0.2, now); gainNode.gain.exponentialRampToValueAtTime(0.001, now + duration); } osc.start(now); osc.stop(now + duration); } // ========================================== // 3. 英語語音合成 (最純正的英語發音) // ========================================== function speakBlessing() { // 英文祝福語句 const text = "Wishing Global Health Pharmacy great success and a bright future!"; const utterance = new SpeechSynthesisUtterance(text); utterance.lang = 'en-US'; // 設定美式英語 utterance.rate = 0.85; // 語速稍慢，顯得更加莊重與慈祥 utterance.pitch = 1.0; // 正常音調 utterance.volume = 0.6; // 控制藥師說話音量 // 優先挑選作業系統中較高級、自然的 Google 或系統原生英文男聲/女聲 const voices = speechSynthesis.getVoices(); const englishVoice = voices.find(v => v.lang.startsWith('en') && v.name.includes('Google')) || voices.find(v => v.lang.startsWith('en')); if (englishVoice) { utterance.voice = englishVoice; } window.speechSynthesis.speak(utterance); } // ========================================== // 4. 動畫與聲音時間軸控制整合 // ========================================== function startAnimationWithSound() { // 步驟 A: 觸發閃電 playLightningSound(); // 步驟 B: 延時 1 秒後，飛碟漸漸到來 (歷時 3 秒) setTimeout(() => { playUFOSound(true, 3); }, 1000); // 步驟 C: 延時 4.5 秒後，白袍藥師走下並獻上英語祝福 setTimeout(() => { speakBlessing(); }, 4500); // 步驟 D: 延時 9 秒後，飛碟漸漸離開 (歷時 3 秒) setTimeout(() => { playUFOSound(false, 3); }, 9000); } // ⚠️ 注意：現代瀏覽器有安全隱私機制，聲音必須經由使用者手動點擊觸發 (例如按鈕) document.getElementById('playButton').addEventListener('click', () => { // 解鎖 AudioContext if (audioCtx.state === 'suspended') { audioCtx.resume(); } // 執行帶有音效的完整動畫 startAnimationWithSound(); });