tips video website

4 Killer Examples of Website Audio Done Right

4 examples of website audio done rightWebsite audio has gotten a bad rap. Many people think sound has no place on the internet, that web browsing should be a silent experience.

Then again, YouTube is one of the most popular search engines – and websites – out there, and audio is a key component of successful video. So where’s the disconnect? Why is video championed and audio shunned, when they are so similar?

The only logical explanation is that too many websites have spent too many years doing audio wrong. I’m talking about the auto-music-playing, Angelfire-hosted sites of the late 1990s that brought the the trend of having autoplayed music on your website totally mainstream. It wasn’t really a great idea then, and it’s still not.

But that was years ago, and the Internet has changed so much! We’ve had Facebook for almost an entire decade! Surely, we’ve thought of a much better way to use audio on websites!

Many people don’t think so, but here are 4 websites that have embraced audio and are using it to great effect:

1. Skullcandy Supreme Sound Journey

skullcandy supreme sound journey review

I took care to avoid typical “music” sites for this post, because musicians, bands, and performers really can’t sell themselves without sound. I couldn’t pass up this great project from Skullcandy, though. Some background for you: Skullcandy sells headphones and audio equipment with a very particular target market – snowboarders, skaters, and surfers. In recent years, their products have gone mainstream and are sold in big-box stores like Target and Best Buy, but the company remains focused on their action-sports audience.

As an audio company, it makes sense for Skullcandy to include audio on their website, but with the exception of videos featuring their products, audio is a bit under-represented.

Then, I found the Supreme Sound Journey. To explain the new “Supreme Sound” feature, Skullcandy says, “Experience music the way it should sound. Skullcandy introduces Supreme Sound, the ultimate in audio quality featuring a full range of attacking bass, natural vocals and precision highs.” Essentially, the site tells the store of Skullcandy’s high-quality audio through text, video, celebrity endorsements, and some cool scrolling. Plus there’s background music that’s on-brand and would highlight Skullcandy equipment.

Let’s break it down:

  • Music: Yes
  • Autoplay: Yes
  • Sound Controls: On/Off switch, but not volume control
  • Videos: Yes
  • Interactive: Somewhat – users can click to explore videos and the scrolling is cool, but there’s not much to “play” with.

2. 60 Years in 60 Poems

60 years 60 poemsThe project, “60 Years in 60 Poems” celebrates the Diamond Jubilee of Queen Elizabeth II. It combines poems from Jubilee Lines with audio recordings, photographs, and video footage from the past 60 years, marking significant historical milestones.

The site itself lets visitors search content by theme (time, identity, migration, desire, celebration, etc) or by year (1953 – present). There is, essentially, one poem per year. As the visitors scrolls down the page, round disks (they’re like records!) with years and themes appear, and the visitor can hear the poem by pushing the play button in he center of the disk, which spins as it plays.

Some records are white, while others are blue. The blue records include additional interactive content like video, additional audio clips, and photographs from that time period and event.

Overall, the site is media-rich, but a bit difficult to use. The scrolling is a bit odd, it takes a lot more scrolling to get from one record to another than you would initially anticipate, and it’s not obvious how to access the content right away. Nevertheless, I was able to get through it fairly quickly.

The breakdown:

  • Music: No
  • Autoplay: No, unless you click on a video. Videos and images look the same, so it can be hard to tell which you’re starting.
  • Sound Controls: Play button for poems, but no volume control. Videos autoplay with sound when clicked.
  • Videos: Yes
  • Interactive: Yes. Users can explore poems by topic or year, brows through images in a unique interface, and play images.

3. Sound Creatures

sound creaturesSound Creatures is a project created by Composer and Sound Designer David Kamp. He says, “I created a set of creature sounds and asked some brilliant illustration and animation friends what they think this creature looks like”. Then, he took the project to the Pictoplasma character design festival and had attendees do the same. The festival drawings and their accompanying sounds are on display here.

The gallery loads to a random sound, which automatically starts playing. The user can then click through the drawings on screen (either click the drawing to the left or right, or use the bottom navigation) and see the different creatures created by festival attendees. Using the top arrows will switch to a new creature sound.

The interface is interesting, and it’s enlightening to scroll through the different sketches to see how similarly or differently people will interpret one sound.

The breakdown:

  • Music: No
  • Autoplay: Yes. Each creature sounds autoplays on page load.
  • Sound Controls: Play/Pause button with no volume control.
  • Videos: No.
  • Interactive: Not really. You can scroll through sketches and change the sound, but that’s it.

4. Les Paul Google Doodle

les paul google doodleI’ve definitely talked about the Google Doodle before. The “Doodle” is the ever-changing logo you’ll see on Google’s homepage. They update it for holidays, remembrances, dates of historical significance, and things the Google team just likes.

One Doodle that had musicians everywhere geeking out was the doodle to commemorate Les Paul’s 95th Birthday. This doodle was an interactive electric guitar (Les Paul was a pioneer of the solid-body electric guitar) that could be played and recorded.

This doodle made its debut on June 9, 2011 (on what would have been Paul’s 96th birthday) and was hugely successful. Within 48 hours, US Google users recorded 5.1 years of music on the doodle guitar. Not to mention, well, we’re still talking about it today.

The breakdown:

  • Music: This example doesn’t play music, it makes music.
  • Autoplay: Kind of? The sound is automatically on, but you’ll only hear it if you start strumming the doodle.
  • Sound Controls: None, but you can record.
  • Videos: No, just the animation itself.
  • Interactive: Completely. Go try it and play a song!

Key Takeaways

Autoplay is not always the enemy (But that doesn’t mean it’s right for you, either).

I was surprised how many of these great examples automatically played sound. But I am still not sold that it’s the right decision for most brands. Skullcandy playing music that appeals to it’s core audience on one section of the brand’s website isn’t a big deal. Similarly, visitors looking at Sound Creatures likely expected to hear the creatures – it’s in the name! – so autoplay wasn’t inappropriate.

BUT, autoplaying sound is very, very risky if you don’t have a hyper-targeted audience like Skullcandy and Sound Creatures. Can you imagine going to Google’s homepage and having a song play automatically? Their user base is very broad, and it’s likely many would be dismayed by the audio. It might be enough to force them to hit the back button and search on Bing instead!

So, my official line on autoplay is that it should be avoided.

Controls are a MUST.

Even if you’re not auto playing sound, you want to give your visitor a way to play, pause, and change the volume. Many of these sites didn’t give me volume control. I wanted to make Sound Creatures just a bit louder, and Skullcandy could have been a bit quieter (I’m not quite their target audience, although I do covet their Aviator headphones!). The videos on “60 years…” didn’t have play buttons, which was a disappointment.

Interactivity is key.

Sound works best when it’s part of something else, not when it’s just there. Adding videos, images, animations, or text that can complement the audio is a great way to make the content more interactive. It will also help the audio content become more valuable and experiential to the visitor.

Leave a Reply

Your email address will not be published. Required fields are marked *