Documentatie

Snelstart

BiepBop maakt van een audiobestand een video waarvan het beeld door het geluid zelf wordt aangestuurd: live, zonder met de hand keyframes te zetten. Binnen een paar minuten heb je een render, en er verlaat niets je computer.

• Open de editor: die draait helemaal in je browser, zonder account en zonder installatie.
• Sleep je audio erin: een MP3- of WAV-bestand. Je apparaat decodeert en analyseert het.
• Voeg een laag toe en koppel een frequentieband aan een eigenschap.
• Exporteer in elke beeldverhouding. Je audio gaat mee in de .mp4.

Audio & media importeren

Bij het importeren decodeert BiepBop het bestand met de Web Audio API en analyseert het signaal: per frame wordt het opgesplitst in frequentiebanden. Je bronbestand wordt nooit aangepast en nooit geüpload.

Analyseresolutie

Het spectrum wordt elk frame gelezen, dus snelle klanken zoals hi-hats en snaredrums blijven gelijk met het beeld. Bij het exporteren neemt BiepBop je track niet opnieuw in realtime op: dezelfde analyse draait offline nog een keer, frame voor frame. Dat is sneller, en het maakt niet uit of je intussen naar een ander tabblad gaat.

Meerdere tracks

Sleep er meer dan één bestand in en elk krijgt een eigen baan op de tijdlijn, met een eigen positie, inkorting, fades, volume en dempknop. Het beeld reageert op de mix.

Sleep alles, overal

Sleep bestanden van je bureaublad naar elke plek in de editor, ook meerdere tegelijk. Voordat je loslaat, zie je al wat er gaat gebeuren:

• Audio wordt een nieuwe track.
• Afbeeldingen (PNG, JPG, WebP, SVG, AVIF) worden afbeeldingslagen, op de plek waar je ze op het canvas loslaat.
• GIF's en video's (MP4, WebM, MOV) worden videolagen. Sleep je een video op de tijdlijn, dan komt de geluidsband erbij als audiotrack.
• Een bewegende GIF op een afbeelding (een afbeeldingslaag, de achtergrondafbeelding of het logo in het midden van een visualizer) speelt daar gelijk met de tijdlijn af, net als een GIF-laag, in de preview en in de export.
• Een projectbestand (.json) opent dat project; heb je werk open, dan maakt de editor daar eerst een back-up van.
• Songteksten en ondertitels (.lrc, .srt, .vtt) vullen de geselecteerde songtekstlaag, of worden een nieuwe.

Laat je één afbeelding of GIF los binnen de geselecteerde afbeeldingslaag, dan vervangt die de afbeelding (op de achtergrondlaag wordt het de achtergrondafbeelding). Houd Alt / Option ingedrukt om altijd een nieuwe laag toe te voegen. Sleep een afbeelding, GIF of clip op de mediaknop van een laag (+ achtergrondafbeelding, + afbeelding / logo, het logo in het midden van een visualizer, + video / gif laden) of op de rij van een achtergrond-, afbeeldings- of videolaag in de lagenlijst, en het komt in die laag terecht. Je kunt ook een afbeelding plakken vanaf het klembord met Ctrl + V (⌘ + V op een Mac). Op een telefoon opent Toevoegen → Van je apparaat de kiezers voor foto's, video en muziek.

Ingebouwde loops

Geen track bij de hand? + loop in het audiopaneel voegt een van de rechtenvrije loops toe die BiepBop op je apparaat maakt: verschillende tempo's, toonsoorten en sferen, plus een loop met alleen drums. Je mag ze in elke video gebruiken.

Opbouw van een project

Een project is een stapel lagen, elk frame van onder naar boven getekend. Elke laag is een van 14 soorten: visualizer, WebGL-shader, tekst, afbeelding / logo, video / GIF, songtekst, vorm, vormraster, kleurverloop, masker, audiometer, klok, voortgangsbalk en achtergrond. Elke laag heeft een eigen overvloeimodus, dekking en reactie op het geluid.

{
  "size": [1080, 1920],
  "fps": 60,
  "layers": [
    { "type": "viz",  "style": "circle", "reactTo": "bass" },
    { "type": "text", "text": "MIDNIGHT DRIVE" }
  ]
}

Eenvoudig en Pro

Het eigenschappenpaneel heeft twee weergaven, die je bovenaan wisselt met Eenvoudig / Pro (op een telefoon bovenaan het blad Eigenschappen). Beide bewerken dezelfde laag: wisselen verandert nooit een waarde, en ongedaan maken, automatisch opslaan en exporteren werken in beide weergaven hetzelfde.

• Eenvoudig toont per soort laag de paar instellingen die er het meest toe doen, onder gewone kopjes (Uiterlijk, Beweging, Plek, Verschijnen en verdwijnen), en legt elke instelling uit in één regel gewone taal (“Vloeiendheid — lager = snel en zenuwachtig, hoger = rustig en vloeiend”). Een visualizer krijgt zijn stijl, kleuren, grootte, hoeveel hij beweegt, waar hij op reageert (het hele nummer, de bas, stemmen, bekkens of de beat), vloeiendheid, een sprong op de beat en zijn plek; een tekstlaag zijn woorden, kant-en-klare stijlen, lettertype, grootte, kleur, dikte, schaduw, hoe hij binnenkomt en weggaat, en zijn plek; een achtergrond zijn kant-en-klare looks, soort, kleuren of afbeelding (met vervaging, donkerder maken en rustige beweging). De knop Alle instellingen tonen onderaan opent Pro.
• Pro is het volledige paneel met elke instelling.

Je keuze wordt in je browser onthouden, niet in het project. Een nieuwe browser begint in Eenvoudig; een browser die al een bewaard project had toen deze weergave verscheen, begint in Pro.

Fijnere controle

De schuifregelaars in het eigenschappenpaneel (beide weergaven), Globale effecten en Reactiviteit nemen exacte waarden aan:

In Pro legt elke instelling zichzelf uit in gewone woorden: wijs hem aan, of ga er met het toetsenbord naartoe, en de uitleg (met de toetsen van een schuifregelaar) verschijnt eronder. Schermlezers lezen dezelfde tekst voor als beschrijving van de instelling.

Fijnafstelling

Het onderdeel Fijnafstelling van Pro toont renderinstellingen die het paneel eerst niet liet zien. Alleen instellingen die de renderer echt gebruikt, getekend zoals in de preview en de export:

