EarClear

How does the ear hear?
Your ear turns a wobble of air smaller than an atom into music, speech and warning. Take a 3D ear apart, unroll the cochlea to see where each pitch lands, hear a 20 Hz to 20 kHz sweep, and find out why spinning makes you dizzy.

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

In 60 seconds

1. A funnel, a lever and a snail. The outer ear (pinna and a 2.5 cm canal) funnels sound to the eardrum. Three tiny bones in the air-filled middle ear, the malleus, incus and stapes, carry it to the oval window of the fluid-filled cochlea. The Eustachian tube keeps the air pressure equal, and the auditory nerve carries the result to the brain.
2. Getting sound into fluid. Sound hitting fluid straight from air would mostly bounce off: only about 0.1% of the power gets in. The eardrum is about 17 times bigger than the stapes footplate, and the bones add a 1.3 times lever, so the pressure rises about 22 times, roughly 27 dB. The ear canal also resonates like a pipe near 3 kHz.
3. A place for every pitch. Inside the cochlea the basilar membrane is narrow and stiff at the base and wide and floppy at the apex. Each tone makes a travelling wave that peaks at its own place: 20 kHz at the base, 20 Hz at the apex, following Greenwood's map. A note with overtones lights up several places at once.
4. Bristles that open gates. About 3,500 inner hair cells sense the motion and about 12,000 outer hair cells amplify it. When their stereocilia bend, tip links pull ion channels open, ions rush in and the auditory nerve fires. At the threshold of hearing they move only about 0.3 nanometres. In humans, hair cells do not grow back.
5. Decibels and safe listening. Sound level in dB is 20 log10(p/20 µPa); every 10 dB sounds about twice as loud. The WHO's safe-listening standard allows 80 dB for 40 hours a week, halving the time for every 3 dB more, so earphones at 100 dB use it up in about 24 minutes. The highest pitches fade first with age.
6. The balance sensor next door. Three semicircular canals sense turning: the fluid lags, bends a jelly flap called the cupula, then catches up, so a steady spin fades and a sudden stop feels like spinning backwards. The utricle and saccule use tiny crystals to sense tilt and speeding up. If dizziness or hearing changes worry you, see a doctor.

Words worth knowing

Term	Meaning
Eardrum	The thin tympanic membrane at the end of the ear canal that vibrates with sound.
Ossicles	The malleus, incus and stapes: three tiny middle-ear bones that pass vibrations to the inner ear. The stapes is the body's smallest bone.
Impedance matching	Getting vibrations from air into fluid without most of them bouncing back, the middle ear's main job.
Cochlea	The snail-shaped, fluid-filled inner ear, 2.75 turns, that turns sound into nerve signals.
Basilar membrane	The strip in the cochlea that vibrates most at a different place for each pitch.
Tonotopy	The map of pitch by place: high frequencies at the cochlea's base, low at its apex.
Hair cells	Sensory cells with bristles (stereocilia) whose bending opens ion channels and triggers nerve signals.
Decibel	A log scale for sound level: +10 dB is ten times the power and sounds about twice as loud.
Semicircular canals	Three fluid-filled loops in the inner ear that sense the head turning.

A short history

2,400 years from a Greek guess about the eardrum to cochlear implants, digital hearing aids and a global plan for hearing.

• 1562 · A tube from the ear to the throat (Bartolomeo Eustachi, Rome)
• 1851 · The organ of Corti (Alfonso Corti, Würzburg)
• 1863 · A piano inside the ear? (Hermann von Helmholtz, Heidelberg)
• 1876 · A teacher of the deaf invents the telephone (Alexander Graham Bell, Boston)
• 1922 · Measuring hearing with electronics (Edmund Fowler and R. L. Wegel, Western Electric, New York)
• 1961 · A Nobel Prize for the travelling wave (Georg von Békésy, Budapest and Harvard)
• 1978 · The ear makes its own sounds (David Kemp, London)
• 1978 · The multichannel cochlear implant (Graeme Clark, Melbourne)

The full story, with 30 moments, charts, people and 54 sources: glassbox.how/e/earclear/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
earclear.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/earclear”.
• 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/chapters/*.js	One file per chapter: the 3D model, controls, text, key terms, quiz and video scenes
js/ear.js	The shared ear: sourced numbers and physics (middle-ear gain, ear-canal resonance, Greenwood place map, ISO 226 equal-loudness contours, WHO safe-listening dose), a quiet WebAudio tone engine that respects mute and never plays while recording, and the 3D parts (pinna, ossicles, cochlea, semicircular canals)
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)