Audiola
Echtes Vinyl-Gefühl
Platte mit der Maus drehen = Scratchen, vorwärts und rückwärts. Pause bremst hörbar ab, Backspin reißt die Platte zurück.
FREIE WEB-COMPONENT · AUS DEM HAUSE AUDIOLA
Ein Script-Tag, ein Element: <audiola-turntable>. Scratchen, Tonarm, zwei Decks,
EQ, Crossfader, Hot-Cues und Visuals, direkt im Browser. Kostenlos für alle.
Tipp: Zieh eigene MP3s auf die Platte. Cover und Titel kommen aus den Tags, nichts wird hochgeladen.
DIE PLATTEN IN DIESER DEMO
Die Musik in dieser Demo stellt uns Drunken Records zur Verfügung: die neuesten Alben von Die PapiBaras, Eyirish und 0,5er. Vielen Dank für die Unterstützung!
Platte mit der Maus drehen = Scratchen, vorwärts und rückwärts. Pause bremst hörbar ab, Backspin reißt die Platte zurück.
Außen Track 1, innen der letzte: wo du die Nadel absetzt, geht es genau dort weiter. Während des Songs wandert der Arm nach innen.
Ein Klick öffnet das Mischpult: EQ Hi/Mid/Low bis Kill, Filter, Kanal-Fader, VU-Meter, Crossfader, Echo und Airhorn.
±8 % Tempo pro Deck, drei Hot-Cues zum Setzen und Anspringen. Beats per Hand angleichen, wie am echten Pult.
Spektrum hinter der ganzen Bühne, Ring um jede Platte. Die Farben kommen von den Platten und mischen sich nach Crossfader.
Dateien auf die Platte ziehen: Cover, Titel, Album und Reihenfolge kommen aus den ID3-Tags. Alles bleibt lokal im Browser.
EINBINDEN
Script laden, Element setzen. Kein Build-Schritt, kein Framework, keine Abhängigkeiten. Frei nutzbar, auch kommerziell. Quellcode auf GitHub.
<!-- einmal auf der Seite --> <script type="module" src="https://audiola.de/widgets/turntable/v1.js"></script> <!-- wo der Plattenspieler stehen soll --> <audiola-turntable records="/musik/records.json" uploads></audiola-turntable>
Relative Pfade gelten relativ zur JSON-Datei. duration, cover, link, accent und gradient sind optional. Fehlen die Farben, berechnet die Komponente sie aus dem Cover. Liegen die Dateien auf einer anderen Domain, muss diese CORS erlauben (Access-Control-Allow-Origin).
{
"records": [
{
"title": "Wir haben Ferien",
"artist": "Die PapiBaras",
"cover": "papibaras/cover.webp",
"link": "https://papibaras.de",
"accent": "#3de0ff",
"gradient": ["#3de0ff", "#6a7bff", "#c93dff"],
"tracks": [
{ "title": "Mach die Bahn frei", "src": "papibaras/01.mp3", "duration": 202.2 }
]
}
]
}
| ATTRIBUT | WERTE | WIRKUNG |
|---|---|---|
| records | URL | JSON-Datei mit den Platten (Format oben). Alternativ per JavaScript: el.records = [...] |
| decks | 1 · 2 (Standard) | Bei 2 gibt es den Button „Mischpult öffnen“ mit zweitem Deck und Mixer. |
| mode | single (Standard) · dj | Startet direkt mit geöffnetem Mischpult. Lässt sich live umschalten. |
| uploads | an/aus | Eigene Songs per Button und Drag & Drop. Cover, Titel und Trackliste kommen aus den ID3-Tags. |
| logo | URL | Bild auf der leeren Platte, bevor eine Platte gewählt ist. |
| lang | de · en | Sprache der Beschriftungen. Ohne Angabe: Browsersprache. |
Alles, was zwischen die Tags kommt, steht links neben dem Plattenspieler und fährt beim Öffnen des Mischpults heraus. So bauen Drunken Records und diese Seite ihren Header.
<audiola-turntable records="records.json"> <h1>Mein Label</h1> <p>Hör rein.</p> </audiola-turntable>
audiola-turntable { --at-accent: #c2ff3a; /* Akzentfarbe (Buttons, Regler) */ --at-text: #f4f2ec; /* Textfarbe */ --at-muted: #8c8a82; /* Nebentexte */ --at-font: inherit; /* Grundschrift */ --at-font-display: 'Anton'; /* Kanalbuchstaben A/B */ --at-font-mono: 'Space Mono'; /* Labels */ --at-padding: 48px 5%; /* Innenabstand */ --at-min-height: 780px; /* z. B. 100vh als Seitenkopf */ } el.addEventListener('modechange', (e) => console.log(e.detail.mode)) // 'single' | 'dj'
PLAYGROUND
Jede Einstellung ändert die Komponente sofort. Darunter steht der passende Code zum Kopieren.