How to Create Audio Player with React.js and Electron.js
- 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 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?
- Basic Node.js knowledge
- Basic React.js knowledge (you can watch my another tutorial to get to know React.js - How to create Todo App in React.js)
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 want to learn new stuff?
Then look no further! This project is for you!
Weekly 6pm EST Monday, and Wednesday.
Session 1 - Setting up environment
- Install Node.js
- Install Electron
- Install libraries, tools:
Session 2 - Playing first song
- Create basic UI using Semantic UI
- Load and play audio track using HTML5 Audio API
Session 3 - Working with ID3 tags
- Explore how to communicate with Electron
- Extract metadata from MP3 files
- Work with multiple files
Session 4 - Playlist
- 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