How to use it
The picture is a map of a sound: left to right is time, bottom to top is pitch, and brightness is loudness. Press Play and the orange scan line sweeps across it. The column under the line is being turned into sound at that moment, as a sum of pure tones, one per row. Next to it a spectrogram of those samples paints the picture back, column by column, without any microphone.
Pick a built-in picture, draw your own, type a word or load an image file. Images are processed inside this browser only and are never uploaded. Save sound downloads a WAV file, Save spectrogram a PNG.
To send a picture through the air, open this page on a second device, switch it to Receive and let it listen while the first one plays. Use the same frequency range, scale and orientation on both.
Controls
- Mouse or finger: point at the picture to read time, frequency and brightness. Choose My drawing and drag to paint; the eraser removes sound. The page does not scroll while you draw.
- Keyboard: Space plays or pauses (in Receive it freezes the display), S stops, the left and right arrows step one column, L toggles the loop.
- Settings: duration (3 to 30 s), frequency range and scale, resolution, brightness curve, orientation and markers; Receive adds sensitivity, contrast, scroll speed and colours. Settings, drawing and text are remembered in this browser.
How it works
Any sound can be built by adding sine waves of different frequencies. The page gives every row of the picture its own sine wave and lets the picture decide how loud each one is as time passes:
s(t) = Σk Ak(t) · sin(2π · fk · t + φk)
Here s(t) is the sound at time t, k numbers the rows, fk is the frequency of row k (spaced evenly or logarithmically between the lowest and the highest frequency), Ak(t) is the brightness of row k in the column that belongs to time t, raised to the power γ, and φk is a random starting phase that stops all the waves from peaking at once. Each amplitude glides smoothly from one column to the next, so there are no clicks, and the loudest peak is scaled to 80% of full scale.
A spectrogram does the reverse. It is a short-time Fourier transform: the sound is cut into short overlapping windows, and for each window the program measures how much of every frequency it contains. Put time on one axis and frequency on the other, paint strong frequencies bright, and the picture is back. This page measures exactly the row frequencies, with a window just long enough to tell neighbouring rows apart.
That window is the catch. To separate two tones Δf hertz apart you must listen for about 1/Δf seconds, so the time step Δt and the frequency step Δf obey Δt · Δf ≳ 1: a picture cannot be sharp in both directions at once. A longer duration gives every column more time; a wider frequency range moves the rows further apart. The Δt × Δf readout shows where you stand: above about 2 the picture is crisp, below 1 neighbouring columns smear together. On the logarithmic scale the low rows sit close together, so they blur first.
Through the air the picture gets noisy. Small speakers and microphones do not treat all frequencies equally, the room adds echoes that smear the columns, and background noise fills the dark areas. For a good transfer use a quiet room, keep the devices close, and choose the “Through the air” range and a longer duration. With markers on, two short pilot tones at the edges of the band frame the picture so the receiver can cut it out.
Related ideas are used to send images by radio, and pictures have been hidden in music this way, visible only in a spectrogram. This demo is simplified: it sends brightness only, with at most 256 tones, and the Transmit spectrogram analyses the generated samples, not what your loudspeaker really emits.
Things to try
- Play the Test pattern: the diagonal is a tone sliding upwards, the horizontal lines are steady tones and the ticks along the top are clicks.
- Set the duration to 3 s, then to 30 s, and watch Δt × Δf. The short version is blurred sideways.
- Draw one horizontal line, then one vertical line. The first is a single whistle; the second is a click that contains every frequency at once.
- Paint with 30% brightness next to 100% and listen. Then raise γ and hear the grey strokes fade.
- In Receive, whistle or talk: it is an ordinary spectrogram too.
- Open Receive on a phone next to your computer, switch on the markers and send it the smiley.
Frequently asked questions
Is my picture or my microphone sound sent anywhere?
No. Everything happens inside your browser, and the page also works offline. Nothing is uploaded or recorded, and the microphone is switched off when you press Stop, leave Receive or hide the tab.
Why does it sound like hissing and whistling instead of music?
Filled areas turn into many tones at once, which the ear hears as noise; thin lines become whistles and sweeps.
Why is the received picture blurry or covered in streaks?
Echoes and uneven speakers cause it. Follow the tips above, and lower the volume if the sound distorts.
Why do I hear nothing?
Browsers only start audio after you press a button, so press Play. Then check the volume slider, the volume of your device and, on a phone, that silent mode is off.
Will other spectrogram programs show my picture?
Yes, if they display the same frequency range. The brightness may look different, because most programs use a decibel scale.