How to Create Audio Player with React.js and Electron.js


Intro Video - How to Create Audio Player with React.JS in Electron.JS

with kuzzmi|8 years experience|JavaScript


Watch Full Video | +150 LEDU

How to Create Audio Player with React.js and Electron.js

  • English
  • Programming
  • React.jsReact.js
  • (846)
  • Project length: 1h 04m

There are so many audio players out there, all with their unique features. Throughout this series I will cover all the details of creating your very own music player, so you can build it from scratch, add your own features, adapt to how you see fit, and through it to the wild!




In this tutorial I'll explain how you can create desktop applications using React.js and Electron.

In the end you'll be able to quickly develop products for your personal use, or to bring some of your ideas to the real life.

What are the requirements?

Must have:

It would be awesome if you have some:

  • Experience in building layouts with HTML/CSS

You will learn how to:

  • build React components
  • interact with filesystem from React
  • work with HTML5 Audio API
  • extract ID3 metadata from MP3 files
  • add cool features like "play random" or "repeat one"
  • ...and more!

What is the target audience?

  • You want to build an audio player from scratch?
  • You want to understand how to develop things from end-to-end using Electron?
  • You've heard you can use JavaScript for everything, but were wondering how?
  • You want to learn new stuff?

Then look no further! This project is for you!

Streaming schedule

Weekly 6pm EST Monday, and Wednesday.

Project Outline

Session 1 - Setting up environment

We will:

  • Install Node.js
  • Install Electron
  • Install libraries, tools:
    • Webpack
    • Babel

Session 2 - Playing first song

We will:

  • Create basic UI using Semantic UI
  • Load and play audio track using HTML5 Audio API

Session 3 - Working with ID3 tags

We will:

  • Explore how to communicate with Electron
  • Extract metadata from MP3 files
  • Work with multiple files

Session 4 - Playlist

We will:

  • Explore dialog submodule from Electron to add files
  • Add playlist viewer
  • Add feature to add files

Session 5 - Bonus features

We will add a few features that will polish what we have develop so far:

  • Random play
  • Repeat tracks
  • Save and load a playlist


Average rating

5(846 Reviews)