• Kleurverschuiving: draait alle kleuren van de laag even ver rond de kleurencirkel (visualizers met je eigen kleuren, gemengde en bewegende achtergronden, kleurverlopen, shaders, audiometers en vormrasters; tekst, klok en songtekst als hun kleuren bewegen). Echolagen die de hoofdkleuren volgen, krijgen een eigen Kleurverschuiving, en een echo met een eigen kleur kan de hoofdkleuren weer gaan volgen.
• Naadloze kleurenloop: de laatste kleur loopt weer over in de eerste, zodat een palet zonder harde rand herhaalt.
• Reactiesnelheid voor shaders, audiometers en vormrasters (visualizers hadden het al), en Vormgrootte voor vormrasters.
• Kleuranimatie voor tekst: een kleurencyclus, een set kleuren om doorheen te lopen, de snelheid daarvan, en de volgende kleur op elke beat.

Lagen & overvloeimodi

Een project tekent zijn lagen van onder naar boven, elke laag over het beeld eronder. Stapel een gloeiende visualizer onder een logo onder een titel zonder de editor te verlaten: de preview werkt meteen bij als je de volgorde verandert.

Overvloeimodi

De overvloeimodus bepaalt hoe een laag zich mengt met wat eronder ligt. Bleken en Optellen (lichter) zijn de werkpaarden voor licht op donker; Vermenigvuldigen is handig om in te kleuren. Stel hem per laag in onder OVERVLOEIEN, of voor een hele selectie van lagen tegelijk.

Tekst- & afbeeldingslagen

Naast de reagerende visualizers kun je lagen toevoegen met tekst, een afbeelding / logo, video / GIF of een songtekst. Ook die reageren: koppel een band aan dekking of grootte en je titel pulseert op de muziek.

• Tekst: typ in het paneel of dubbelklik op de tekst op het canvas. Kies een lettertype en gewicht (zie Lettertypen hieronder), uitlijning, grootte, letter- en regelafstand, hoofdletters en een schaduw, plus gloed, een omlijning en een puls op de bas.
• Afbeelding / logo: elke afbeelding die je browser kan openen (PNG, JPG, SVG…; een bewegende GIF speelt gelijk met de tijdlijn af), met grootte, rotatie, afgeronde hoeken, een ronde uitsnede, spiegelen, een rand en een slagschaduw die de transparantie van de afbeelding volgt. Passend in canvas, Canvas vullen en Als achtergrond gebruiken zitten één klik verderop. Een logo kan ook in het midden van een ronde visualizer staan (zie Visualizerstijlen).
• Video / GIF: MP4-, WebM- en MOV-clips en bewegende GIF's, die framenauwkeurig afspelen in de preview en de export. Als achtergrond gebruiken vult het beeld en zet de clip onderaan de stapel.
• Songtekst / ondertiteling: getimede regels uit geplakte tekst of een .lrc-, .srt- of .vtt-bestand, per regel of woord voor woord getoond (zie Songteksten & karaoke).

Lettertypen

Tekst-, songtekst- en kloklagen delen één kiezer, LETTERTYPE. Die toont elk lettertype in zijn eigen letter, gezet in de woorden van je laag, in drie groepen:

• Ingebouwd: Space Grotesk (Sans) en JetBrains Mono (Mono).
• Bibliotheek: lettertypen met een open licentie (SIL OFL) die bij BiepBop horen: Montserrat (vette display), Bebas Neue (smalle kapitalen), Playfair Display (schreef), Pacifico (script), Caveat (handschrift), Fredoka (rond), Press Start 2P (pixel / retro) en Orbitron (techno / breed). Elk wordt opgehaald als je de kiezer voor het eerst opent of als een project het gebruikt.
• Je lettertypen: upload een TTF-, OTF-, WOFF- of WOFF2-bestand van maximaal 10 MB met ＋ Lettertype uploaden… onderaan de kiezer, of sleep het ergens op de editor. Is er een tekst-, songtekst- of kloklaag geselecteerd, dan krijgt die laag het lettertype; anders komt het binnen als nieuwe tekstlaag in dat lettertype. Op een telefoon: Toevoegen → Lettertype in de tabbalk. Een bestand dat je browser niet als lettertype kan lezen, wordt met een melding geweigerd.

GEWICHT volgt het lettertype: een variabel lettertype biedt zijn echte gewichten, een lettertype met één gewicht biedt Normaal en een Vet die de browser zwaarder tekent. Stijl kopiëren / Stijl plakken neemt het lettertype mee.

Songteksten & karaoke

Een laag Songtekst / ondertiteling toont één regel tegelijk, vanaf de tijd van die regel op de tijdlijn tot de volgende regel begint. Regels kun je ook woord voor woord timen, voor karaoketeksten en ondertiteling in TikTok-stijl.

De regels erin krijgen

• Onder Importeren in de eigenschappen van de laag plak je tekst of kies je Bestand openen…: platte tekst (één regel per rij, om te beginnen 2 s uit elkaar), LRC met een tijd [mm:ss.xx] per regel, enhanced LRC met een tag <mm:ss.xx> voor elk woord of elke lettergreep, of ondertitels in SRT of WebVTT. Met Vervangen komen ze in plaats van de regels van de laag, met Toevoegen komen ze erbij.
• Sleep een .lrc-, .srt- of .vtt-bestand ergens op de editor: het vult de geselecteerde songtekstlaag, of komt binnen als nieuwe.
• Bewerk de lijst direct: de tijdknop zet een regel op de afspeelkop (de woordtimings schuiven mee), ＋ regel bij de afspeelkop voegt er een toe, en een lege regel maakt het beeld leeg. Een typfout verbeteren houdt de timing van de woorden. De ♪ achter een regel laat zien hoeveel van de woorden getimed zijn.

Weergaven

Dekking inactief is hoe zichtbaar een woord is voordat het gezongen wordt: bij 0 blijft het verborgen tot dan (de woorden verschijnen één voor één). Regels zonder woordtimings worden gelijkmatig over hun tijd verdeeld, dus elke weergave werkt ook met songteksten per regel. In elke weergave blijft de laatste regel minstens 4 s staan, langer als zijn getimede woorden verder lopen (tot ongeveer een seconde na het laatste). Lettertype, dikte, kleur en kleurbeweging, gloed, schaduw, animaties en kleureffecten gelden in elke weergave; lange regels lopen door naar een volgende regel zodat ze in beeld passen. Net als bij al het andere is de preview op elk punt van de afspeelkop precies het geëxporteerde frame.

