Dial-a-Story is a neat program from Washington County Public Library System. The way it began, the public could dial a local number and hear a different story read over the phone each day. The narrator, Rick McVey, does an amazing job bringing the stories to life.
WCPL wanted to put the MP3 files of all the stories online so that patrons could listen to any story from the archive at any time. When we first implemented this, we used WordPress’s audio playlist feature, divided by seasons. But we knew there was a better way to display this and it needed to be something custom. We also knew we could use WordPress to do the job, but we really wanted to try something new.
So here’s the stack..
Content Management
We knew that the content model was pretty easy. There are categories which have stories. Each story has a title and MP3 file. We thought we’d try an a headless content management system, for which we chose Directus. There were a lot of MP3 files, so storage was a concern. For this, we used AWS S3 since that offers virtually limitless storage at a modest price. To make sure the media loads quickly from anywhere, the S3 bucket is behind a CDN (AWS CloudFront).
The Front End
We chose React to create the front end. There’s nothing fancy here – just create-react-app. We made the app a Progressive Web App, which makes it installable on mobile devices much like an app from the App Store.
Hosting
We’re using Netlify to build and host the site. It’s so easy to use. It doesn’t cost anything. If we need functions later, they’re there. It’s awesome.
The Result
The result is a custom media player application that lets people listen to a story any time, any place and in any browser.
