A sampler needs four things working together: a reliable clock, a loaded sample library, a grid people can read at a glance, and a playback engine that stays in time while someone edits it. The clock is the hard part. Browser timers drift, so the sequencer has to be driven by the audio clock rather than by animation frames, otherwise the beat wanders as soon as the page gets busy. Start with the grid. Sixteen steps across a bar is the convention most people already recognise from hardware and software samplers, and it maps cleanly onto a phone screen. Give each step more than on and off, since a soft and hard state per step buys musicality without adding a single control to the interface. Group samples into kits, let people preview a sample before committing it, and allow tracks to stack so a beat can build up in layers. Load matters as much as logic. Samples should be short, compressed and fetched up front so the first tap makes a sound immediately, and the loop should already be running when someone arrives so there is nothing to start. A working example is Recycled Records, a campaign experience for Sprite that let anyone build a beat from sounds recorded inside a plastic recycling plant, made with producers Mark Ronson and Madlib. Its sampler, developed by Amsterdam creative development studio Merlin with design studio WØRKS, gives each track sixteen steps with off, soft and hard states, kits of recycling samples, stackable tracks, a tempo control and an autotune effect, all in the browser with no plugin or app.

A visualizer listens to the audio as it plays and turns what it hears into motion. In the browser that means reading the sound coming out of the audio engine, pulling out how loud or how bright it is several times a second, and turning those numbers into something on screen, usually with Canvas or WebGL. WebGL works better once you want thousands of things moving at once, since that work happens on the GPU, leaving the main thread free to handle the audio and the interaction. The design choice matters more than the technique. A visual that reacts to everything just looks like noise. Pick the one or two things that actually carry the music, and let the rest of the visual hold still. Tie the movement to something the brand already owns instead of a generic waveform, so it stays recognizable even as a small thumbnail. Recycled Records, the Sprite campaign built around an album made from the sounds of plastic recycling, does this by turning the campaign logo into bubbles that move with the beat. Switch a step on, and you see it happen right away. The bubbles never miss a beat.

The export needs to match whatever the destination actually accepts. On social platforms that means video, even when what someone made is just sound, since a plain audio file has nowhere to go on a feed. So the export takes the audio and pairs it with something visual, then combines both into one file. After that, clear away everything standing between finishing and sending. A native share sheet works better than a download, because it hands the file straight to whatever app someone already has open, instead of leaving it in a folder they have to go dig up. Keep the file light enough to send over mobile data, and make the visual reflect what that person actually made, so it feels like theirs and not a template. On Recycled Records, a Sprite campaign where people made beats out of recycling sounds, the finished beat and its visualizer come together as one video, made right there on the person's own phone, then passed straight into the native share sheet.

Yes. A phone or computer can capture what's on screen along with the sound and turn it into a video file right there, on the device. That means no render farm, no queue, no waiting for something to upload and come back. There's a real cost to that: turning it into video takes real processing power, so the whole thing has to stay simple enough for an ordinary phone to handle, and it behaves differently enough across devices that it needs testing on each one rather than assumed to work. The upside goes beyond saving money. What someone makes stays on their own device unless they decide to share it. There's no file storage to protect. And the experience can't get overwhelmed no matter how many people show up at once, since every export runs on that person's own phone or laptop. For a campaign that might suddenly spike in traffic, that takes the ceiling away completely. Recycled Records, a Sprite campaign that invited people to make and share their own beats, made its shareable videos this way for exactly these reasons. Merlin, the studio behind it, built the export tool itself, and it was one of the earlier campaigns to work like this.

Two kinds of people show up, and each needs something different in that first minute. A beginner needs to get to something that sounds good without reading instructions, which comes down to good presets, defaults that already sound right, and a short tutorial that's easy to skip. Someone who actually makes music needs room to go deeper, which comes from what's hiding underneath, not from piling on more buttons. Usually the answer is doing less. Every extra option chips away at a beginner's confidence and barely helps the expert. The strongest version keeps a handful of controls, each doing one obvious thing, with plenty of range inside it. One tempo dial with a wide range beats five separate buttons. Being able to stack tracks beats a full mixer. Recycled Records had to work for both these people at the same time. It took the actual sound library Mark Ronson and Madlib used to make their album and handed it to anyone who happened to land on a Sprite campaign page. So it leans on presets and a short tutorial to get anyone to a beat they like fast, while still offering stackable tracks, tempo control and effects for people who want to build something real.

Design for the phone first. Most people will experience something on a phone, and audio behaves differently there than it does on a desktop. The player needs a real tap to start sound, since phones won't let audio begin on its own. It needs to hold its place when someone switches apps or locks their screen, since that interrupts it. And it needs to show what's happening, not just play it, because sound through a phone speaker or headphones can lag a beat behind the action. Performance matters, but only as far as it serves the experience. Visuals and audio are both demanding, so the two need to be built to not get in each other's way. Motion should ease off for people who prefer that. Buttons and controls need to be sized for a thumb, not a cursor. And it all needs testing on an ordinary, slightly older phone, since that's what most people are actually holding. Recycled Records was built mobile-first for exactly this reason. It was a campaign experience, reached mostly by phone, so the sampler, the visualizer and the video export all behave the same way on a phone as on a desktop.

People show up for the thing they can play with. So the explanation needs to sit on the path to that, somewhere they'll pass through, not off to the side. A short story first, then the proof, then the interactive piece last. That order means someone who came for the toy walks past the reason it exists, and ends up holding something they can actually use. The interactive part should do the arguing itself. When the thing people play with is the actual subject of the campaign, the message already lives inside it. Every minute someone spends there is a minute spent inside the brand's own world. For example, Recycled Records is built this way. This campaign for Sprite exists to explain why Sprite switched from green plastic to clear, since clear plastic lets a bottle get recycled into another bottle. The site opens with that story and a film about the switch. Then it plays the album Mark Ronson and Madlib made out of recycled sounds. Then it hands over those same samples in a sampler you can use yourself.