Meetikken

Open ♪ Meetikken… in de eigenschappen van de laag, kies Woord voor woord of Regel voor regel, speel de track af en druk op Spatie of J (of op een telefoon op de grote tikknop) op het moment dat elk woord (of elke regel) begint. De kaart toont de regel waar je bent, met het volgende woord gemarkeerd.

• Houd de toets ingedrukt bij een lange noot: het woord duurt zo lang als je hem vasthoudt.
• Backspace zet één tik terug en spoelt 2 s terug, zodat je opnieuw kunt tikken; K speelt af of pauzeert; Esc sluit de kaart.
• ⤷ naast een regel synchroniseert vanaf die regel, met 2 s aanloop.
• Met Alles verschuiven schuif je elke regel en elk woord 0,01 of 0,1 s eerder of later: handig als een geïmporteerd bestand er net naast zit.

Een tik wordt bewaard als het moment waarop je het woord hoorde: de tijd waarop de toets omlaag ging, min de vertraging van je audio-uitgang. Tijden worden bewaard tot op 1/100 s, de precisie van LRC-bestanden, en elke wijziging kun je ongedaan maken.

De songtekst exporteren

⤒ .lrc downloadt de regels als LRC (enhanced LRC met woordtags als woorden getimed zijn), dat BiepBop precies zo terugleest: elke regel, elk woord, elke lettergreep, elke aangehouden noot en elk woord zonder eigen tijd. (Volgt een woord zonder eigen tijd op een aangehouden woord, dan wordt de eindtag twee keer geschreven, <01:02.50><01:02.50>; andere karaokespelers lezen dat als een gewone tag, en spelers die alleen gewone LRC kennen, tonen nog steeds de regels.) ⤒ .srt downloadt ondertitels voor YouTube of een video-editor, één cue per regel; ⤒ .vtt hetzelfde als WebVTT, met de woordtijden als karaoketijdstempels. Ondertitelbestanden kennen geen aangehouden noten, en een gat van minder dan 0,05 s tussen twee regels verdwijnt bij het teruglezen. Woordtimings worden bewaard in het projectbestand, het automatisch opgeslagen project en de projectbibliotheek.

Achtergronden

De laag Achtergrond ligt onderaan de stapel en bepaalt de sfeer van de hele video. Begin met een van de kleurstalen bovenaan de eigenschappen en maak hem daarna van jezelf.

Frequentiebanden

Elke reactie begint bij het live spectrum: 96 logaritmisch verdeelde stukjes van 30 Hz tot 16 kHz, elk frame opnieuw gelezen. Die worden samengevoegd tot drie hoofdbanden; energy (de totale energie) en beat staan ernaast, en je kunt ook je eigen Hz-bereik vastleggen.

Elke band wordt tijdens het afspelen automatisch bijgesteld, zodat een zachte mix toch beweegt en een harde niet op het maximum blijft hangen: je lagen krijgen altijd getallen van 0 tot 1.

Eigenschappen koppelen

Koppelen is het kernidee: verbind een eigenschap met een bron en ze volgt de audio elk frame, in de preview en in de export. Open in de eigenschappen van een laag Audio-automatisering, druk op ＋ Eigenschap automatiseren, kies de eigenschap en stel de rij in.

De automatiseringsrij

Elke geautomatiseerde eigenschap krijgt één rij met deze instellingen:

Wat je kunt automatiseren

Op een visualizerlaag: Gloed, Intensiteit, Gevoeligheid, Rotatie, Breedte (X), Hoogte (Y), Amplitude, Lijndikte, Draaisnelheid, Draaisnelheid (deeltjes) en Dekking. Positie X, Positie Y en Dekking kun je op elke soort laag automatiseren, en elke soort voegt zijn eigen eigenschappen toe (tekstgrootte, afgeronde hoeken van een afbeelding, zoom van een shader…).

Curves & afvlakking

Ruwe bandwaarden zijn onrustig. Elke automatiseringsrij en elke benoemde analyzer heeft een Curve: één exponent die je van 0,3 tot 3 sleept, en die de respons vormt voordat die de eigenschap bereikt.

Afvlakking

Een benoemde analyzer voegt daar traagheid aan toe: Aanzet bepaalt hoe snel zijn waarde naar een piek stijgt, Uitsterven hoe langzaam hij weer zakt. Laat hem wat trager terugzakken om een stroboscoopeffect bij drukke mixen te voorkomen. Lagen zelf hebben om dezelfde reden instellingen voor gevoeligheid en vloeiendheid.

Benoemde analyzers

Open het paneel Reactiviteit en voeg analyzers toe onder ANALYZERS: benoemde frequentiebereiken die je als bron kiest bij Reageert op, in Audio-automatisering en in de globale effecten. Elk heeft een live niveaumeter en deze instellingen:

Beatdetectie

BiepBop haalt uit de pieken in de bas een signaal beat dat je net als elke band kunt gebruiken: perfect voor een eenmalige reactie precies op de klap.

• Beatstoot: extra pop bij elke herkende kick, op elke visualizer (Reactie & grootte).
• Stuiteren op de beat: de kern, of je logo in het midden, springt op elke kick (Cirkel, Midden, Ringen, Bogen, Stippen, Zonnestralen, Pulsringen, Tunnel, Caleidoscoop, Melkweg, Poolroos, Deeltjesexplosie en Radar).
• Kleur wisselen op de beat: onder Kleuranimatie, met je eigen kleuren.
• Camerabeweging: laat het hele beeld schudden op de beat of een band, in te stellen in het paneel Reactiviteit.
• Beat als bron: op elke automatiseringsrij of elk effect.

Visualizerstijlen

Er zitten 44 visualizerstijlen in de editor, in 6 families in de stijlkiezer. Elke stijl leest het live spectrum rechtstreeks, en een andere stijl kiezen houdt de kleuren, reactie, plaatsing en automatisering van de laag. De kiezer heeft ook Eigen: daar bouw je je eigen stijl in plaats van er een te kiezen (zie Je eigen visualizer ontwerpen).

