Put a tape on your page
One small script and an audio file. The cassette is drawn to scale, its label carries your title and artist, and the reels turn at the tape’s real rate as it plays. Good for a mix, a demo or a podcast.
Try it
Press play. Hold the winding keys to wind, or tap them to skip 30 seconds. Click the bar to go there. A second player starts only when the first has stopped.
The second has no title, artist or cover, so the label uses the file’s name.
Two lines to paste
<script src="https://www.andybateman.com/tapedeck/embed/tapedeck.js" defer></script>
<tape-deck-player src="mix.mp3" title="Friday mix" artist="DJ Name" cover="cover.jpg"></tape-deck-player>Or copy tapedeck.js to your own site and point the script tag at it. It is one file with nothing to install: no other script, no font and no stylesheet is fetched, and nothing is sent anywhere. The only requests are your audio file and your cover.
Attributes
| Attribute | What it does |
|---|---|
src | The audio file: MP3, M4A, WAV or anything the browser plays. Required. |
title | Written on the label. Left out, the file’s name is used. |
artist | Written under the title. Optional. |
cover | A square picture for the label’s corner. Optional, and needs no special headers. |
How it behaves
- Size. It fills the width of whatever holds it, up to 720 px, and the cassette scales with it. Put it in a column and it fits the column.
- Keys. Play and Stop, Rewind and Fast forward. Tap a winding key to skip 30 seconds; hold it (or hold Enter on it) to wind at 40 times the tape’s speed. The sound is silent while winding, and carries on when you let go if it was playing.
- Keyboard. With the player focused, Space plays and stops, and the left and right arrows move 10 seconds. The bar is a slider: arrows move 5 seconds, Page Up and Page Down 30, Home and End go to the ends.
- Screen readers. Every button has a name, the cassette is described by its label, and the bar’s value is announced when the tape stops or moves, not as it ticks.
- Several on one page. Starting one stops the others.
- Light on the page. The cassette is redrawn about thirty times a second only while the tape runs, the player is on screen and the tab is visible. With Reduce Motion switched on, the reels step once a second.
- Isolated. It lives in a shadow root, so your page’s styles can’t reach it and it can’t reach them.
- No meters. VU meters would need Web Audio’s analyser, which silences an MP3 served from another site without CORS headers. They are left out, so any audio URL plays.
Tape Deck’s link under the player is part of it. It opens in a new tab.