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:
React App Default Homepage
If everything went as planned, you now have a React application running and you're ready to embed the Mixclound media component.
Advertisement
Get $50 in Free Credit for 30 Days!
Try the simplest cloud server platform for developers & teams.
Sign Up Now
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.
Embed Streamable Video into a React Website
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!