De nieuwste stijlen

• Bergen (Raster & 3D): een draadmodellandschap in synthwavestijl dat naar je toe rolt, met een vlakke weg, bergen die groeien met het deel van het spectrum eronder en een gestreepte zon. Stel de diepte, rasterdichtheid, snelheid, piekhoogte en wegbreedte in; zet Dichte grond uit om alleen de lijnen over je beeldmateriaal te houden.
• Zijde (Golven): doorzichtige linten die over elkaar stromen, elk luisterend naar een eigen deel van het spectrum, gespiegeld tot lensvormen zoals bij een spraakassistent.
• Helix (Raster & 3D): een draaiende dubbele DNA-helix waarvan de sporten het spectrum zijn, met de lage tonen links.
• Vloeibaar (Organisch): glanzende druppels die drijven, opzwellen met de muziek en in elkaar overlopen zoals in een lavalamp.
• Audiogram (Balken): de golfvorm van een podcast. De luidheid van de laatste seconden schuift naar links, gespiegeld rond een middenlijn of staand op de vloer.
• Radar (Rond): een rond spectrogram. Een wijzer schrijft het spectrum rond de cirkel, zodat de laatste seconden zichtbaar blijven en de beat als spaken te zien is. Met ruimte voor je logo in het midden.
• Globe (Deeltjes): een draaiende bol van stippen die de muziek naar buiten duwt, tot pieken.
• Lasers (Rond): een lasershow zoals in de club. Stralen waaieren uit vanaf de onderkant, de bovenkant of twee gekruiste hoeken en zwaaien mee met de track.

Hun instellingen staan net als die van elke andere stijl onder Vormopties in de weergave Pro, elk met een uitleg van één regel als je ze aanwijst of er met Tab naartoe gaat; dubbelklik op een schuifregelaar om terug te gaan naar de standaard. Vier kant-en-klare looks laten ze zien (Presets & looks → Kant-en-klare looks): Nachtrit, Podcastgolf, Laserclub en Lavalamp.

Stijlen en hun vormopties

Elke stijl heeft zijn eigen Vormopties: aantallen, lijndiktes, draaisnelheden en meer. De tabel noemt ze per stijl met het bereik van elke schuifregelaar, rechtstreeks uit de editor gelezen, zodat ze precies overeenkomen met het paneel.

Looks & kleur

Het onderdeel Kleur begint met LOOK. Huisstijl is de standaard: een witte kernlijn met een regenbooggloed. Neon is een tweede ingebouwde look, voor Golf, Spectrum, Scoop, Terrein, Lint en Cirkel. Eigen gebruikt je eigen kleuren. Neonlint tekent altijd zijn eigen vaste look; alleen de vorm reageert.

• KLEURMODUS: Effen, Verloop of Palet, met snelle looks en je bewaarde kleuren en paletten.
• Kleuranimatie: Kleurrotatie, Palet verschuiven en Kleur wisselen op de beat.
• KLEUR-FX: Geen, Ruis of Glitch, met FX-intensiteit, FX-snelheid en Audiosturing.
• ↺ Kleuren terugzetten: terug naar de look Huisstijl, zonder palet, animatie en kleureffect.

Reactie & grootte

Hoe hard en hoe vloeiend een stijl beweegt. In de paneelindeling Compact staan deze instellingen onder Reactiviteit & beweging.

Logo in het midden & stuiteren op de beat

Cirkel, Midden, Ringen, Bogen, Stippen, Zonnestralen, Pulsringen, Tunnel, Caleidoscoop, Melkweg, Poolroos, Deeltjesexplosie en Radar hebben een open midden. Upload een PNG onder Logo (midden) en stel daarna Logo tonen, Ring rond het logo, Zoom en de positie in. Stuiteren op de beat laat de kern, of het logo, op elke kick springen, met een schuifregelaar Stuiterkracht.

Echolagen

Echolagen: vertraagde, gekleurde kopieën van deze visualizer voor een gelaagd spoor. Maximaal 9.

Voeg ze toe onder Sublagen / echo. Elke echo heeft zijn eigen instellingen:

Het paneel Reactiviteit & instellingen

Het paneel Reactiviteit stelt live in hoe elk beeld op het geluid reageert: Algemene gevoeligheid, bandversterking voor Bas, Midden en Hoog, dynamiek (Aanzet, Uitsterven, Compressiecurve, Ruisvloer / gate, Automatische versterking), voorbewerking die alleen de analyse raakt (Basversterking, een filter, Limiter), Camerabeweging en je benoemde analyzers. In Instellingen staan voorkeuren die in deze browser bewaard worden, waaronder Previewkwaliteit: met Verlaagd gebruikt de preview op tragere computers een lagere resolutie, minder gloed en minder echo's, terwijl exports altijd op volle kwaliteit renderen.

Het eigenschappenpaneel heeft twee indelingen voor visualizers. Klassiek toont Stijl, Kleur, Reageert op, Reactie & grootte, Logo (midden), Vormopties, Positie & grootte en Sublagen / echo als losse onderdelen. Compact groepeert dezelfde instellingen in Look & kleur, Reactiviteit & beweging (met Beat & automatisering), Vormopties, Plaatsing (met Uitrekken, logo & echo), Laag & timing en Kleureffecten.

Je eigen visualizer ontwerpen

Kies Eigen in de stijlkiezer en de visualizer tekent een ontwerp van jezelf in plaats van een vaste stijl. Het onderdeel Ontwerp komt in de plaats van de vormopties, met vijf kaarten. Al het andere van een visualizer blijft gelden: kleuren en de look Huisstijl, gloed, gevoeligheid en vloeiendheid, automatisering, keyframes, animaties, echolagen, het logo in het midden en stuiteren op de beat.

Je eigen pad (SVG)

Kies Pad en daarna SVG-pad importeren… met een .svg-bestand (je logo bijvoorbeeld), plak padgegevens zoals M12 2 L22 22 L2 22 Z, of probeer een van de voorbeeldvormen. BiepBop volgt de langste omtrek in het bestand; Volgende omtrek loopt de andere langs, en een gewone achtergrondrechthoek komt als laatste. De omtrek wordt één keer omgezet in 512 punten en alleen die punten komen in de laag: het bestand zelf wordt niet bewaard en er wordt niets geüpload. Tekst, ingesloten afbeeldingen en scripts in een SVG worden genegeerd.

