Recreating the Dialup Modem

Remember this?

When loading was fun

Who am I?

What is sound?

What is data?


How do we get data into audio?



An Encoding Problem!

Humans are good at encoding data.

Communication breaks down when you don't speak the language

Language is data encoding for speech

How do computers speak?

Computers need a language and a way to "verbalize".

How do we do this?

History Time.

Communication Needed

  • Fast transmission.
  • Something Easy to use.
  • Something Cheap to implement.


Coded Signals Line of Sight

Optical Telegraph 


Both sides need to know the code


Claude Chappe



Morse Code

Pioneered by Samuel Morse




Electrical Signals over a wire.


Both sides needed to be trained in morse code.




Baudot Code

Invented by Émile Baudot




5 bit code to send letters

Multiplexed transmissions

Chorded Keyboard


"Baud" Comes from Baudot

Multiplex like it is 1855

🔥240 baud


Alexander Bell


Harmonic Telegraph / 

Audible Telegraphy 




Allowed 10 signals on a 1 telegram line.


Audible Multiplexing

How is data encoded into audio?


By Frequency Shifting a Key we can encode state.


Audio Frequency Shift






Non-Skilled operators on both ends, uses Baudot Murray encoding. Enabled typing and receiving on both ends.


Existing Medium

  • Intended to carry speech
  • "hacked" to carry data
  • AFSK work(s)(ed) on existing infrastructure.





Connect teleprinters over regular phone lines.


Demodulates and Modulates data to be sent over standard lines.

Recreating a Modem in the Browser with JavaScript!

The  Oscillator Node

Allows us to change the frequency over time.


Process chunks of audio JIT with a given bin size and sampling rate




Converting Data

String => Binary

Bits to Audio

Data Extraction

The hard part

Extracting Bits From the Waveform

How do we get from a wave to frequency Intensity?

Goertzel Algorithm

Goertzel tldr;

It allows us to extract a (single) target frequency intensity over time

Goertzel Results in:

Goertzel filter is not quite perfect.

We want it to be as close to "binary" as we can get it.

Hamming Window

Frequency Intensity 


All Together now.

What if there was noise on the line?

Noisy Signals

What if we wanted more speed?


What is next?

  • Air-gapped communications.
  • Dynamic JS Injection.
  • WebRTC Modem?
  • ✨✨✨✨✨✨✨✨✨?




JSConf US 2015

By Sam Saccone

JSConf US 2015

  • 6,094
Loading comments...

More from Sam Saccone