हमने एक DAW अपने ब्राउज़र में कैसे बनाया।

स्टैक

• React + Vite फ्रंटएंड
• ऑडियो ग्राफ के लिए Web Audio API
• कस्टम DSP के लिए AudioWorkletProcessor (ऑफ-मेन-थ्रेड)
• WebAssembly के लिए प्रदर्शन-महत्वपूर्ण DSP (कस्टम WASM बिल्ड्स)
• MessagePort + ring buffers for UI ↔ worklet communication
• Yjs for CRDT collaboration
• प्रोजेक्ट संरक्षण + सैंपल स्टोरेज के लिए IndexedDB
• WebMIDI for hardware controller input
• बाउंस/एक्सपोर्ट के लिए OfflineAudioContext

1. The audio graph

म्यूज़िक स्टूडियो में हर ट्रैक एक चेन के माध्यम से रास्ता तय करता है: इंस्ट्रूमेंट → ट्रैक FX चेन → ऑक्स सेंड → मिक्सर स्ट्रिप → मास्टर बस → लिमिटर → डेस्टिनेशन. प्रत्येक तीर एक Web Audio AudioNode कनेक्शन है।

वेब ऑडियो हमें AudioContext, GainNode, BiquadFilterNode, ConvolverNode, AnalyserNode, और दोस्त मिलाता है। ये ब्राउज़र इंजन (V8/SpiderMonkey/JSC सभी गहराई से निवेशित) द्वारा अनुकूलित हैं। मानक प्रभावों — EQ, gain automation, मूलभूत फ़िल्टरिंग — के लिए हम मूल नोड्स का उपयोग करते हैं। वे तेज़ और अच्छी तरह परीक्षण किए गए हैं।

कस्टम प्रभावों के लिए — Airwindows पोर्ट्स, हमारा सैचुरेशन, हमारा ट्रू-पीक लिमिटर — हम AudioWorkletProcessor में उतरते हैं, जो ऑडियो थ्रेड पर चलता है, जिसकी रियल-टाइम प्राथमिकता गारंटीड है, और गैर-मानक DSP के लिए सही आर्किटेक्चरल स्थान है।

class PurestDriveProcessor extends AudioWorkletProcessor {
  process(inputs, outputs) {
    const input = inputs[0];
    const output = outputs[0];
    // Airwindows PurestDrive port — ~30 LOC of saturation math
    for (let ch = 0; ch < input.length; ch++) {
      for (let i = 0; i < input[ch].length; i++) {
        const s = input[ch][i];
        // [...tape-saturation math...]
        output[ch][i] = processed;
      }
    }
    return true;
  }
}
registerProcessor('purest-drive', PurestDriveProcessor);

