How To Embed Audio On Your Website, and When You Shouldn’t Bother
There are plenty of valid reasons why you should embed audio onto your website; maybe you’re in a band and want your visitors to be able to listen to your music without having to be re-directed, or maybe you’re a voice over artist who needs to showcase the range of your work. For these good reasons, you need a good embedded audio player to use on your site, one that won’t drive you in circles trying to make it work for all browsers and, well, all of your fans.
Then again, it’s also important to know when you should avoid embedding an audio player on your website altogether. Alongside a helpful list of great embedded audio players to give your website a sonic edge, we’ll also cover a few do’s and don’ts when it comes to sound on your website.
Basic Audio Etiquette
Don’t set your audio player to “auto-play”: Nothing is more irritating for a visitor than to arrive at a site and have to frantically search for the “mute” button.
Forget “mood music”: Assuming that your visitors will appreciate a bit of mood music is almost always misguided. This rule should be heeded especially by e-commerce and personal websites.
Stay Consistent: If you choose to embed an audio player on your website, pick just one, not multiple players. Staying consistent with your audio player will help you to best track the number of plays your songs are getting, as well as to streamline the design of your site.
The Best Basic Audio Players: Widgets
Widgets for popular social music streaming sites are an easy way to embed audio onto your site while tracking how much play your songs are getting.
Soundcloud Widget: In order to embed a Soundcloud player onto your IM Creator-designed website, simply select the Soundcloud widget from the “Widget” menu in your drag & drop editor. A player will immediately appear on your page, and can be adjusted to your Soundcloud account simply by changing the hyperlink.
Mixcloud Widget: Mixcloud is exactly what it sounds like: A Soundcloud-like social audio player designed especially for mix-tapes. Popular among DJ’s, Mixcloud offers a widget that can be embedded onto your website with a bit of easy HTML code.
BandCamp Widget: BandCamp is known in the music world as a fan’s one-stop-shop to discover new music, and their widget for band websites is designed with music lovers in-mind. You can choose between a single player or a player with a track list for easy browsing, each of which come with an option to include a graphic of an album cover to draw your visitor’s eyes in.
More Basic Embedded Audio Players
There are dozens of embedded audio players available to download (mostly for free), but it can sometimes be difficult to determine which ones will work best for your site. Here are our favourites:
Flowplayer: Whether you’re just figuring things out or are a master of design, Flowplayer offers a huge variety of options to customise and embed audio and video players onto your own website. Flowplayer is designed with HTML5 in mind, meaning that it will correspond well with your IM Creator-built site.
Cincopa: Cincopa is another leader in embedded audio, and offers plenty of “skins” to suit your website’s design. What really makes them stand out, though, is Cincopa’s responsive design capabilities; their audio players play just as smoothly and beautifully on a desktop as they do on a mobile device.
Not So Basic Audio Solutions
Sometimes, basic just doesn’t cut it. For the more adventurous among us, some very helpful resources are out there to aid you in creating your very own, fully customised audio player. Meanwhile, if you’re having trouble figuring out a glitch with your player, we have just the troubleshooter for you:
Sound Manager 2: Audio players tend to suffer during transitions from old web technology to new ones, but Sound Manager 2 has you covered. With their APIs and tools, you can make sure that your audio player transitions seamlessly between Flash, HTML5, and other systems. Sound Manager 2 also offers a bunch of experimental audio player prototypes to play around with, as well as some very cool data visualisation players.
W3 Schools: W3 Schools is a fantastic general resource for any coding questions one might have, and they don’t disappoint when it comes to breaking down common problems with embedding audio onto your website.
Image Credits:
Skip The Use @ Brussels Summer Festival 2012 by didy b
