主控页面 (GitHub Pages) - https://yourusername.github.io/music-studio/ ├── 打击乐模块 (blog1.wodemo.net) ├── 人声模块 (blog1.wodemo.net) ├── 钢琴模块 (Netlify) └── 存储模块 (Firebase免费版)

// 使用Firebase免费套餐 (每月1GB存储，5万次读写) // 1. 注册Firebase账号 (完全免费) // 2. 创建项目并获取配置 const firebaseConfig = { apiKey: "你的免费apiKey", authDomain: "你的项目.firebaseapp.com", projectId: "你的项目ID", storageBucket: "你的项目.appspot.com", messagingSenderId: "发送者ID", appId: "你的appId" }; // 初始化Firebase firebase.initializeApp(firebaseConfig); const db = firebase.firestore(); const storage = firebase.storage(); // 免费存储音乐项目 function saveMusicProject(projectData) { return db.collection('projects').add({ name: projectData.name, data: projectData, created: firebase.firestore.FieldValue.serverTimestamp() }); } // 免费存储音频文件 function uploadAudioFile(file) { return storage.ref(`audio/${Date.now()}_${file.name}`).put(file); }

// 使用免费的Web Speech API (浏览器内置，完全免费) class FreeVoiceSynthesizer { constructor() { this.synth = window.speechSynthesis; this.voices = []; // 加载可用语音 this.loadVoices(); } loadVoices() { this.voices = this.synth.getVoices(); } speak(text, options = {}) { return new Promise((resolve) => { const utterance = new SpeechSynthesisUtterance(text); // 设置语音参数 utterance.rate = options.rate || 1; utterance.pitch = options.pitch || 1; utterance.volume = options.volume || 1; // 选择中文语音 const chineseVoice = this.voices.find(voice => voice.lang.includes('zh') || voice.lang.includes('cn') ); if (chineseVoice) { utterance.voice = chineseVoice; } utterance.onend = resolve; this.synth.speak(utterance); }); } // 模拟拼音发音 async speakPinyin(pinyin, tone) { const toneMarks = {1: '¹', 2: '²', 3: '³', 4: '⁴'}; const text = `${pinyin}${toneMarks[tone] || ''}`; await this.speak(text, {rate: 0.8}); } } // 使用示例 const voiceSynth = new FreeVoiceSynthesizer(); voiceSynth.speakPinyin('ma', 1); // 播放 "ma¹"

// 使用Web Audio API (浏览器内置，完全免费) class FreeAudioEngine { constructor() { this.audioContext = new (window.AudioContext || window.webkitAudioContext)(); this.oscillators = new Map(); } // 生成免费的音调 playTone(frequency, duration = 0.5, type = 'sine') { const oscillator = this.audioContext.createOscillator(); const gainNode = this.audioContext.createGain(); oscillator.connect(gainNode); gainNode.connect(this.audioContext.destination); oscillator.frequency.value = frequency; oscillator.type = type; const now = this.audioContext.currentTime; gainNode.gain.setValueAtTime(0, now); gainNode.gain.linearRampToValueAtTime(0.3, now + 0.1); gainNode.gain.exponentialRampToValueAtTime(0.01, now + duration); oscillator.start(now); oscillator.stop(now + duration); return oscillator; } // 免费的鼓声合成 playDrumSound(type) { const frequencies = { kick: 100, snare: 200, hihat: 8000, tom1: 150, tom2: 120 }; return this.playTone(frequencies[type] || 200, 0.3, 'square'); } // 免费录音功能 async startRecording() { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); this.mediaRecorder = new MediaRecorder(stream); this.recordedChunks = []; this.mediaRecorder.ondataavailable = (event) => { if (event.data.size > 0) { this.recordedChunks.push(event.data); } }; this.mediaRecorder.start(); } stopRecording() { return new Promise((resolve) => { this.mediaRecorder.onstop = () => { const blob = new Blob(this.recordedChunks, { type: 'audio/wav' }); const url = URL.createObjectURL(blob); resolve(url); }; this.mediaRecorder.stop(); }); } }