Beginpunten

• ✎ Deze stijl aanpassen onder de stijlkiezer maakt van Balken, Cirkel, Stippen, Golf of Spectrum een passend eigen ontwerp (dezelfde vorm, hetzelfde aantal en frequentiebereik, even ver uitslaand) om vanuit verder te werken.
• 🎲 Verrassing maakt een willekeurig ontwerp uit combinaties die goed samengaan; Ctrl+Z gaat terug.
• Kant-en-klare looks: Halo, Neonspiegel en Stippenprisma zijn eigen ontwerpen om te openen en aan te passen.
• Opslaan als preset… bewaart de visualizer in Presets & looks → Mijn presets, waar je hem als .json-bestand kunt exporteren om te delen of als back-up.

Keyframes & automatisering

Er zijn twee manieren om dingen in de tijd te laten bewegen. Automatisering volgt de audio: elke automatiseerbare eigenschap volgt live een bron (zie Eigenschappen koppelen). Keyframes animeren op de klok: kies onder Keyframes (tijd) een eigenschap, zet de afspeelkop op zijn plek en druk op ＋ keyframe op de huidige tijd; BiepBop berekent de waarden daartussen.

Elke keyframe bepaalt hoe de waarde naar de volgende gaat:

Een laag waarvan de positie of grootte geanimeerd is, verplaats je net als elke andere: zijn handgrepen op het canvas staan waar hij bij de afspeelkop is, en slepen, schalen, draaien, de pijltjestoetsen of zijn positie-instellingen verplaatsen de hele animatie. Elke keyframewaarde, of het bereik van de automatisering, verschuift evenveel (groottes schalen met dezelfde factor). Eén keer ongedaan maken zet alles terug.

Animatie

Elke laag heeft een onderdeel Animatie in zijn eigenschappen, zodat titels, logo's en beelden kunnen binnenkomen, weggaan en bewegen zonder één keyframe. Animaties lopen op de tijdlijn: bij het scrubben zie je het exacte frame, en de geëxporteerde video komt overeen met de preview.

• In speelt als de laag verschijnt: aan het begin van zijn eigen tijdsbereik, of anders aan het begin van het exportbereik (het in- en uitpunt op de tijdlijn, dat ook bepaalt wat een export beslaat).
• Uit speelt als hij eindigt: aan het einde van zijn tijdsbereik of van het exportbereik; met “Eerder klaar” eindigt hij eerder.
• Loop loopt steeds door, en de meeste loops kunnen de muziek volgen: een band, de beat of een van je benoemde analyzers.

In & uit

Elk heeft een duur, een vertraging en een verloop (lineair, langzaam uit, langzaam in en uit, terug (doorschieten), elastisch en stuiteren). Typemachine werkt op tekst- en kloklagen.

Loop

Elke loop heeft een snelheid en een intensiteit.

Combinaties in één klik

Titel onthullen, Plop & puls, Inzweven, Glitchy en Filmische fade zetten In, Uit en Loop in één keer. De knop ▶ naast elke rij speelt die animatie af op het canvas zonder de afspeelkop te verplaatsen, en het opdrachtenpalet heeft opdrachten Animeren: … die op alle geselecteerde lagen tegelijk werken.

Tijdcode & hoofdstukken

De laag Klok / tijdcode schrijft tijd als tekst, opgemaakt zoals een tekstlaag (lettertype, kleur, gloed, schaduw, animaties). Onder TOONT kies je wat hij laat zien:

Markers

Markers geven de delen van je track een naam: de hoofdstukken van een aflevering, de tracks van een mix. Druk op M om er een bij de afspeelkop te zetten, of kies Project → Marker toevoegen bij de afspeelkop. Ze staan in de baan MARKERS onder de liniaal van de tijdlijn: sleep een marker om hem te verplaatsen, klik erop om ernaartoe te springen, dubbelklik om hem een naam te geven, ✕ om hem te verwijderen; heeft een marker de focus, dan verschuiven de pijltjestoetsen hem. De scrubbalk toont markers als kleine streepjes. Ze worden met het project bewaard, en elke wijziging kun je ongedaan maken.

YouTube-hoofdstukken

Project → YouTube-hoofdstukken kopiëren kopieert een lijst die je in de beschrijving van de video plakt; YouTube maakt er hoofdstukken van. Project → Hoofdstukken & markers… toont dezelfde lijst, laat je exacte tijden en namen typen en controleert de regels van YouTube: het eerste hoofdstuk op 0:00, minstens drie hoofdstukken, elk minstens 10 seconden lang. Tijden tellen vanaf het begin van het exportbereik, en het hoofdstuk dat bij het inpunt al loopt, staat op 0:00.

0:00 Intro
1:42 Artiest – Eerste track
5:10 Artiest – Tweede track

Beatgrid & scènes

BiepBop kent het tempo van je track, zodat bewerkingen op de beat kunnen vallen. De liniaal van de tijdlijn markeert elke tel, met een langer streepje op elke maat, en de rij SCÈNES onder de markers toont het tempo in BPM naast een magneet. Staat de magneet aan, dan springen het tijdsbereik van een laag, een keyframe, een marker, het begin van een scène en het in- en uitpunt bij het slepen naar de dichtstbijzijnde tel, of naar maten als je ver uitzoomt. Houd Alt (Option op een Mac) ingedrukt tijdens het slepen om vrij te plaatsen. Elke sleepbeweging is één stap die je ongedaan kunt maken.

Tempo

De ingebouwde loops en de demotracks hebben hun eigen tempo, dus hun grid klopt precies. Andere audio wordt op je apparaat geanalyseerd als je hem toevoegt of verplaatst: BiepBop bepaalt uit de eerste 8 minuten van de tijdlijn het tempo, waar de tellen vallen en welke tel de “1” is. De “1” is waar de akkoorden en de bas wisselen en waar een kick valt en geen snare, zodat een beat met de kick op 1 en 3 toch de juiste maten krijgt. Muziek die versnelt of vertraagt, krijgt haar gemiddelde tempo. Klinkt een groove als twee tempo's, zoals 72 of 144 BPM, dan kiest BiepBop het tempo tussen 70 en 140.

