Silence is overrated, and these websites prove it (headphones required)

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.”

Languages used:

“Just JavaScript! It's awesome what you can with standard Web APIs these days. Unless I have to do something complicated (like 3D) I avoid external libraries.”

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.”

Languages Used:

“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.”

Languages Used:

“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.”

Languages Used:

“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.”

Languages Used:

“It’s Javascript in a single HTML file, created without using any libraries.”

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.