How-to

How to add a SoundCloud music player

Soundcloud

Musicians, DJs and sound producers, this one’s for you. Moonfruit customer and radio imaging producer Ian Pinnell shows how to easily get your music or any other audio track playing on your website with SoundCloud and our HTML Snippet Widget.

“So you’re someone who works with audio: you might be a musician, in a band, a solo artist, producer, broadcaster, or simply someone who just loves audio. You’ve got a nice looking website, but you really need your visitors to hear how you sound too. For this, I’d recommend SoundCloud to upload audio files, which can then be easily embedded into a Moonfruit site.

“SoundCloud allows you to create your own profile and share your audio with the rest of the world. It’s easily linked to Facebook and, like Twitter, you can follow people and be followed back. There are various accounts available, including a free option that allows you to upload around two hours of audio for free.

“Click ‘Upload’ on the top black menu. Click on ‘Choose file to upload’ and add your file.

SoundCloud

“While your track is uploading, you’ll be asked to add a title, description, photo and tags (to help other users find your track). Uploads mustn’t contain copyright material, although SoundCloud has a good feature that should stop this.

“Once complete, click ‘Save’ and you’ll see your audio online.

“Below the uploaded track, there should be various icons. Click ‘Share’, then ‘Embed’ and choose your preferred type of player: a picture square or the longer version that also showcases the waveform of the track (personally, my favorite).

SoundCloud

“If you want the player to reflect your website’s colour scheme, go to the ‘More Options’ drop down menu. From here it’ll change the play button and waveform colour.

“Once happy, copy and paste the code as shown (begins with “<iframe width…”), and head on over to your Moonfruit site.

“Go to ‘Insert’ then ‘HTML Snippet’. This brings up a striped box and ‘Editor’ pop-up menu.

Rollover buttons

“Click ‘Setup’ in the Editor box tab, then paste the code you’ve got from SoundCloud. Click ‘Apply’, edit the width of the box to fit your requirements and you’re almost ready to go!

“You won’t be able to see how it looks until you preview your website, so save and click ‘View my site’ in the top right box. This should now show the player with your chosen colours and size.

“If you have multiple uploads you can also give the user an option to hear more from you, straight from the player on your site.

Pinnell Productions

“The ability to embed these players into your site, and adapt the the length and colour, makes it even more user friendly for those visiting, and I quite like that you can see the waveform. It’s quite quirky (in a geeky way), which adds an extra element to your overall site too.

“Downsides, if you stay on the free account with its two hour limit, you’ll have to cull some of your older uploads to make room for newer audio. However, monthly subscription ‘Pro’ accounts allow up to four hours (£2.50p/m) or unlimited (£7.50p/m) material – quite reasonable.

“Also, if someone comments on your awesome track via your SoundCloud page, there’s an option to enable it to also appear on your Moonfruit website.

“And remember, check who’s following your SoundCloud account, and follow them too. It’ll get your music and sounds out there further – certainly a good tool for collaboration and experiencing new sounds.

“Give it a try, and see how it works (and sounds) for you!”

Have any tips you’d like to share by writing for us (or even appear in a video – sorry, UK based only)? Let us know below!

Fancy building your own website for free or how about having us build it for you?


Marcel Reinard
Senior content producer

More posts by this author


2 Responses to “How to add a SoundCloud music player”

  1. Lindsay Hollom

    Hi, thanks for info here. I got as far as Share on Soundcloud but there was no Embed option, so I was unable to get it on to my Moonfruit website! I’m on the free version of Soundcloud – perhaps Embed is only for those on the Pro Soundcloud ???
    Regards
    Lindsay

    Reply
    • Steven

      Hi Lindsay,

      You just have to ensure that you have set your music to be embeddable. This is a setting within Sound Cloud and works on free and paid accounts.

      Cheers,

      Steven

      Reply

Add a comment

  • (will not be published)

More posts by this author