Introducing Mixmotion - an Open Source Music Player with Fullscreen Visual Effects

I'm excited to share Mixmotion Player - a free open source React music player with Mixcloud integration and dynamic fullscreen visual effects 💥

On playback, you'll enter an immersive lean-back mode, with a huge variety of dynamic backgrounds appearing after a few seconds of user inactivity.

To quickly see it in action click on the video above, you can also check out the app or source code via the links below:

👉 Try out the free app here 👈

👉 Dive into the source code 👈

Installation

Developers can install Mixmotion Player as an open source component to use in React apps. Quickest install method is via the npm i command below:

npm install mixmotion-player

Usage

After install, import the player and render MixmotionPlayer in your own app with a Mixcloud URL. It will use default settings for the other non declared props.

import { useEffect, useState } from "react";
import { MixmotionPlayer } from "mixmotion-player";

function Demo() {
  const [url, setUrl] = useState("");

  useEffect(() => {
    setUrl("https://www.mixcloud.com/discover/trance/?order=latest");
  }, []);

  return <MixmotionPlayer url={url} />;
}

export default Demo;

The advanced demo and official web app illustrate how the component can be customised further. Props are specified for custom buttons, video backgrounds and local data (saved items). A complete list of props are detailed further down this page.

<MixmotionPlayer
  url={url}
  showsData={getSavedData}
  customButtons={customButtons}
  backdropVideoList={backdropVideoList}
  enableBackdropVideo={true}
></MixmotionPlayer>

The Github readme details the props available plus the more advanced methods and hooks available to you.

Why Another Player?

There are plenty of web players and widgets already available from the likes of Soundcloud and Mixcloud that you can integrate into your app.

Mixmotion offers something different; an immersive, full-screen playback experience with unique visual effects, while still providing free access to Mixcloud's vast music catalogue.

What Sets It Apart?

• Mixcloud Integration: Simple yet versatile access to Mixcloud content that goes beyond their official widget. Access playlists, user sets, genres, tags and individual shows, with the ability to privately save favourites via local storage and share mixes.
• Dynamic Visuals: Artwork combined with canvas effects and video motion backgrounds generate a captivating blend of imagery within a rich, immersive music player.
• Broad Device Support: Designed for mobile, desktop and TV devices. Touch, cursor and arrow-key navigation help make the user experience smooth across platforms.
• Future Considerations: Integration with local file paths, audio streams and other music services like Soundcloud. Real-time audio visualizations and beat detection are also being considered.

How Does It Work?

Under the hood, the component is built on top of the official Mixcloud API and Mixcloud Widget. It also utilises another custom component of mine - Dynamic Backdrop - to create a blend of videos layered with css and canvas animation effects. Videos are given random 'blend modes' so they merge with the canvas background to give various colour effects.

Support

I hope this post has given you a good intro to the web app & component and you get some enjoyment out of the music and visuals!

💬 Fire over a comment if you have any feedback, requests or issues 🐛

⭐ Smash us a Github star if you like the app or component 🙏

🔗 Share your favourite sets in the app to support the talented DJs 🙌