Worklets public/audio-worklets/*.js में शिप होते हैं और audioContext.audioWorklet.addModule(path) के माध्यम से लोड होते हैं। लोड होने के बाद, किसी भी हिस्से को उस प्रोसेसर के लिए AudioWorkletNode इनस्टेंशिएट कर सकता है। प्रोसेसिंग मुख्य थ्रेड से अलग चलती है — UI एनिमेशन ऑडियो को नहीं रोकते।

2. 5 Airwindows Tier-1 पोर्ट्स

Chris Johnson's Airwindows 2,500+ ऑडियो प्लगइन्स है, MIT-लाइसेंसित, प्रसिद्ध रूप से स्वादिष्ट DSP। हमने म्यूज़िक स्टूडियो के Wave 12 शिप के लिए AudioWorklets में 5 को ब्राउज़र में पोर्ट किया है:

• Pressure6 — ट्रांसपेरेंट कंप्रेशन जो साँस लेता है
• ToTape9 — एनालॉग टेप सैचुरेशन मॉडलिंग
• PurestDrive — कठोर उच्च आवृत्ति के बिना न्यूनतम चरण संतृप्ति
• CreamCoat — गर्मी + हार्मोनिक एक्साइटर
• NotJustAnotherDither — TPDF dither for bit-depth reduction (mastering)

प्रत्येक पोर्ट में गणित के ~30-80 LOC होते हैं एक AudioWorkletProcessor में। पोर्ट Airwindows के बिट-फॉर-बिट मैच नहीं करते (C++ और JS संख्यात्मक इंजन के बीच अलग FMA/डेनॉर्मल संभाल) लेकिन ध्वनि के रूप में मैच करते हैं। नल-टेस्ट्स आउटपुट को सोने के विपरीत ≤ -80 dBFS अवशेष रखते हैं, इसलिए DSP बदलाव पकड़े जाते हैं।

3. ट्रू-पीक लिमिटर

आधुनिक स्ट्रीमिंग प्लेटफॉर्म (Spotify, Apple Music, YouTube) ITU-R BS.1770-5 के अनुसार ट्रू-पीक लाउडनेस नॉर्मलाइज़ेशन लागू करते हैं। सैंपल पीक और इंटर-सैंपल पीक अलग-अलग चीज़ें हैं; एक सिग्नल का सैंपल-आधारित -1 dBFS पीक हो सकता है, लेकिन D/A पुनर्निर्माण के बाद 0 dBFS से अधिक हो सकता है। एक नॉन-ट्रू-पीक लिमिटर DAC में क्लिप करेगा, भले ही आपका DAW इसे साफ दिखाए।

हमारा लिमिटर पूर्ण ITU विनिर्माण को लागू करता है: 4x ओवरसैम्पलिंग, इंटर-सैम्पल-पीक डिटेक्शन, लुकआउट, सॉफ्ट-कनी रिलीज। यह AudioWorklet फॉर्म में public/audio-worklets/true-peak-limiter-processor.js के रूप में आता है।

4. ऑफ-मेन-थ्रेड कम्युनिकेशन

ऑडियो ग्राफ ऑडियो थ्रेड पर चलता है। UI मुख्य थ्रेड पर चलता है। पैरामीटर बदलाव (किसी कन को घुमाना, ट्रैक को फेड करना) UI → ऑडियो के बीच बिना ऑडियो को ग्लिच किए प्रोपेगेट करने के लिए आवश्यक है।

Web Audio का AudioParam मानक पैरामीटर्स (GainNode gain, BiquadFilterNode frequency) के लिए नेटिव रूप से संभालता है। कस्टम वर्कलेट पैरामीटर्स के लिए, हम MessagePort का उपयोग UI संदेशों के लिए संरचित क्लोनिंग के साथ करते हैं, और SharedArrayBuffer-बैक्ड रिंग बफर्स का उपयोग उच्च दर ऑटोमेशन डेटा के लिए करते हैं।

SharedArrayBuffer के लिए Cross-Origin-Opener-Policy: same-origin + Cross-Origin-Embedder-Policy: require-corp हेडर्स की आवश्यकता होती है। ये हेडर्स public/_headers में सेट किए गए हैं /soundbend + /pulse रूट्स के लिए। Tape Delay एक रिंग बफ़र का उपयोग 96kHz पर करता है ताकि मैसेज-पोर्ट लेटेंसी से बचा जा सके।

5. 5 नेटिव इंस्ट्रुमेंट्स

म्यूज़िक स्टूडियो 5 वाद्ययंत्रों के साथ आता है, सभी कस्टम:

FM सिंथ — 6-ऑपरेटर FM सिंथेसिस DX7 / Operator पर मॉडल किया गया। एल्गोरिदम विज़ुअलाइज़र + पूर्ण मॉड्यूलेशन मैट्रिक्स। UI के लिए ~800 LOC JS, वॉयस एलोकेटर के लिए ~300 LOC वर्कलेट।

वेवटेबल सिंथ — मॉर्फ-बीटवीन-टेबल सिंथेसिस। स्पेक्ट्रल वार्पिंग + यूनिसन + स्टेरियो डिट्यून। 30+ फैक्टरी वेवटेबल्स। ConvolverNode का उपयोग ऑडियो रेट पर वेवटेबल क्रॉसफेड के लिए करता है।

एनालॉग सब्ट्रैक्टिव — 2-ऑसिलेटर पॉलीसिंथ जिसमें Cytomic SVF फिल्टर हैं। Cytomic एक स्टेट-वेरिएबल फिल्टर टोपोलॉजी है जो सही आवाज़ देती है; नाइव एसवीएफ में fc > SR/6 के ऊपर एलियसिंग समस्याएँ होती हैं। Cytomic पोर्ट इसे ज़ीरो-डेले फीडबैक मैथ के माध्यम से संभालता है।

ड्रमरैक + सैम्पलर — पैड-आधारित सैम्पल प्लेबैक जिसमें प्रति-पैड पिच/फिल्टर/एम्प एनवलप्स होते हैं। सैम्पल्स IndexedDB में स्टोर होते हैं ताकि तेज़ रिकॉल हो सके। 5 जेनर-विशिष्ट फैक्टरी किट्स (बूमबैप, ट्रैप, हाउस, DNB, अफ्रोबीट)।

SeedSynth + Geist (लीगेसी ऑडियोस्टूडियो इंजन में — अब वेव 14 के बाद म्यूज़िक स्टूडियो में मर्ज किया गया) — एक आनुवंशिक पैच-जनरेटर (Synplant 2-क्लास) और एक Geist-शैली का ड्रम मशीन। ये वह प्रॉपराइटरी आईपी हैं जिन्होंने संगठन नीति को एक बड़ा मामला बनाया — हमें 30k लाइन मर्ज के माध्यम से बिट-समान व्यवहार बनाए रखना था। मर्ज के बाद 100-सीड नल-टेस्ट पास हुआ।

6. मिक्सर + ऑक्स सेंड्स

एक वास्तविक मिक्सर — सिर्फ ट्रैक पर फेडर्स नहीं बल्कि प्रत्येक ट्रैक पर FX इनसर्ट, प्री/पोस्ट-फेडर अक्स सेंड्स, मास्टर बस — एक DAW को एक सिक्वेंसर से अलग करता है। म्यूज़िक स्टूडियो का मिक्सर क्लास ~655 LOC (src/audio/mixer.js) है। प्रत्येक ट्रैक एक AudioNode ग्राफ है जिसमें इनसर्ट स्लॉट, सेंड टैप पॉइंट्स, और मीटरिंग होती है।

जटिल भाग प्री-फेडर बनाम पोस्ट-फेडर ऑक्स सेंड्स है। प्री-फेडर सेंड्स ट्रैक वॉल्यूम के बिना एक रिवर्ब बस पर जाते हैं (क्लासिक उपयोग: पैरेलल रिवर्ब जो ट्रैक फेड के बाद भी बना रहता है)। पोस्ट-फेडर स्केल ट्रैक वॉल्यूम के साथ। दोनों शिप होते हैं।

7. MIDI + WAM प्लगइन होस्ट

WebMIDI परिपक्व है — किसी भी USB-MIDI कीबोर्ड से कंट्रोलर इनपुट सीधे काम करता है। हमारा MIDI रैक (अर्पेजिएटर, स्केल, चोर्ड) कंट्रोलर और इंस्ट्रूमेंट के बीच बैठता है, नोट स्ट्रीम को बदलता है।

प्लगइन्स के लिए, हम Web Audio Modules v2 (WAM) — ब्राउज़र-नेटिव प्लगइन्स को होस्ट करते हैं। VST (25 साल का सामान्य अग्रणी) की तुलना में छोटा पारिस्थितिकी तंत्र है, लेकिन बढ़ रहा है। WAM को लोड करने के लिए getWamHost().load(wamUri) का उपयोग करें, जो एक AudioNode लौटाता है जिसे आप किसी भी चेन में डाल सकते हैं।

WAMs के लिए प्रत्येक मार्ग के लिए CSP की आवश्यकता होती है क्योंकि वे अनियंत्रित उपयोगकर्ता-प्रदान की गई JS लोड करते हैं। हमारे _headers CSP को /soundbend के लिए एक script-src अनुमति सूची के साथ संकीर्ण रूप से स्कोप करते हैं, जो जाने-माने WAM रजिस्ट्रीज़ के लिए है।

8. OfflineAudioContext के लिए बाउंस

एक्सपोर्ट OfflineAudioContext के माध्यम से चलता है — वास्तविक समय से तेज़ (या धीमा, चेन की जटिलता के अनुसार) एक स्थिर AudioBuffer पर रेंडर करता है, फिर हमारे ब्राउज़र-आधारित एन्कोडर के माध्यम से WAV में एन्कोड करता है।

कैच: OfflineAudioContext में सभी नोड्स काम नहीं करते। MediaStreamAudioSourceNode काम नहीं करता (स्पष्ट रूप से लाइव माइक को ऑफ़लाइन रिकॉर्ड नहीं कर सकता)। कुछ वर्कलेट्स को ऑनलाइन → ऑफ़लाइन संक्रमण के बीच सावधानीपूर्वक राज्य-रीसेट की आवश्यकता होती है। हमें इसके बारे में बार-बार सामना करना पड़ा और अब Mixer.toJSON() + Mixer.fromJSON(offlineCtx) मानक पैटर्न है: मिक्सर स्थिति को सीरियलाइज़ करें, ऑफ़लाइन संदर्भ पर एक समान मिक्सर फिर से बनाएँ, रेंडर करें।

9. Yjs के माध्यम से सहयोग

Yjs एक CRDT लाइब्रेरी है जो बिना हस्तक्षेप के बहु-उपयोगकर्ता सहयोगात्मक संपादन का प्रबंधन करती है। हमारा SoundbendSession क्लास Yjs को प्रत्येक ट्रैक दस्तावेज़ संरचना के साथ लपेटता है (Y.Map ट्रैक मेटाडेटा के लिए, Y.Array पैटर्न स्टेप्स के लिए, Y.Text लिरिक्स/नोट्स के लिए)।

दो से चार उत्पादक एक ही प्रोजेक्ट को सैंपल-सटीक ट्रैक सिंक के साथ एक साथ संपादित कर सकते हैं। यह टेक्स्ट-डॉक सहयोग से कठिन है क्योंकि ऑडियो डेटा का आकार क्रमों के आदेश में बड़ा होता है — हम Yjs के माध्यम से मेटाडेटा + पैटर्न साझा करते हैं, कच्चा ऑडियो नहीं। कच्चे सैंपल्स स्थानीय रहते हैं (प्रत्येक उपयोगकर्ता के लिए IndexedDB)।

10. परफॉर्मेंस बजट

ब्राउज़र में पूर्ण DAW चलाना, 60fps UI + रियल-टाइम ऑडियो + SharedArrayBuffer + WASM + कई वर्कलेट्स के साथ, संकीर्ण बजट की आवश्यकता होती है। कुछ आंकड़े:

• ऑडियो थ्रेड: ~2ms / 48kHz पर 128-सैंपल बफर (सब-फ्रेम)
• मुख्य थ्रेड: 16.6ms / 60fps फ्रेम; ऑडियो हैंडलिंग को प्रति फ्रेम <1ms से कम रहना चाहिए
• Worklet setup: one-time cost ~10-50ms per worklet load (ship 15+ worklets — we batch)
• SharedArrayBuffer आवंटन: प्रत्येक डायनामिक वर्कलेट पैरामीटर के लिए 4KB रिंग बफर
• म्यूज़िक स्टूडियो चंक साइज़ (पोस्ट-कंसोलिडेशन): ~496 KB रॉ, ~120 KB gzip
• पूर्ण प्रोजेक्ट लोड (कोल्ड): मध्यम-श्रेणी के लैपटॉप पर ~800ms
• एक्सपोर्ट रेंडर: प्रभाव चेन की जटिलता के आधार पर लगभग 0.3x से 2x तक रियलटाइम

11. नल-टेस्ट हार्नेस

DSP रेग्रेशन्स शांत होते हैं — ऑडियो कोड रिव्यू से पकड़ा नहीं जा सकता है, लेकिन सूक्ष्म तरीके से अलग लगता है। म्यूज़िक स्टूडियो में tests/audio-null/ में Puppeteer-चालित नल-टेस्ट हैंच शिप किया गया है।

प्रत्येक प्रभाव × प्रीसेट × परीक्षण सिग्नल के लिए, हैरेस ने OfflineAudioContext का उपयोग करके हेडलेस Chromium में रेंडर किया, परिणामी WAV को एक संवेदनशील सुनिश्चित गोल्डन के विरुद्ध नल-टेस्ट किया, और यदि अवशिष्ट चोटी -60 dBFS से अधिक है तो बिल्ड फेल कर दी।

Wave 14F में 100 SeedSynth सीड बेसलाइन और 32 Geist ड्रम-पैटर्न गोल्डन जोड़े गए। जब हमने म्यूज़िक स्टूडियो को AudioStudio (Wave 14B-G) में मर्ज किया, तो नल-टेस्ट ने किसी भी ऐसे काम को पकड़ा जो साइलेंटली ब्रेक करता। 100 में से 96 SeedSynth सीड्स बिट-आइडेंटिकल पास करे। 4 फेल पहले से मौजूद Chromium Web Audio क्वेरी थे (high-Q फ़िल्टर रेज़ोनेंस ड्रिफ्ट OfflineAudioContext इंस्टेंस के बीच) — मर्ज रेग्रेशन नहीं, और JS से फिक्स नहीं किया जा सकता।

12. ब्राउज़र + क्लाइंट-साइड का चुनाव सही था

नेटिव DAWs के पास 30 साल का सामान्य अग्रिम है। उनके साथ फीचर-फॉर-फीचर बाजी मारना लंबा सफर है। लेकिन कीमत — यह तुरंत जीती जा सकती थी अलग आर्किटेक्चरल बेट्स करके।

वेबएसम्बली का परफॉर्मेंस थ्रेशोल्ड 2022-2024 में पार कर गया। वेब ऑडियो ऑडियोवर्कलेट्स उसी समय व्यापक रूप से लॉन्च हुए। SharedArrayBuffer + COOP/COEP स्थिर हो गया। क्रोमियम + फायरफॉक्स + सफारी सभी आवश्यक API को उचित परफॉर्मेंस के साथ सपोर्ट करते हैं।

मूल्य निर्धारण का प्रभाव: अगर ऑडियो प्रोसेसिंग उपयोगकर्ता के डिवाइस पर चलती है, तो हमें इसके लिए भुगतान नहीं करना पड़ता। हमारा प्रति प्रो सब्सक्राइबर सीमांत लागत लगभग शून्य है।

मैनिफेस्टो पढ़ें जहाँ अर्थव्यवस्था के बारे में बताया गया है। DSP के लिए, यह सबसे ज्यादा कहानी है।

आजमाएँ

म्यूज़िक स्टूडियो morph.cool/music-studio पर है। फ्री टियर साइनअप के बिना काम करता है। WebMIDI कीबोर्ड स्वागत योग्य है, आवश्यक नहीं।