Embed Mixcloud Media Into a React Website

Introduction

In this article, we're going to walk through the process of embedding a Mixclound media component into a React application/website. To do most of the heavy lifting, we'll use the ReactPlayer npm package and React component to embed the video.

Let's get started!

Table of Contents

Create a React Application

Before we can add ReactPlayer and our Streamable video, we need a React application we can work with. The easiest way to do this is by using the Create-React-App npm package. It allows us to build react apps quickly and with no build configuration.

Install Node.js

First, you'll need Node.js installed if you don't have it already.

If needed, we created a guide on installing Node.js. It covers installations for Linux, Windows, and macOS.

With Node.js installed, we can move on to the next step.

Create App with Create-React-App

Now we're ready to create the React app.

To make things quick and easy, we will use the Create-React-App npm package. It's a quick way to build React applications with no build configuration.

To create the app, use one of the following commands (depends on what method you prefer):

Npx

$ npx create-react-app your-site

Npm

$ npm init react-app your-site

Yarn

$ yarn create react-app your-site

Test App on Local Host

Now that your application has been built, let's test the site locally to make sure it's working. Inside the newly created project, you can run some built-in commands.

In the terminal window, move into your project folder with the command:

$ cd your-site

Then, run one of the two following commands to run the application:

Npm

$ npm start

Yarn

$ yarn start

When the application is done compiling, you should see a similar message in your terminal:

Compiled Successfully!

You can now view your-site in the browser.

Local: http://localhost:3000/

On Your Network: http://192.168.42.125:3000/

Note that the development build is not optimized.

To create a production build, use yarn build.

Your application is now running and you can view it in your browser:

http://localhost:3000

You should now see this or something similar when you visit your website in the browser:

If everything went as planned, you now have a React application running and you're ready to embed the Mixclound media component.

Add Mixcloud Media

We'll be using the ReactPlayer npm package to embed a Mixclound media component.

Let's get ReactPlayer added to our React application.

Install ReactPlayer Npm Package

Open a terminal window and navigate to the root directory of the Create-React-App application you created earlier.

Then, execute the following command to install the package and save it to your project's dependencies:

$ npm install react-player --save

Or you can install it using Yarn with this command:

$ yarn add react-player

Now we're ready to add it to our app.

Add ReactPlayer Component To Your App

Open the Create-React-App application we created earlier in your favorite text editor. We need to make updates to the App.js file in the src directory.

Update App.js File

Open the /src/App.js file for editing.

Update the contents of the App.js file to look like this:

// /src/App.js

import React from "react"

import ReactPlayer from "react-player"

function App() {

return (

<div>

<ReactPlayer

url="https://www.mixcloud.com/Johnny_B/back-in-the-daze-volume-02-july-2019-oldskool-91-93-hardcore-mix-by-johnny-b/"

controls

/>

</div>

)

}

export default App

The main things we do are import the react-player npm package and then add a component to our page called ReactPlayer.

Then, we added the URL of the Mixcloud media component (replace this with the Url of the video you want to embed) and a style object to the ReactPlayer component.

ReactPlayer provides many more options for general and service-specific playback. Check out the project's Github page if you want to learn more.

View Your App

Open your app in your browser and notice the changes. If all went well, it should look something like the screenshot below.

The ReactPlayer component is now embedded in your webpage!

Conclusion

Congratulations! You have successfully embedded Mixcloud media into your application.

Good luck in your coding endeavors and let us know about the cool stuff you build in the comments section below!