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.
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.
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 a programming code that could be written for a similar project.
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:
Here are several lines of code illustrating the React component that uses the player functionality shown above:
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.
On the CodeSandbox you can explore code examples in more detail.
After performing the steps above, we created a music player that further became the essential component of the client’s Social Music Web Platform.
Have questions? We welcome any feedback and will be glad to start a discussion in the responses section.
