Silence is overrated, and these websites prove it (headphones required)
This month, we’re taking a look at websites which make noise; whether through clicking buttons, resizing your browser or typing.
Let’s be honest, some websites are notoriously monotonous (HMRC), whilst others are notoriously fun-filled (It’s Nice That). It’s safe to say that this month’s Double-Click selections fall under the latter, united by the fact that they all serve the same purpose – to make noise!
Whether it’s learning the trombone, mimicking the vocal cords, or following a soundscape journey, these websites are all linked because of the sounds they can make. So get those headphones on (unless you want people staring at you whilst you make virtual gurgling sounds) and get experimenting…
Matthew Rayfield: matthewrayfield.com/goodies/popup-trombone
In stark contrast to the theme of last month’s Double-Click, this site, created by Matthew Rayfield, is as minimal as it gets. The result is something that takes absolutely nothing away from the main objective – playing something (sort of) reminiscent of the trombone.
“Originally I made a popup theremin where width controlled pitch and height controlled volume,” he explains to It’s Nice That. “To visualise it, I tried some sound wave looking stuff, but I didn't like it. Then the trombone idea popped into my head, and I thought it'd be a super intuitive way to represent the usage.”
To play the different notes all you need to do is drag and resize the browser window, which subsequently moves the trombone slide along. The result is sounds, maybe not trombone sounds, but sounds nonetheless.
“It could sound more like a trombone if I used some sort of synthesis library…” says Matthew. “But nahh.”
Martin Wecke: martinwecke.de/beats
In reaction to the complex and impenetrable controls for websites like Ableton, Martin Wecke decided to focus on simplicity in his music-making site. “I wanted to explore creating music that is more visual and tactile: Move dots in space and push some buttons,” he says.
There are two sections to Martin’s site, an unbelievably easy to use clickable beat machine, that makes the least talented musicians feel skilled, and a triangle arpeggiator that changes when dragged.
As Martin is a designer as well as a developer, thought has gone into the aesthetics of the site as well as the usability. “Colorful geometric shapes and small type on a black background creates a retro interface vibe,” he says. “Think of the visual hints printed on top of synthesizers or KIT’s dashboard.”
It’s a very addictive site to use, the reason for which he sums up rather succinctly: “It’s kind of fun to think of the browser as your DAW and each browser tab as an instrument.”
“The interface is created using pixiJS and the wonderful ToneJS is used for the sounds. Apart from that no fancy build tools or libraries are involved.”
Andrew Mccarthy: postconscio.us
Veering away from music but continuing with sound, Andrew McCarthy’s experimental aggregation of Tweets is as intriguing as it is unnerving.
The premise is simple, search a subject on the site, and it will read out Tweets on said subject using reverbed Amazon Polly text-to-speech.
The visual language is very deliberate, taking inspiration from film imagery: “The site is intentionally sparse, putting the user into a void and keeping the focus on the audio being generated,” says Andrew. “The red dots representing the disembodied voices are a nod to classic sci-fi, and the few elements present are meant to emphasise the dystopian connection between humans and technology.”
“The site uses the Twitter search API to return relevant text data which is then read aloud via Amazon Polly text-to-speech. AJAX calls are made to a server-side PHP app which fetches the Tweets, removes things like hashtags, usernames, emojis and other undesirable text, and returns a generated voice MP3 in real-time. The Web Audio API is used to queue and play the MP3s, provide audio levels, and for the ability to add reverb with Reverb.js. Three.js is used to map this audio data to the reactive animated dots.”
Flavio Gortana: andrewpekler.com/phantom-islands
This immersive project explores the phenomenon of Phantom Islands, places that were mentioned and charted during the age of exploration, but have since never been verified.
The project, which was made in conjunction with the Jeu de Palme Espace Virtuel in Paris, takes the form of a map that you can journey across, with unique sounds accompanying each island alongside texts explaining their history.
The concept, sounds and words were created by Andrew Pekler, whilst the design and development was by Flavio Gortana. Instructed to keep it as minimal as possible, Flavio had to ensure the sounds took centre stage: “We wanted to set a clear focus on the audio experience,” he says. “From the very sober style of the landmasses to the typography and the boxes holding it, I created a map that does no less and no more than being a simple navigational tool.”
“The technical setup was quite simple. There was no CMS or backend technology involved. It was built using standard, modern days web technologies. To create the map I used map box which allows you to style every aspect of it on every zoom level. I used d3 to create the few UI elements and for some calculations. To play the sounds and control the sound effects I used tone.js.”
Neil Thapen: dood.al/pinktrombone
Now, this one surprisingly has nothing to do with a trombone, and is in actual fact about the way we make noises with our mouth. The site observes how sounds are made, allowing us to see how muscle movements cause tone and pitch to change.
“The site shows a cartoonishly abstracted part of the inside of the human body, looking like something between a medical illustration and an unknown musical instrument,” says creator Neil Thapen. Muscles in this cartoonish cross-section can be moved by dragging different parts of the image, resulting in a plethora of silly sound options.
He toyed with a different style of presenting it, but decided against adding more detail that could cause distraction: “At one point in development I had more annotations on the controls (such as the tongue positions that produce various vowels) but I decided these took away from the feeling of exploring sounds for yourself.”
With advanced design capabilities and specialised features, Wix gives you the freedom to design and customise a website that expresses your vision, no matter your brand or business. To save 30 per cent on all yearly premium plans with Wix, use code “DoubleClick20” at checkout.
Wix Playground is dedicated to celebrating design culture and freedom, giving creatives the tools they need to grow, connect, and experiment. Promoting fresh and bright voices, Wix Playground provides our community of multidisciplinary designers insights to shape their online presence using Wix’s professional design capabilities.
Double Click is our monthly round-up of some of our favourite websites and digital designs floating around out there on the world wide web.
About the Author
Charlie joined It’s Nice That as an editorial assistant in December 2019. He has previously worked at Monocle 24, and The Times following an MA in International Journalism at City University. If you have any ideas for stories and work to be featured then get in touch.