Project → Beatgrid & scènes… (of het tempo op de rij SCÈNES) laat je de BPM typen, halveren of verdubbelen, met 0,1 verschuiven, het aantal tellen per maat instellen en de “1” verplaatsen. Of tik het tempo in: klik op TIK bij elke tel, en tik je terwijl het nummer speelt, beginnend op een “1”, dan komt het grid ook gelijk te liggen met je tikken. Een tempo dat je zelf instelt, blijft staan als je de audio verandert; Opnieuw zoeken leest het weer uit de audio.

De “1” controleren

Druk in het venster op ▶ Afspelen: het lampje naast het tempo telt de tellen mee en toont 1 waar elke maat begint. Weet de analyse niet zeker waar dat is, bijvoorbeeld bij drums zonder akkoorden, dan toont het tempo 1? en zeggen het venster en op een telefoon het blad Audio dat, met de oplossingen:

• Tel 1 is hier: de tel die het dichtst bij de afspeelkop ligt, wordt de “1” (terwijl het nummer speelt: de tel die je hoort als je klikt). De tellen zelf blijven waar ze zijn.
• ½ maat (Een halve maat verschuiven): de “1” schuift twee tellen op, de oplossing als hij op de 3 viel; ◀ tel en tel ▶ verschuiven hem één tel.
• Klopt: houdt de “1” zoals hij is en markeert hem niet meer als onzeker.

Elke oplossing is één stap die je ongedaan kunt maken, en een “1” die je hebt verbeterd, blijft staan als de audio verandert. “1” precies op de afspeelkop, onder Waar het grid ligt, verschuift in plaats daarvan het hele grid: bij een tempo dat je hebt getypt, zet je de afspeelkop op een kick en klik je erop. Tel 1 is hier en de verschuiving van een halve maat staan ook in het opdrachtenpalet.

Scènes

Een scène is een deel van het nummer, zoals het intro, een couplet, het refrein of de drop, met een eigen set lagen. ＋ op de rij SCÈNES begint een nieuwe scène bij de afspeelkop (op een tel als snappen aan staat), en Markers omzetten in scènes maakt één scène per marker, met de naam van die marker. Een scène duurt tot de volgende begint. Sleep op de tijdlijn het begin van een scène om hem te verplaatsen, klik op een scène om ernaartoe te springen en dubbelklik om hem een andere naam te geven.

Vink op het tabblad Scènes van het venster aan welke lagen elke scène toont (een groep is één rij), of gebruik Te zien in in het onderdeel Beat & scènes van een laag. Een laag die in elke scène is aangevinkt, wordt niet door scènes beheerd en is altijd te zien, zoals voorheen. Binnen zijn scènes houdt een laag zijn eigen tijdsbereik, fades, animaties en keyframes, en één laag kan in meerdere losse scènes voorkomen: voor een nummer met couplet–refrein–couplet–refrein heb je elke look maar één keer nodig.

Met een tempo kies je de lengte van een overgang in tellen, van een kwart tel tot een hele maat. De geëxporteerde video toont de scènes en hun overgangen precies zoals de preview.

Op de beat

Selecteer een paar lagen en kies Ertussen wisselen: ze wisselen elkaar af, één om de 1 tot 16 tellen (een enkele laag knippert). Pulseren op de beat geeft de selectie een loop Hartslag op het beatgrid, een puls precies op elke tel. Beide staan in het eigenschappenpaneel van een selectie van meerdere lagen, op het tabblad Scènes en in het opdrachtenpalet, en elke loopanimatie kan Beatgrid (tempo) volgen onder Reageert op.

Effecten & shaders

Stapel een reeks van 20 effecten over het afgewerkte beeld in het paneel Globale effecten, plus 5 WebGL-shaderlagen (Plasma, Tunnel, Fractalstroom, Vloeistof en Sterrenveld) voor wat Canvas 2D niet kan. Elk effect kun je aan- en uitzetten, en 10 ervan kunnen zelf op de audio reageren: koppel er een aan een band en de glitch valt op de beat.

Bloom (GPU), Chroma (GPU), Draaikolk, Bol / knijp, Visoog, Caleidoscoop, Polair en Golf / rimpeling draaien op de GPU (in het menu gemarkeerd met ✦).

Audio- & kleureffecten

Kleurcorrectie per laag (helderheid, contrast, verzadiging, tint) en een voorbewerking van de audio die alleen de analyse raakt (basversterking, filter, limiter) laten je zowel het beeld vormen als datgene waarop het beeld reageert.

Audiopijplijn

BiepBop rendert de video tegen je track en zet de audio terug in het bestand, helemaal op je apparaat. Het beeld wordt met WebCodecs gecodeerd als H.264; de audio wordt gecodeerd naar AAC, of naar Opus als de browser geen AAC kan coderen.

Exporteren & presets

Eén project rendert naar elke feed. Kies een platformpreset of stel een eigen breedte × hoogte in; BiepBop past de compositie aan elke beeldverhouding aan.

Resolutie & framerate

Elke preset rendert in 720p, 1080p, 1440p of 4K, op 30 of 60 fps, of je stelt een helemaal eigen breedte × hoogte in tot 7680 px. Er zit niets achter slot: 4K is net zo gratis als 720p.

Een export beslaat het exportbereik tussen het in- en uitpunt. Tijdcodelagen tellen over dat bereik, en Project → YouTube-hoofdstukken kopiëren zet je markers in de lijst ten opzichte van het begin ervan (zie Tijdcode & hoofdstukken).

Render op de achtergrond, begin aan de volgende video

Een klik op Video renderen maakt een kopie van het project zoals het op dat moment is (de lagen, afbeeldingen, video's en GIF's, lettertypen, de audiotracks met hun plaats, volume en fades, de analyse-instellingen en analyzers, markers, het beatgrid en de scènes, het bereik en de globale effecten) en rendert vanuit die kopie op de achtergrond. Je hoeft er niet op te wachten: bewerk verder, open een ander project uit de projectbibliotheek of begin een nieuw (het paneel Exports heeft tijdens het renderen een knop Nieuw project). Elk bestand komt eruit precies zoals het project was toen je klikte, en een badge op de knop Exports laat zien wanneer er een klaar is.

