In my previous career in academia, I developed software programs to facilitate language teaching and learning. It was a rewarding job. I loved putting my programs into the hands of teachers and students, and seeing the students benefit from my work.
I found a niche to specialize in: web-based audio recording. Our center’s most popular tool was a simple audio recorder that a teacher could put into any web page. Students used the “audio dropboxes” to submit their speaking homework for the teacher to evaluate.
The technology required the Flash plugin, because plain HTML didn’t have a way to access the computer’s microphone. Flash was THE technology in the early 2000s. But it didn’t last. The introduction of the iPhone was the death sentence for Flash. It probably isn’t an overstatement to say that Steve Jobs killed Flash. Apple made the decision not to support Flash on the iPhone. When mobile started to overtake desktop computers, Flash was in trouble. So was my suite of tools.
Fast-forward several years. Flash is now disabled by default on desktops. I doubt any cell phones support Flash. Adobe recently announced that Flash will officially die (again) at the end of this year. But while Flash was dying, HTML was growing up. HTML’s capabilities have largely caught up with Flash. The HTML specification has matured so much that it’s possible to do a lot of what Flash had been used for. Including native audio capture. Even on the iPhone!
Like the rest of the planet on lockdown, I have some extra some time on my hands lately. Because I’m a nerd, I recently decided to see if I could reproduce Flash’s audio capture functions with native HTML. My goal was to be able to capture audio on my iPhone, and then upload the file to a remote server. All in native HTML. Essentially, I want to reproduce my old Flash-based functionality on an iPhone.
It’s been several years since I did any serious web programming. Javascript has matured and advanced. My old brain has matured and decayed. Besides refreshing my programming knowledge, I had to learn some new programming protocols before I could dig into the guts of the new WebAudio specification. It all came back to me, though (eventually). After several weeks of work, mostly on evening and weekends, my universal audio recorder is ready for beta testing. I call it the Dencorder, because shut up, it’s mine, and I can call it whatever I want.
The Dencorder, beta release, as it appears on an iPhone. This is 100% HTML, CSS, and Javascript. Even the graphics are generated by Javascript code.
Â
The code is as pure and standards-based as I could keep it. I didn’t use any frameworks or libraries (not even JQuery). It’s just plain, vanilla HTML, CSS, and Javascript. On desktop computers and Android devices, this should just work. If you’re using an Apple device (iPhone or iPad), you will have to make a setting change in Safari to enable the new MediaRecorder function. But once that’s set, the recorder should work fine.  And the whole thing, Javascript code and web page, is all less than 600 lines of code. I could probably shave another 100 lines off if I were a good programmer. But I’m not a good programmer, just a clever amateur.
Feel free to play with it. See if you can break it. There is an “upload” function, which will put your audio file onto my server. If you choose to upload your audio file, please don’t record anything naughty. You can access the Dencorder here: https://denniehoopingarner.com/audiocontext/recorder/. I had a lot of fun making this, and to experience how far HTML has come in the last ten years.