MemPlayer
I recently whipped up a simple audio player dedicated to listening to long audio files across multiple listening sessions.It's called MemPlayer and you can try it here.
The problem MemPlayer solves:
I listen to most audiobooks in the excellent Libby app. It nails the core use case: remembers playback position, gives easy controls for jumping back/forward, and gives granular control over playback speed.
Sometimes, though, I have a book (or other long audio recording) as a single standalone audio file. I still need all of those features for easy listening across multiple days.
Instead of finding an existing app with exactly what I need, I experimented to see how quickly I could whip up a simple utility app using ChatGPT. I found the low overhead of web development plus ChatGPT to be a killer combination.
I started with this prompt:
Generate HTML, JavaScript, and CSS for a simple web app with these requirements:
- The user can browse their local disk to select an audio file
- Alternatively, the user can drag and drop an audio file onto the web app
- The web app allows the user to play the audio file, change playback speed, and skip forward and back by 10 seconds
- The web app stores the file in local storage and restores it when the page is refreshed
- The web app stores the current playback position and restores it when the page is refreshed. This way the user can load the page and resume what they were listening to.
- There is a clear button which causes the web app to forget the current audio file and playback position
This produced code for index.html, scripts.js, and styles.css that gave me 90% of what I needed. The UI was good, but the web app did not work perfectly.- The user can browse their local disk to select an audio file
- Alternatively, the user can drag and drop an audio file onto the web app
- The web app allows the user to play the audio file, change playback speed, and skip forward and back by 10 seconds
- The web app stores the file in local storage and restores it when the page is refreshed
- The web app stores the current playback position and restores it when the page is refreshed. This way the user can load the page and resume what they were listening to.
- There is a clear button which causes the web app to forget the current audio file and playback position
I steered it with a few specific suggestions in subsequent prompts, mainly to use IndexedDB to store the audio file because its original choice, localStorage, can't handle big files. I also needed to fix a bug in restoring playback position. I then made some minor style and user experience tweaks, added PWA metadata and icons, and was done!
Overall, I was able to whip this up in about an hour, with some of the fixes and tweaks done on the go.
I think there's a lot of potential to make custom tiny tool web apps with low effort this way. And one of the best parts of the web is that nearly everyone can use these tools without any setup across their phones, tablets, computers, etc. And they will hopefully continue working for decades to come without any developer intervention.