One of our clients, a Music Tech Company, came with a request to develop a web version of their Social Music Platform. They wanted to have an online music player that would provide advanced functionality and responsive design.
After interviewing the client and analyzing the requirements and documentation attached, we started to look for the solutions. We saw that most of them are over-complicated; therefore, we decided to develop a custom music player.
Disclaimer: in this article, we present code examples (not currently executing one)! Here, we would like to share our experience of creating a custom music player with TypeScript illustrating each step with programming code that could be written for a similar project.
Technology Used to Develop the Custom Music Player
Let's go over the tech stack that we used to create the custom music player. To deliver all player's features according to the requirements, we built the music player's core functionality on TypeScript
For UI development, we used React, Next.js, Redux-Toolkit, Material-UI.
For custom styling of Material-UI components, we used the CSS-in-JS approach.
Custom Music Player Development: Step-by-Step Guide
Step 1: Split the Project into Modules
Firstly, we split the project into modules. One of the modules works with the logic of track playback: play/pause, track length displaying, next/previous, volume control, etc. Also, please note that we used the publish-subscribe pattern and wrote a small implementation - pubsub.ts.
Another module includes the functionality of the track playback and playlists management. See the code example below:
Step 2: React Component Usage
Here are several lines of code illustrating the React component that uses the player functionality shown above:
Step 3: Background Mode for Video Files
And here is an example of how a special player’s background mode for video files can be written. In that mode, we can move from one screen (or page) to another, and the video continues to play without any interference.
In this example, you can see: when a user switches the player from background to foreground mode, the video expands back, and the audio track continues to play ‘seamlessly’ with no pauses.
After performing the steps above, we created a music player that further became the essential component of the client’s Social Music Web Platform. You can learn more about it in the corresponding "Social Music Platform" case study and explore more code examples in the CodeSandbox in more detail.