It’s On! Direct Audio Recording into a SPLOTbox Site

Ever since I did some fiddling to make the SPLOTbox WordPress theme be a way to collaboratively create podcasts, I’ve had another dream tapping away. I could hear it.

Tap. Tap. Tap.

I wondered if it was possible to put a thing right in the page to record audio and have it save to the media library. There are plenty of HTML5 audio recorder code chunks. There’s one built into H5P. Most of these though end up offering you a download. I thought the info from Google Developers Web Fundamentals on Recording Audio from the User was close.

In the end I went with Video.js Record that Tom Woodward suggested via twitter DM. It’s a heap of other libraries, stuff to do the waveform, but it had some examples on using more ones that could convert to mp3.

I have a first public demo running at https://lab.cogdogblog.com/splotbox/

When you use the Share link on this SPLOTbox, you have a third option- in addition to adding media by URL or uploading… there is a new Record Audio option.

This brings up the recorder interface. Watch the sequence of steps.

You always must click the microphone button first which then prompts another window where you grant access to the microphone (that’s all to prevent code from recording without your knowledge). You are then waiting, and as you make sound, you can see waveforms moving. If they are small, you might want to check your input levels or move closer.

Then click the red record button (circle) in bottom right. It’s now recording! The button turns to a square one which you click to stop. The play button can be used to review. If you don’t like it, click record again to do-over. This is all just creating recorded data in your browser… the magic happens when you click Use This Audio. By javascript/ajax/duct tape, this will upload the audio as mp3 to the media library, and insert the URL into the other field used for submitting audio by URL.

Then you enter the ther typical SPLOT information- title, description, captegory, source, etc.

You can see… er… hear… the very first audio ever directly recorded and saved into a SPLOTbox.

This is… rather amazing. Well I think so.

A Few Things

This is like very alpha. I’ve tested it locally and now once on a server. When I tested on my iPhone it failed to show the waveforms or record.

Also, and it took a lot of banging on the pipes, I discovered that the underlying code uses WebRTC for accessing you microphone. I did not see it anywhere but it will only work on localhost testing or a server with SSL enabled (e,g, https:// urls). That’s where I found my little static HTML test worked, but my Varying Varying Vagrants environment would not (I since learned how to enable it’s SSL features).

I set up a new theme option that enables the recorder; but you will only see theses ones if your site is SSL enabled (comes free and automatic on Reclaim Hosting, thanks Reclaim!)

I also set an option so you can limit the length of audio recording time (this is a parameter passed to the audio recorder object).

Also, I was able to fudge the setup of the recorder interface so it scales to the width available (the demo card is hard wired at 600px); but it’s not responsive. I think I can rig something that changes the width and height if the window size changes.

Just for a wee bit of code, in the JavaScript that sets up the player, I set the width to the width available, and make the height haf of that.

Using Video.js Record calls for something like 6 remote JavaScript libraries and 2 CSS ones. For some reason I had trouble using local copies of them and was making remote calls to CDN hosted versions, but now it’s all local. Sure there’s some heft added, maybe 600k of data… but look- IT’S AN AUDIO RECORDER!

I found the interface buttons not quite intuitive, so I figured out via CSS how to color the bottom record button red so it stands out, and also, using all of the controls and steps in recording, how to generate some prompts in the status area I added below the player.

The demo code I lifted from automatically uploaded a recording, but I pulled that into a seperate function called from a click on the Use This Audio button.

This triggers some JavaScript that does an ajax upload of the audio (stored as a “blob” in the session) to the WordPress library. This was just a slight twist from the code I have been using to upload images.

I’ll save you from code overload, but it will be up on GitHub really soon.

Step Into the Booth

I’ve thought earlier this year I broke some new SPLOT ground, with a working TRU Writer as a pure plugin, with removing the need for secret special accounts, adding more media support to SPLOTbox … but this is big, right?

With support for podcasting feeds, moderation options, and now recording, this could be a one site podcast studio. The thing you get with this… is an ability to have people contribute content.

But maybe there are other uses. Field reports. Interviews. A way to do audio reflections.

This came up to on a site I made fo my wife Cori’s high school students. It’s a WordPress space for kids at 3 different schools to write and give peer support, but she has a current project where the students are posting audio stories.

Finding a way to do this has been challenging. School computers don’t have audio software, and even tough most kids have smartphones, there’s not much uniformity in the file formats they can save as. I did find one web site audio recorder that saves as MP3, but it could not be embedded… and the audio quality was horrible. The current approach was asking them to use the media app all their phones have- video, and cover the lens, just record audio. Online-Convert has a great web-based tool that the students can upload video from their phones, and it extracts audio that can be downloaded as mp3. These in turn are uploaded as media to WordPress. If I could get this audio recorder built in, then it could be done in much fewer steps.

I’ve got some ideas of turning the recording capability into it’s own plugin, so it could be added to a WordPress site maybe as a shortcode or maybe in the authoring side.

I did look at plugins before I went down this road. What I found were (a) ones that cost money (no); (b) ones that relied on an external third party service to host audio; (c) or ones that just aimed at adding the ability to get comments via audio.

Nothing fit my need/desire, something that could not only record but save directly to the WordPress library.

This is BIG, right?

I think this could be BIG audio. Am I off base?

Well?

Is anyone game to try?

Got ideas how this might be used?

---

Featured Image: Mine. I attribute anyway even though I don’t have to.