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/

A nes version of SPLOTbox where you can record directly into it.

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.

A new option for sharing!

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

Animated GIF of the steps in SPLOT audio recording.

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!)

New theme options for "Enable HTML5 audio recorder for direct saving to media library. Requires site running under SSL" and "Maximum Recording Time"

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

Speak into the Microphone
Speak into the Microphone flickr photo by cogdogblog shared under a Creative Commons (BY) license

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?

CC0 Image from Pikrepo no attribution given because you don’t have to if you are just a license rule follower. I spent some time trying to find a source, but just came up with more pages using it without attribution.

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.

2011/365/84 On The Air
2011/365/84 On The Air flickr photo by cogdogblog shared under a Creative Commons (BY) license
If this kind of stuff has value, please support me by tossing a one time PayPal kibble or monthly on Patreon
Profile Picture for Alan Levine aka CogDog
An early 90s builder of the web and blogging Alan Levine barks at CogDogBlog.com on web storytelling (#ds106 #4life), photography, bending WordPress, and serendipity in the infinite internet river. He thinks it's weird to write about himself in the third person.

Comments

  1. Wow. This is amazing, Alan! These things live and die in the workflow, and this takes out all of the wrinkles that would get in the way of sharing audio. Amazing! Anything that removes friction from a sharing workflow results in a 580% increase* in the quality of shared content.

    * I just made that up, but it’s a helpful statistic…

    1. 60000 times more quality…

      I’m rather excited about this, not for audio production by people who know how to do it, but a standalone way to have it all in a self contained site. And asking people to record on mobiles gets you in a world of weird formats and asking folks to convert. This can do it all without the middle steps.

      Still experimental– the WebRTC stuff not well supported or at all on iOS. Have to trouble shoot some.

      Give it a try!

    1. Like many things it’s probably possible. There are a few plugins out there that enable audio comments; though from what I saw they all make use of third party servers to store the audio.

      My aim was to create a way to record audio directly into the WordPress media library; I guess a button could be added to a comment form to attach said media to a comment.

      It’s got a ways to go, this was just a “taped together just enough as proof of concept”.

      Cheers, Alan

Leave a Reply

Your email address will not be published. Required fields are marked *