• Na elkaar: renders komen in een rij en draaien om de beurt, uit zoveel projecten als je wilt. Het paneel Exports toont uit welk project elk bestand komt en wanneer het in de rij kwam.
• Houd het tabblad open: de render draait in dit tabblad (ook als het tabblad op de achtergrond staat). Sluit of herlaad je de pagina terwijl een export wacht of rendert, dan vraagt BiepBop het eerst.
• Geheugen: een wachtende export bewaart de audio van zijn project als het bestand dat je toevoegde (gecomprimeerd: een paar MB per nummer) en decodeert het pas als hij aan de beurt is; na de analyse en de mix laat hij het gedecodeerde geluid weer los. Audio zonder eigen bestand (de demobeat, de ingebouwde loops, en de geluidsband van een video tot het project opnieuw wordt geopend) wacht gedecodeerd, zo'n 20 MB per minuut stereogeluid. Een afgeronde export laat zijn kopie los.

Meerdere formaten in één keer

Onder de formaatkaarten voegt Ook exporteren meer formaten toe aan dezelfde render: vink een van de andere verhoudingen aan (16:9, 9:16, 1:1, 4:5, 21:9) en de knop wordt 2 video's renderen, 3 video's renderen enzovoort: één bestand per formaat, achter elkaar in de rij. Elk bestand krijgt de afmeting van zijn formaat op de gekozen resolutie; al het andere is voor allemaal hetzelfde: het exportbereik, de framerate, het bestandstype, de audio en Transparante achtergrond. Het project wordt bij de klik gekopieerd, dus wat je verandert terwijl de bestanden in de rij wachten, verandert ze niet. De afmeting staat in elke bestandsnaam (Midnight Drive_1080x1920_30fps.mp4), zodat de bestanden elkaar nooit overschrijven.

• Eén analyse, één melding: de bestanden van één klik delen één audioanalyse en mix (de extra formaten kosten alleen hun eigen rendertijd; elk bestand is gelijk aan een losse export van dat formaat), en de reeks eindigt met één melding, zoals 3 video's klaar — 16:9 · 9:16 · 1:1, die ook zegt welke mislukt of geannuleerd zijn. Elk bestand houdt in het paneel Exports zijn eigen rij met voortgang.
• Waar ze heen gaan: Vaste map: allemaal naar die map. Elke keer vragen: je kiest één map voor de hele reeks. In de app houden: ze wachten in het paneel Exports.
• Spotify Canvas staat hier niet tussen: die loop van 3–8 s heeft zijn eigen regels voor lengte, overgang en audio, dus die render je apart.

Plaatsing per formaat

Posities en groottes zijn delen van het beeld, dus een opmaak voor 16:9 heeft in 9:16 meestal wat bijstelling nodig. Zet de preview met de knoppen erboven op dat formaat, selecteer een laag en zet Plaatsing, bovenaan zijn eigenschappen, op Alleen 9:16. Vanaf dan veranderen slepen, schalen en draaien op het canvas, de pijltjestoetsen, Uitlijnen en de instellingen voor positie en grootte die laag alleen in 9:16; de andere formaten houden de gedeelde plaatsing. Selecteer meerdere lagen om ze samen om te zetten. Alle formaten haalt de eigen plaatsing van de laag weer weg (ongedaan maken brengt hem terug).

• De preview in een formaat toont precies wat het bestand in dat formaat krijgt, en in een reeks gebruikt elk bestand de plaatsing van zijn eigen formaat.
• Plaatsing volgt de verhouding: Reels / TikTok en Spotify Canvas zijn allebei 9:16, en een eigen formaat gebruikt zijn eigen verhouding (of de verhouding van de preset waarmee het overeenkomt).
• Het geldt voor positie, grootte (breedte en hoogte, tekstgrootte, schaal van een afbeelding, breedte van een voortgangsbalk) en rotatie van de lagen die je op het canvas kunt verplaatsen, de positie en zoom van een achtergrond (het brandpunt van de afbeelding, of het midden van een radiaal kleurverloop) en de positie en straal van een masker (die twee met hun instellingen in het paneel). Stijl, kleuren, timing en al het andere blijven gedeeld.
• Geanimeerde lagen: keyframes en audio-automatisering horen bij de laag en spelen in elk formaat. De eigen plaatsing van een laag in een formaat is waar hij daar rust, en zijn animatie speelt ten opzichte daarvan: verschoven met het verschil in positie en rotatie, geschaald met het verschil in grootte. Een titel die in 16:9 van links binnenvliegt, vliegt in 9:16 op dezelfde manier binnen, alleen lager en kleiner als je hem daar hebt neergezet. Verplaats je hem met Alleen 9:16 aan, dan verplaats je waar de animatie in 9:16 speelt; met Alle formaten verplaats je de keyframes zelf, in elk formaat zonder eigen plaatsing. De rij Plaatsing en de lijsten met keyframes en automatisering tonen de verschuiving (bijvoorbeeld X +0,10 · Grootte ×0,80).
• In het exportvenster betekent een stip op een chip onder Ook exporteren dat sommige lagen in dat formaat een eigen plaatsing hebben.
• Het wordt met het project bewaard (automatisch opslaan, de projectbibliotheek en projectbestanden) en blijft behouden als je een laag dupliceert of kopieert. Presets, looks en Stijl kopiëren nemen het niet mee.

Canvas-modus voor Spotify

Kies je Spotify Canvas (de knop Canvas boven de preview, of de preset in het exportvenster), dan schakelt de editor over op de Canvas-modus voor de herhalende video van Spotify. Op het moment van schrijven vragen de richtlijnen van Spotify om 9:16, minstens 720 px hoog en 3–8 seconden, en speelt een Canvas zonder geluid; check Spotify for Artists voor de actuele specificaties.

