Adding a Soundcloud Player On Your Website

Kenny Yoon
2 min readAug 4, 2021

A lot of you might have already heard about Soundcloud, a music streaming and sharing platform that allows anyone with a basic account to upload, share, and stream their own tracks.

Just as how easy it is to share and distribute your own tracks through the Soundcloud website or app, it is also incredibly simple to embed a Soundcloud Player on your own website.

Soundcloud, by default, has a sharing option that provides users a pre-built iframe element that can simply be copy&pasted.

soundcloud.com

After pasting this code to render, you’ll now have a fully functional Soundcloud player on your website.

If you’re using React, another option that’s left for us is to use React Player. In this case, you would only need the URL of the Soundcloud track you want to post.

1. Run ‘npm install react-player’ on your terminal

2. import ReactPlayer from “react-player”

3.

optional*

You can set width and height attributes for simple sizing, and also a config attribute to override certain properties of the Soundcloud Widget. For more customizable properties, check out the parameters for Soundcloud here.

Well that was easy!

--

--