Record audio in browser

Elements Audio & Video
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

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)

6 Likes
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

1 Like
4

They say a picture speaks a thousand words.

But your video speaks a million.
Awesome job @jonathan

2 Likes
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:.

2 Likes
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 Deprecating Permissions in Cross-Origin Iframes - The Chromium Projects 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)

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.

8

Thanks @jonathan.

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

9

No need, already filed :). Thanks!

10

Hi there, I am a beginner. Do you think I can add this “Audio recording” feature into my hype file and then have it exported to x-code directed and finally got it submitted to Appstore?

Best regards
Thanks!

11

There’s no reason why it isn’t technically possible, but the path of creating an app and having it approved is not a simple one! I recommend trying it one step at a time.