How to add a music player to Carrd

In this tutorial, we'll go over really simple ways you can add music to your Carrd website.

Before you move on, if you need Carrd website inspirations or ideas, here are 28 Carrd website (hand-picked) examples. From K-pop fan pages, personal portfolio website, marketing landing pages, to simple one page business websites. There's something for everyone.

Alright. With that out of the way.

There are 2 ways to add Music to a Carrd website:

1. Add a music link from Soundcloud or Bandcamp — If you want to customize the music player.
2. Add music via code embed — If you want to save time adding a music to the site.

Note that code embed is a premium Carrd feature.

If you find yourself creating more than a handful of Carrd websites, then the paid plan offers tremendous value.

Now let's get on with the tutorial.

How to add Music with a link

In this example we'll use Soundcloud as a demo, but you can easily do the same with bandcamp. These 2 are the only music platforms that Carrd supports at the moment.

1. Get the music link from SoundCloud

Login to your Soundcloud account and click into the song title you want to add to your Carrd website.

2. Copy music link

Click Copy Link, you should see a pop up from the top right confirming you have copied the Soundcloud link.

3. Tidy up the music link

The default Soundcloud link has tracking codes that are not supported by Carrd.

Paste the Soundcloud URL in an editor and remove the question mark (?) and everything that comes after it — these are all the tracking codes that Soundcloud adds by default.

Copy the remaining URL and head over to the Carrd editor.

4. Add an Audio element to the page

Back in Carrd, Click the + button on the top right and select the Audio element.

Paste the Soundcloud URL (without the tracking code) in the URL field.

You should now see the Soundcloud music appear in the editor.

You won't be able to play the music yet, as you need to publish your website first.

5. Publish your site.

Hit the burger menu from the top right and click Publish.

You'll be asked to create a title, description and the URL for your Carrd site.

Once done, click Publish and View Site and your Soundcloud Carrd site is ready to play :)

6. Customizing Soundcloud music player

You can customize the Soundcloud music player to some extent. Select the Soundcloud element in the editor and click the Appearance tab.

Here, you will find a list of settings to customize the music player:

• Style
• Width and height
• Music player options to hide

There is a minimum width and height for the music player so you can't make it too small or invisible.

However, you can design a minimalistic music player but unchecking all the unnecessary music player options.

Publish the website once again to view the changes.

How to add Music via code embed

Again, we'll use Soundcloud as a demo, but you can easily do the same with Bandcamp.

1. Get the embed code from SoundCloud

Login to your Soundcloud account and click into the song title you want to add to your Carrd website.

Click the Share button and you will see a pop up.

Head over to the Embed tab and copy the embed code.

2. Add an Embed element

Head over to the Carrd editor and add an Embed element.

4. Paste the embed code

Paste the embed code that you copied from Soundcloud into the Code field.

Click Done to save the embed code.

Note that you won't see the music player in the main editor. To view the music player you have to first publish the Carrd website.

5. Publish your site.

Hit the burger menu from the top right and click Publish.

You'll be asked to create a title, description and the URL for your Carrd site.

Once done, click Publish and View Site and you will see the embedded Soundcloud player.

David Nge

David is the founder of MakingThatWebsite.com and started making websites for businesses back in 2014. He's a keen learner and wants to share his journey and knowledge with other business owners and freelancers. He launched MakingThatWebsite.com in 2021 to make website building more approachable and scalable for businesses.

Have a tutorial you want to learn? Leave a suggestion here.