Beatbot & StackBlitzed
ΠΡΠΈΠ²Π΅Ρ, Ρ ΡΡΡ ΠΊΠΎΠ²ΡΡΡΡΡΡ Ρ ΠΏΡΠΎΠ΅ΠΊΡΠΎΠΌ Web Audio API, ΠΏΠΎΡΡΠΎΡΠ½Π½ΠΎ Π²ΡΠ»Π΅ΡΠ°ΡΡ ΠΏΠ΅ΡΠ΅ΠΏΠΎΠ»Π½Π΅Π½ΠΈΡ Π±ΡΡΠ΅ΡΠ°, ΠΊΠ°ΠΊ ΡΠΎΠ»ΡΠΊΠΎ Π½ΠΎΠ²ΡΠΉ ΠΏΠ°ΡΡ ΡΠΈΠ½ΡΠ΅Π·Π°ΡΠΎΡΠ° ΠΊΠΈΠ΄Π°Ρ. Π’Π²ΠΎΠΈ Π±ΠΈΡΡ ΠΎΠ³ΠΎΠ½Ρ, Π½ΠΎ ΡΡΠΈ ΡΠ±ΠΎΠΈ ΠΏΠΎ ΡΠ°ΠΉΠΌΠΈΠ½Π³Ρ Π½Ρ ΠΏΡΠΎΡΡΠΎ Π·Π°Π΅Π΄Π°ΡΡ. ΠΡΡΡ ΠΊΠ°ΠΊΠΈΠ΅-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠ΅ΠΊΡΠ΅ΡΡ, ΠΊΠ°ΠΊ ΡΠ½ΠΈΠ·ΠΈΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ, Π½Π΅ ΠΏΠ΅ΡΠ΅Π³ΡΡΠΆΠ°Ρ ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ?
Π‘Π»ΡΡΠ°Π΅ΡcΡ, ΠΊΠ°ΠΊ ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΠΊΠΎΠΌΠΏΡΠΎΠΌΠΈΡΡ ΠΌΠ΅ΠΆΠ΄Ρ Π·Π°Π΄Π΅ΡΠΆΠΊΠΎΠΉ ΠΈ Π½Π°Π³ΡΡΠ·ΠΊΠΎΠΉ. ΠΠ°ΡΠ½ΠΈ Ρ ΡΠΈΠΊΡΠ°ΡΠΈΠΈ ΡΠ°ΡΡΠΎΡΡ Π΄ΠΈΡΠΊΡΠ΅ΡΠΈΠ·Π°ΡΠΈΠΈ β Π½Π΅ ΠΌΠ΅Π½ΡΠΉ Π΅Ρ Π½Π° Ρ
ΠΎΠ΄Ρ. ΠΡΠΏΠΎΠ»ΡΠ·ΡΠΉ AudioWorklet Π΄Π»Ρ ΠΊΠ°ΡΡΠΎΠΌΠ½ΠΎΠΉ DSP, ΡΡΠΎ ΡΡΡΠ΅ΠΊΡΠΈΠ²Π½Π΅Π΅, ΡΠ΅ΠΌ ScriptProcessor. ΠΠ΅ΡΠΆΠΈ bufferSize ΠΌΠΈΠ½ΠΈΠΌΠ°Π»ΡΠ½ΡΠΌ, Π½ΠΎ ΡΡΠΎΠ±Ρ Π½Π΅ Π±ΡΠ»ΠΎ ΠΏΡΠΎΠΏΡΡΠΊΠΎΠ² β 256 ΠΈΠ»ΠΈ 512 ΡΡΠΌΠΏΠ»ΠΎΠ² Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΠΏΠΎΠ΄ΠΎΠΉΡΠΈ Π½Π° Π±ΠΎΠ»ΡΡΠΈΠ½ΡΡΠ²Π΅ Π²ΠΈΠ΄Π΅ΠΎΠΊΠ°ΡΡ. ΠΠ΅ ΡΠΎΠ·Π΄Π°Π²Π°ΠΉ Π½ΠΎΠ²ΡΠ΅ ΡΠ·Π»Ρ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·, ΠΊΠΎΠ³Π΄Π° ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°Π΅ΡΡ ΠΏΡΠ΅ΡΠ΅ΡΡ; ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉ ΠΏΡΠ» ΠΈΠ»ΠΈ ΠΏΠΎΠ²ΡΠΎΡΠ½ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉ ΡΡΡΠ΅ΡΡΠ²ΡΡΡΠΈΠ΅. ΠΡΠ΅Π΄Π²Π°ΡΠΈΡΠ΅Π»ΡΠ½ΠΎ Π·Π°Π³ΡΡΠΆΠ°ΠΉ ΡΡΠΌΠΏΠ»Ρ ΡΠΈΠ½ΡΠ΅Π·Π°ΡΠΎΡΠ° ΠΈ Π΄Π΅ΡΠΆΠΈ ΠΏΡΠ» Π±ΡΡΠ΅ΡΠΎΠ² Π³ΠΎΡΠΎΠ²ΡΠΌ. Π, Π½Π°ΠΊΠΎΠ½Π΅Ρ, ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉ `resume()` ΠΈ `suspend()` Ρ AudioContext ΡΠΊΠΎΠ½ΠΎΠΌΠ½ΠΎ, Π³ΡΡΠΏΠΏΠΈΡΡΠΉ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΠ΅, ΡΡΠΎΠ±Ρ Π½Π΅ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ Π½ΠΎΠ²ΡΠ΅ ΡΠΎΠ±ΡΡΠΈΡ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΊΠ°Π΄Ρ. ΠΡΠΎ Π΄ΠΎΠ»ΠΆΠ½ΠΎ ΡΠΌΠ΅Π½ΡΡΠΈΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π±Π΅Π· ΡΠΊΠ°ΡΠΊΠΎΠ² Π½Π°Π³ΡΡΠ·ΠΊΠΈ Π½Π° ΠΏΡΠΎΡΠ΅ΡΡΠΎΡ.
ΠΡΠΈΠ²Π΅Ρ, ΠΊΡΡΡΠΎ. Π― ΡΠΆΠ΅ ΠΏΡΠΎΠ±ΠΎΠ²Π°Π» ΡΡΠΎΡ Worklet, Π½ΠΎ Π²ΡΡ ΡΠ°Π²Π½ΠΎ Π²ΠΈΠΆΡ Π·Π°ΠΌΠΈΠ½ΠΊΠΈ, ΠΊΠΎΠ³Π΄Π° Π²ΡΠ±ΠΈΡΠ°Ρ ΡΠΈΠ½ΡΠ΅Π·Π°ΡΠΎΡ. ΠΠΎΠΆΠ΅Ρ, Π΄Π΅Π»ΠΎ Π½Π΅ Π² ΡΠΎΠ·Π΄Π°Π½ΠΈΠΈ Π½ΠΎΠ΄, Π° Π² ΡΠΎΠΌ, ΠΊΠ°ΠΊ Π±ΡΡΠ΅ΡΠ½ΡΠΉ ΠΈΡΡΠΎΡΠ½ΠΈΠΊ ΡΡΠ°Π²ΠΈΡΡΡ Π² ΠΎΡΠ΅ΡΠ΅Π΄Ρ β Π²ΠΎΠ·ΠΌΠΎΠΆΠ½ΠΎ, Ρ ΡΠ»ΠΈΡΠΊΠΎΠΌ Π±ΡΡΡΡΠΎ Π·Π°Π³ΡΡΠΆΠ°Ρ Worklet. ΠΡΠ»ΠΎΠΆΡ Π»ΠΎΠ³ΠΈ Π² CSV ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΡ Π½Π° Π²ΡΠ΅ΠΌΠ΅Π½Π½ΡΠ΅ ΠΌΠ΅ΡΠΊΠΈ, Π½ΠΎ ΡΠ½Π°ΡΠ°Π»Π°, ΡΡ Π²ΠΈΠ΄Π΅Π» ΠΈΡΡ
ΠΎΠ΄Π½ΠΈΠΊ Web Audio ΠΏΠΎΠ»ΠΈΡΠΈΠ»Π»Π° Π² ΡΠΎΠΌ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΈ? Π’Π°ΠΌ, ΠΌΠΎΠΆΠ΅Ρ, ΠΊΠ°ΠΊΠ°Ρ-ΡΠΎ ΠΊΠΎΠ²Π°ΡΠ½Π°Ρ ΠΎΡΠΈΠ±ΠΊΠ° Π΄Π²ΠΎΠΉΠ½ΠΎΠ³ΠΎ ΠΏΠ»Π°Π½ΠΈΡΠΎΠ²Π°Π½ΠΈΡ. ΠΠ°ΠΌ Π½Π°Π΄ΠΎ ΡΠΎΠ±Π»ΡΠ΄Π°ΡΡ ΠΏΡΠ°Π²ΠΈΠ»Π°: Π½ΠΈΠΊΠ°ΠΊΠΈΡ
ΡΠΎΡΠΌΠ°ΡΠΈΡΠΎΠ²Π°Π½ΠΈΠΉ, Π±Π΅Π· ΡΠΈΡΠ΅. ΠΠΎΡΠ»Π΅Π΄Π½ΠΈΠΉ ΠΎΡΠ²Π΅Ρ Π²ΡΠΎΠ΄Π΅ Π½ΠΈΡΠ΅Π³ΠΎ. Π’ΠΈΡΠ΅ ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π»ΠΈ? ΠΠ΅Ρ, Π²ΡΡ Π½ΠΎΡΠΌΠ°Π»ΡΠ½ΠΎ. ΠΠΎΠ½ΡΠ», ΡΠ΄Π΅Π»Π°Ρ ΡΠ΅ΡΡ ΠΏΡΠΎΠΈΠ·Π²ΠΎΠ΄ΠΈΡΠ΅Π»ΡΠ½ΠΎΡΡΠΈ Worklet ΠΏΡΠΈ Ρ
ΠΎΠ»ΠΎΠ΄Π½ΠΎΠΌ ΡΡΠ°ΡΡΠ΅ ΠΈ Π±ΡΠ΄Ρ Π»ΠΎΠ³ΠΈΡΠΎΠ²Π°ΡΡ ΠΊΠ°ΠΆΠ΄ΡΡ ΠΏΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΡ Π² ΠΎΡΠ΅ΡΠ΅Π΄Ρ. ΠΠΎΠΆΠ΅Ρ, ΠΏΠ΅ΡΠ΅ΠΊΠ»ΡΡΠ°ΡΠ΅Π»Ρ ΠΏΡΠ΅ΡΠ΅ΡΠΎΠ² Π΄ΠΎΠ±Π°Π²Π»ΡΠ΅Ρ Π»ΠΈΡΠ½ΡΡ Π·Π°Π΄Π΅ΡΠΆΠΊΡ Π² 10 ΠΌΠΈΠ»Π»ΠΈΡΠ΅ΠΊΡΠ½Π΄ ΠΊΠ°ΠΆΠ΄ΡΠΉ ΡΠ°Π·. ΠΠΎΠΊΠ° Ρ ΡΡΡ, Π²ΡΡΠ°ΡΡ ΠΏΠΎΡΠ»Π΅Π΄Π½ΡΡ Π²Π΅ΡΡΠΈΡ ΡΠΎΠΉ ΡΡΠ°ΡΠΎΠΉ ΡΠΎΡΠΊΠΈ Node-Audio, ΠΊΠΎΡΠΎΡΡΡ Ρ Ρ
ΡΠ°Π½Ρ β ΠΌΠΎΠΆΠ΅Ρ, Π΅Ρ Π»ΠΎΠ³ΠΈΠΊΠ° ΠΎΡΠ΅ΡΠ΅Π΄ΠΈ Π²ΡΡ Π΅ΡΡ Π»ΡΡΡΠ΅, ΡΠ΅ΠΌ Ρ Π½ΠΎΠ²ΠΎΠΉ API. Π’Ρ ΠΊΠΎΠ³Π΄Π°-Π½ΠΈΠ±ΡΠ΄Ρ ΠΏΡΠΎΠ²Π΅ΡΡΠ» Π΅Ρ ΠΈΡΡ
ΠΎΠ΄Π½ΡΠΉ ΠΊΠΎΠ΄ Π½Π° ΠΏΡΠ΅Π΄ΠΌΠ΅Ρ ΡΠΊΡΡΡΠΎΠ³ΠΎ ΠΎΠ³ΡΠ°Π½ΠΈΡΠ΅Π½ΠΈΡ ΡΠΊΠΎΡΠΎΡΡΠΈ?
ΠΠ°, ΠΏΠΎΡ
ΠΎΠΆΠ΅ Π½Π° ΡΠΈΠΏΠΈΡΠ½ΡΠΉ ΠΊΠΎΡΡΠΊ Ρ Π΄Π²ΠΎΠΉΠ½ΠΎΠΉ ΠΏΠΎΡΡΠ°Π½ΠΎΠ²ΠΊΠΎΠΉ Π² ΠΎΡΠ΅ΡΠ΅Π΄Ρ. ΠΠ°Π±Π΅ΡΠΈ ΡΠ΅ΠΏΠΎΠ·ΠΈΡΠΎΡΠΈΠΉ, ΠΎΡΠΊΡΠΎΠΉ queue.js ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈ, Π½Π΅Ρ Π»ΠΈ ΡΠ°ΠΌ ΡΠΈΠ½Ρ
ΡΠΎΠ½Π½ΡΡ
Π²ΡΠ·ΠΎΠ²ΠΎΠ², ΠΊΠΎΡΠΎΡΡΠ΅ ΡΡΠ°Π±Π°ΡΡΠ²Π°ΡΡ ΠΏΡΠΈ ΠΊΠ°ΠΆΠ΄ΠΎΠΌ ΠΈΠ·ΠΌΠ΅Π½Π΅Π½ΠΈΠΈ ΠΏΠ°ΡΡΠ°. ΠΡΠ΅ ΠΏΡΠΎΠ²Π΅ΡΡ, Π½Π΅ ΡΡΠ½Π΅Ρ Π»ΠΈ worklet Π±ΡΡΠ΅ΡΡ Π² ΡΡΠ³ΠΎΠΌ ΡΠΈΠΊΠ»Π΅ β ΠΌΠΎΠΆΠ΅Ρ, Π΄ΠΎΠ±Π°Π²Ρ Π½Π΅Π±ΠΎΠ»ΡΡΡΡ ΠΏΡΠΎΠ²Π΅ΡΠΊΡ, ΡΡΠΎΠ±Ρ ΠΎΡΠΏΡΠ°Π²Π»ΡΡΡ ΡΠΎΠ»ΡΠΊΠΎ ΡΠΎΠ³Π΄Π°, ΠΊΠΎΠ³Π΄Π° ΠΎΠ±ΡΠ΅ΠΌ Π±ΡΡΠ΅ΡΠ° Π½ΠΈΠΆΠ΅ ΠΎΠΏΡΠ΅Π΄Π΅Π»Π΅Π½Π½ΠΎΠ³ΠΎ Π·Π½Π°ΡΠ΅Π½ΠΈΡ. ΠΡΠ»ΠΈ ΠΏΠΈΠΊΠΈ ΠΎΡΡΠ°Π½ΡΡΡΡ, Π·Π°ΠΏΠΈΡΠΈ ΠΌΠ΅ΡΠΊΠΈ Π²ΡΠ΅ΠΌΠ΅Π½ΠΈ Π² CSV ΠΈ ΠΏΠΎΡΠΌΠΎΡΡΠΈ, Π½Π΅Ρ Π»ΠΈ ΡΠ΅Π·ΠΊΠΈΡ
ΡΠΊΠ°ΡΠΊΠΎΠ², ΠΊΠΎΠ³Π΄Π° ΡΡΠ°Π±Π°ΡΡΠ²Π°Π΅Ρ ΡΠ΅Π»Π΅ΠΊΡΠΎΡ. Π Π°ΡΡΠΊΠ°ΠΆΠΈ, ΡΡΠΎ Π½Π°ΠΉΠ΄Π΅ΡΡ, Ρ ΡΠΌΠΎΠ³Ρ ΠΏΠΎΠΌΠΎΡΡ Π²ΡΠ»ΠΎΠ²ΠΈΡΡ ΠΊΠ°ΠΊΡΡ-Π½ΠΈΠ±ΡΠ΄Ρ ΡΠΎΠ½ΠΊΡΡ ΠΎΡΠΈΠ±ΠΊΡ.