SpeakerClear

How does a speaker work?
A magnet, a coil of wire and a paper cone turn electricity into every song you have ever heard. Slice a speaker open in 3D, feel the push F = B × I × L, tune a bass port, and find out what a "5,000 W PMPO" sticker really means.

▶ Play with it  ·  Read the 60-second explainer  ·  Watch the 40-second video

In 60 seconds

1. A coil, a magnet and a cone. A speaker driver is a coil of fine copper wire hanging in the narrow gap of a magnet, glued to a light cone. A pleated spider and a rubber surround hold the cone centred and let it slide in and out. A metal basket keeps everything in line.
2. Current crossing a field gets pushed. In the gap the magnet's field points across, along the radius. The coil's current runs round the ring. A current crossing a field feels a force at right angles to both, so the coil is pushed along its axis: F = B × I × L. Reverse the current and the push reverses, so the cone follows the music.
3. Low notes need a long stroke. The cone is a piston that squeezes the air. For the same loudness, every octave lower needs four times the cone travel. A treble note needs thousandths of a millimetre, deep bass needs centimetres. Ask for too much and the wave is squashed into distortion. Bigger cones move the same air with less travel.
4. Woofer, tweeter, crossover. A big cone is good at bass, but once the wavelength is smaller than the cone its sound narrows into a beam. A small dome spreads treble well but would be wrecked by bass. A crossover shares the work: a capacitor passes treble to the tweeter and an inductor passes bass to the woofer.
5. The box stops the bass cancelling. The back of the cone makes the same sound upside down. Without a box the two meet round the rim and cancel in the bass. A sealed box traps the back wave. A bass-reflex port is a plug of air bouncing on the air in the box, a Helmholtz resonator, which adds bass near one tuned note. A passive radiator does the same job without a tube.
6. Watts are not loudness. A typical speaker turns under 1% of its power into sound. Doubling the watts adds only 3 dB, and ten times the watts sounds about twice as loud. RMS watts are real; PMPO has no standard definition. Class D amplifiers switch on and off very fast and waste little, which is why small speakers are loud now. The WHO's safe limit is 80 dB for 40 hours a week.

Words worth knowing

Term	Meaning
Driver	One complete loudspeaker unit: magnet, voice coil, cone and frame.
Voice coil	The coil of copper wire that carries the signal and is pushed by the magnet's field.
F = B × I × L	The force on a wire of length L carrying a current I at right angles to a magnetic field B.
Excursion	How far a cone travels each way. For the same loudness it grows four times for each octave lower.
Crossover	A filter of capacitors and inductors that sends bass to the woofer and treble to the tweeter.
Beaming	Sound narrowing into a beam when its wavelength is smaller than the cone that makes it.
Bass reflex	A box with a port whose plug of air resonates on the air inside and adds bass near one tuned note.
Sensitivity	How loud a speaker is with 1 watt at 1 metre, in decibels. Most home speakers give 84 to 90 dB.
PMPO	Peak music power output: a label figure with no standard definition. Compare RMS watts instead.

A short history

From a knitting needle on a violin to a speaker in every pocket: 160 years of turning electricity back into sound.

• 1874 · A coil in a magnet's gap (Werner von Siemens, Berlin, Germany)
• 1898 · Lodge's 'bellowing telephone' (Oliver Lodge, Liverpool, England)
• 1915 · Magnavox: the 'great voice' (Peter L. Jensen and Edwin Pridham, Napa and San Francisco, California, USA)
• 1925 · Rice and Kellogg's hornless loudspeaker (Chester W. Rice and Edward W. Kellogg, Schenectady, New York, USA)
• 1932 · The bass-reflex box (Albert L. Thuras, Bell Laboratories, New York, USA)
• 1954 · Deep bass from a small sealed box (Edgar Villchur and Henry Kloss, Cambridge, Massachusetts, USA)
• 1961 · Boxes by calculation, not by ear (A. Neville Thiele, Sydney, Australia)
• 1984 · The neodymium magnet (Masato Sagawa at Sumitomo Special Metals; John Croat's team at General Motors, Osaka, Japan and Michigan, USA)

The full story, with 29 moments, charts, people and 44 sources: glassbox.how/e/speakerclear/history. The data lives in history.json.

Video and slides

Made with the Glassbox studio from this box's storyboard (window.glassbox.director). Free to reuse under CC BY 4.0.

File	What	Size
glassbox/reel.mp4	Reel / Short, with captions and soundtrack	1080×1920
glassbox/video.mp4	YouTube video, with captions and soundtrack	1920×1080
glassbox/slide-1…10.jpg	Instagram carousel	1080×1350
glassbox/thumb.jpg	YouTube thumbnail	1280×720
glassbox/cover.jpg	Share card and repo social preview	1200×630
glassbox/history-reel.mp4	“History in 10 moments” Reel / Short	1080×1920
glassbox/history-slide-*.jpg	History carousel	1080×1350
glassbox/post.json	Post copy and schedule used by the publish kit

Privacy

This box has no accounts and no ads, and it ships its own fonts and libraries. When you run it yourself it sends nothing anywhere. On glassbox.how, the site's /bar.js also loads Glassbox's analytics: Google Analytics to count visits (it asks first in the EU, UK and Switzerland, and stays off when your browser sends Global Privacy Control or Do Not Track) and ClickTrust to detect bots.

It remembers a few things in your own browser only, and never sends them anywhere:

Browser storage key	What it holds
speakerclear.v1	Which chapters you have opened, your best quiz scores, and sound on or off.

Exactly what each one sees is at glassbox.how/privacy.

Licences

• Code: MIT. Use it, change it, ship it.
• Explanations, text, images and videos (glassbox.json, glassbox/): CC BY 4.0. Credit “Glassbox, glassbox.how/e/speakerclear”.
• Third-party parts keep their own licences: three.js (MIT), Geist, Instrument Serif (SIL OFL 1.1).
• The Glassbox name and logo aren't covered by either licence. See the terms.

Found a mistake? Open an issue. Corrections happen in public.

Run it

It's plain HTML, CSS and JavaScript. No build step and no dependencies. Run locally, it contacts no other website.

python3 -m http.server 8000

Three.js and the fonts ship in vendor/ and fonts/, so it also works offline.

Then open http://localhost:8000.

How it's built

File	What
index.html, css/app.css	The page and its styles
js/app.js, js/stage.js, js/ui.js, js/kit.js	The shared Glassbox 3D engine: chapters, 3D stage, controls, quiz, video director
js/speaker.js	SpeakerClear's own parts: the driver and box physics (Thiele–Small models, piston directivity, port tuning), the 3D driver built from its cross-section, chart boards and a quiet test tone
js/chapters/*.js	One file per chapter: the 3D model, controls, text, key terms, quiz and video scenes
glassbox.json	Title, question, explainer beats, key terms, browser storage and credits shown on glassbox.how
reel in each chapter	The storyboard the Glassbox studio records into short videos
glassbox/	The published video, slides, thumbnail and post copy
fonts/, vendor/three/	Self-hosted Geist and Instrument Serif (SIL OFL 1.1) and three.js (MIT)