• Lengte: het exportbereik (het in- en uitpunt van de tijdlijn) moet 3–8 s zijn. In de Canvas-modus blijven de handgrepen binnen dat venster en toont een label op de scrubbalk de lengte. Het exportvenster rendert daarbuiten niet en biedt 8 s vanaf de afspeelkop gebruiken en De luidste 8 s gebruiken; het bestand duurt nooit langer dan 8,0 s.
• Naadloze loop (standaard aan): de render begint iets eerder en laat de laatste 0,25–1 s van de video overvloeien in de frames die net vóór het eerste frame komen, zodat het laatste frame naadloos overgaat in het eerste. Begint het bereik op 0:00, dan is er niets vóór: de overgang gebruikt dan het begin van het bereik, en de video wordt zoveel korter. Bij hoge resoluties en framerates kan de overgang korter worden om in het geheugen te passen (het venster meldt dat). De loop in de editor speelt het gewone bereik af; de overgang gebeurt in de export.
• Loopanimaties: met Naadloze loop aan krijgt de loopanimatie van elke laag (Zweven, Pulseren, Wiegen, Draaien, Hartslag, Gloedpuls) voor de export de dichtstbijzijnde snelheid waarmee hij een heel aantal rondes maakt in de lengte van de video. Het venster noemt de wijzigingen; je project houdt zijn eigen snelheden. Schudden, Flikkeren, Glitch en loops die alleen de audio volgen, hebben geen vaste cyclus en blijven zoals ze zijn.
• Audio: standaard uit. Het bestand heeft dan helemaal geen audiospoor. Zet Audio meenemen aan om het geluid te houden.

Transparante overlays

Zet Transparante achtergrond aan in het exportvenster om alleen je lagen te renderen (de visualizer, titels, songteksten, logo's) op een doorzichtige achtergrond, om over beeldmateriaal te leggen in een video-editor of toe te voegen aan een scène in OBS. Al het andere rendert precies zoals in de preview. Transparantie in de preview zet een dambordpatroon achter de preview waar het bestand doorzichtig wordt (het label Transparante preview ✕ op het canvas zet het uit), en Frame opslaan als PNG bewaart dan een transparante afbeelding.

• WebM met alfakanaal: VP9-video (VP8 als de browser geen VP9-encoder heeft) met een alfakanaal. Die speelt met transparantie af in Chrome, Edge en OBS. Met VP9 is het alfakanaal verliesvrij: doorzichtige delen blijven precies doorzichtig, en zachte randen en gloed houden hun exacte waarden, net als in de PNG-reeks. Daardoor is het bestand groter dan een gewone export; de schatting van de bestandsgrootte in het venster houdt daar rekening mee. Video-editors verschillen: controleer of die van jou WebM met alfakanaal importeert voordat je erop rekent, en gebruik anders de PNG-reeks. Het venster biedt WebM pas aan na een snelle test die laat zien dat deze browser zo'n bestand kan maken en afspelen.
• PNG-reeks: één verliesvrije PNG per frame, met transparantie, in een .zip (frame_00001.png, frame_00002.png …). Groot, ongeveer drie keer zo groot als de WebM (het venster toont een schatting), maar het werkt in elke browser die kan exporteren, en video-editors op de computer importeren genummerde beeldreeksen. Heb je een opslaglocatie gekozen, dan wordt het archief tijdens het renderen naar schijf geschreven.
• Audio: standaard uit, want overlays gaan meestal zonder geluid. Audio meenemen voegt de track toe als Opus in de WebM, of als audio.wav in de .zip.

Het bestand gebruiken:

• OBS: voeg de WebM toe als Mediabron (Media Source), of gebruik hem in een Stinger-overgang; de doorzichtige delen tonen je scène.
• Premiere Pro / After Effects: pak de PNG-reeks uit, kies Bestand → Importeren (File → Import), selecteer het eerste frame en vink Afbeeldingenreeks (Image Sequence) aan; wijkt de framerate af, stel dan die van de export in via Beeldmateriaal interpreteren (Interpret Footage).
• DaVinci Resolve: pak de PNG-reeks uit en zet de map in de Media Pool: de genummerde frames komen binnen als één clip.
• Andere editors, ook CapCut: kijk of jouw editor de transparantie van een WebM bewaart, of beeldreeksen importeert.

Waar bestanden terechtkomen

In het exportvenster bepaalt Opslaan in wat er gebeurt als een render klaar is; die keuze wordt tussen sessies onthouden.

• Elke keer vragen: kies vooraf de bestandsnaam en de plek; het afgewerkte bestand wordt daar meteen weggeschreven.
• Vaste map: kies één keer een map, en elke export komt daar automatisch in terecht, genummerd zodat er niets wordt overschreven.
• In de app houden: het bestand blijft in het paneel Exports en je downloadt het wanneer je zover bent.

Je werk bewaren

Alles wordt lokaal in je browser bewaard. Projecten worden automatisch opgeslagen terwijl je werkt, en een projectbibliotheek, herbruikbare presets en een mediabrowser houden je materiaal binnen handbereik. Allemaal in IndexedDB, nooit op een server.

• Automatisch opslaan: je werk staat klaar als je terugkomt. Een chip naast de projectnaam toont of alles is opgeslagen, en waarschuwt als opslaan ooit mislukt.
• Projectbibliotheek: bewaar, open en verwijder projecten met een naam en een miniatuur. Ctrl + S slaat het huidige project op; Shift + Ctrl + S bewaart het als een nieuw project.
• Presets & media: hergebruik opstellingen van lagen en geïmporteerde afbeeldingen, video en audio.
• Back-ups: een nieuw project beginnen, een sjabloon toepassen of een project openen maakt eerst een back-up van wat je had. Bestand → Back-up terugzetten haalt die terug.
• Projectbestanden: Bestand → Projectbestand downloaden (.json) schrijft een kopie die je kunt archiveren of naar een andere computer kunt verhuizen, met media en al.

Installeren & offline

Je kunt BiepBop als app installeren. Hij opent dan in een eigen venster meteen in de editor, blijft na je eerste bezoek werken zonder internetverbinding en is, in Chrome en Edge op een computer, voor audiobestanden te kiezen in het menu “Openen met” van je systeem.

• Chrome en Edge (computer en Android): Help → App installeren… in de editor, of de installatieknop in de adresbalk.
• iPhone en iPad: tik in Safari op Deel → Zet op beginscherm. Het menu van de editor laat de stappen zien.

Is er een nieuwe versie, dan biedt een kleine balk aan om de pagina opnieuw te laden. Hij laadt nooit vanzelf opnieuw, wacht tot een export klaar is en bewaart eerst je werk. Instellingen → App toont of BiepBop offline werkt, hoeveel opslag je projecten gebruiken, en een optie Mijn werk bewaren die de browser vraagt de opslag van BiepBop niet te wissen als de ruimte opraakt.

Sneltoetsen

De studio is gemaakt om met het toetsenbord te bedienen. Dit is de volledige lijst, dezelfde die de editor toont als je op ? drukt, dus hij loopt nooit achter op de app.

Veelgestelde vragen