Record audio in browser


(theron_hp) #1

Hi

I’ve been trying to get a user to record short audio snippets, and allow them to play it back. If needed, download it to their device. I’m trying the javascript library route, because native code is not my forté.

The coders that create these type of setups code with javascript only, but Hype’s structure is a little different, and therein lies the rub.

I’ve tried to set up a project with the code from a demo here.

I don’t want the selectType option. It should rather be .wav or .mp3 by default.(I think I prefer .mp3)

My project: record2.zip (368.1 KB)

I thought I’ve learned enough to be able to do this by myself at this point, but quite a few hours down the line redoing everything over and over… It feels like something from Groundhog Day.

Your help is appreciated.

H


(Jonathan Deutsch) #2

I recorded a video showing the debugging of this; hope it helps:

Here’s the working version:

record2-fixed.hype.zip (362.8 KB)


(theron_hp) #3

Thank you @jonathan.

If you did not know you are a Rockstar, I’m just reminding you. There was no way I would have been able to figure this out.

Thank you for taking the time to make the video. I learned a lot. Espacially debugging. I appreciate it.

H


(Mark Hunte) #4

They say a picture speaks a thousand words.

But your video speaks a million.
Awesome job @jonathan


(Jonathan Deutsch) #5

Glad that helped - it was not exactly a simple integration nor simple problems!

I don’t know exactly what your goals are, but you could also add this as an iframe/HTML Widget instead of hooking into Hype if you don’t need too much change on the original code.

That’s the thing about videos, there’s a lot of frames so the words multiply up :wink:.


(theron_hp) #6

Hi @jonathan

I’m trying to take your iframe suggestion further with another solution. It uses HTML code to create the functionality I need, and also adds a polyfill for browser compatibility like for Safari and Edge.

It is available here.

Using their polyfill demo here, I have an issue with it being in an iframe. It blocks microphone access because it is in an iframe. It only works in firefox. The warning says that:

index.html:1 AudioCapture permission has been blocked because of a Feature Policy applied to the current document. See https://goo.gl/EuHzyv for more details.

This site here explains it.

So I apparently have to add this line of code to the iframe.
<iframe src="https://ai.github.io/audio-recorder-polyfill/" allow="microphone"></iframe>

Any idea where I can add it?

Thanks
iframeUseTest.zip (32.4 KB)


(Jonathan Deutsch) #7

Unfortunately you can’t set those attributes on Hype’s HTML Widget (though this is a good feature request!).

Instead of using an HTML Widget, us a Rectangle, remove all styling, and then add that iframe code as Inner HTML. You’ll probably also want to set width/height attributes to 100% so it fills the Rectangle element.

<iframe src="https://ai.github.io/audio-recorder-polyfill/" allow="microphone" width="100%" height="100%"></iframe>

This works for me.


(theron_hp) #8

Thanks @jonathan.

That works. Do you want me to add it officially as a feature request in the forms?


(Jonathan Deutsch) #9

No need, already filed :). Thanks!