We’ve reached the end of our allotted time to work on our Electron app. For our project we built a simple MP3 player in the spirit of Winamp using Vue for our rendering framework. The project was a lot of fun and will be something that we’ll continue to work on and bring to a more polished state. Given that we’d never worked with Vue, Electron or audio of any kind prior to this project, we were happy to reach an MVP in the week we were given.
Amptron uses some built-in features in Electron to access the user’s file system to gather a file path and then passes it to a couple functions to create a song object that is passed into the playlist. The song object has information like artist, album, track-name, track-duration and the file path to that song. The play-list is stored in local-storage for persistence. When the app is loaded it queues up the first track in the play list and waits for the user to click play. Once a track completes the next one is played, the forward and back buttons load the next or previous tracks in the playlist and play them automatically. The base styling is just that, and we will keep working on polishing up the styling in the next couple of weeks. This is Amptron-Alpha.
Future features we plan to implement are:
- Select/load multiple files to the playlist at once.
- Bulk delete from the playlist.
- Add drag and drop functionality to the playlist.
- Make and style our own player and play controls — the HTML5 audio element cannot be styled currently.
- Double-click a track to start playing anywhere.
- Shuffle.
- Fetch album art and display it somewhere in the app.
- Split the app components into separate windows that ‘snap’ together like the original WinAmp.
- A further off feature we’d like to add is an in-app library browser that parses the FileSystem and lists your music library by artist/album/track.
I really enjoyed working on this project and diving into my first desktop app. I’m excited to start thinking about how to port some existing projects to Electron and to think in the native/desktop space when creating future projects. The repo can be found here, take a look and leave a comment or open a PR :)
