Recording Audio in React and Persisting to a Rails Backend

React-Mic works just like any other React component. Below’s a jsx example…

To briefly describe the recording process.

This leads into the first “gotcha” moment I want to share. After dispatching this pizzicato sound and blob to my Redux store, when I checked in my Redux DevTools extension, my currentBlob and currentRecording appear empty! Peep for yourself…

I haven’t found any sources talking about this, but perhaps the Redux DevTools interface just isn’t setup to display the weirdness of file-esque blobs.

To confirm that the pizzicato sound and blob had been delivered to the store, I just did console.log(currentRecording)andconsole.log(currentBlob)inside the container component that had the redux state mapped to its props. After repeating the recording process, this showed in the console…

Lo and behold! They really are there after all.

Pizzicato then made it super simple to hear that recording. I just made a playback button that when clicked, has a method that calls this.props.recording.play() and boom! You hear that sweet sound you worked so hard to get! Thank you Pizzicato for awesome built in methods, they have so many more and especially cool stuff if you want to start manipulating the sound itself with distortion, delay, reverb and whatnot.

The next main step was to get that bad boy recording across the great grand divide between client and server. After researching the internet for how people approached this problem, some recommended base64 but the route I attempted was to use FormData, both of which were totally foreign to me.

Creating the FormData was straight forward and was constructed like so…

Then I’d use the createSaying method (shown below) to send this FormData to the backend. Now as with every other POST request I had made up to that point, I’d attach some content type headers to be friendly with the backend. The first thing I found said to supply 'multipart/form-data' as the content type. See below…

However this completely failed. The error message looked like this…

Viola! I don’t exactly know why and still haven’t found an explanation. Any thoughts or knowledgeable people on the matter feel free to let me know.

The last steps of this audio process involved Active Storage which does a totally boss job of attaching the recording to another instance and setting up the necessary associations. That’s a topic for another episode because it’s really a whole can of beans to itself.

This was a challenging and rewarding project. Sometimes problem solving is so rewarding because you felt like you overcame an obstacle with your brain power and resourcefulness. Other times the solution doesn’t satiate your frustration very much because it wasn’t something that required you to cleverly think your way through it. Rather you had to laboriously pick up thousands of different rocks to see if the certain specific key you needed was under one of them. In the moment of uncovering the solution to the content headers issue in my POST request, I was probably equal parts elated and angry. It was this procedural detail that seemed illogical and without explanation. But the fact that it worked meant I could move on. It also meant I retained enough diligence in the face of resistance in order to find the solution. So that’s a good reminder to hold onto the next time there’s a problem like this. Perseverance baby, that’s just the name of the game!

Related posts:

From freelancing and consulting by myself to running a team of 5, working with clients in 10 countries has been a hugely transformative experience. Yet I’m constantly shocked and distressed to see…

Many developers share tight deadlines and the struggle of being overworked. Often, there is not enough time to keep up with state of the art or to test new approaches or libraries. If you are one of…

Geocoding is the process of taking input text, such as an address or the name of a place, and returning geo-coordinates (latitude/longitude) of that location on the Earth’s surface. E.g. We have…