How to add a SoundCloud music player

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.

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

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

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

“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!

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

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

You can place the music player on your page master and set it to autoplay. However, due to the pages being rendered in HTML 5 the music player will reload on each page load so you will notice an interruption.

Hey Ian. I’ve been trying to add audio through SoundCloud as per your instructions above. I continually get all the way to pasting the HTML snippet in the Setup field of the Editor when the Editor shifts into Object Name mode and its text field directs me to select an object. At wit’s end.

Hi David,
Apologies for the delay. For any technical queries you’ll need to submit a support ticket through your account. Let us know if you have any more trouble and once again, I apologise for the delay.
Amita

i uploaded my song,but i only wanted a snippet or preview of my song,,it is now in its entirety .i didn;t see anything about embed or moonfruit,,can this be fixed so that i only have a snippet of my song.if i need to send a ticket on how to do this,,,where do i get this?? thanks

Hi Darrell, you’d probably have to cut your music first so that is the length you want it to be, and then re-upload. If you want to send tickets, you need to be on a paid subscription. You can send tickets from your account in Moonfruit by hovering over the top right menu and choosing the ‘Support’ option.