Audio Recorder error ❌

Julia · November 24, 2020, 9:56am

Hey, @lweili, got it I’ll transmit all the info to the dev team. We need to see how feasible it is to implement. Anyway, thanks for your feedback

Best, Julia.

Dumitru · January 27, 2021, 2:54pm

Hello @lweili

Thanks for provided feedback and support!

We’ve managed to add new formats support for recording:

.mp3
.m4a

Please upgrade to latest version of plugin, place the element on page provide the settings and give it a try.

Best,
Dumitru

lweili · February 9, 2021, 8:29am

This is great! iOS rejoice! @Dumitru

There is one bug I noticed with this update, it does not encode the media length on to the file.

So playing the file back does not display a seek bar, here is an example of a 10 second clip:

This happens with all the other formats as well, not just the new mp3 & m4a.

Any chance you could have a look?

Much appreciated

lweili · February 10, 2021, 5:09am

A few other issues I’ve been noticing, I’m usuing the M4A format & all files are rightly saved as .m4a files, but use different audio codecs.

If recoreded from Safari it uses a PCM audio codec (as VLC reports).

This will not play back on Safari with the html audio MIME Type “audio/mp4”, however if changed to “audio/mpeg” it does play back for some reason. Bubble doesnt let us change this, so I tested it on a html file outside of Bubble.
The PCM codec format is also an uncompressed format so the file size is much too large will hit the 50mb limits very quickly resulting in an error.

If recorded from Chrome (android or desktop) it uses the OPUS audio codec.

This seems to only record in Mono despite the plugin settings showing Stereo
The OPUS codec format is not supported on Safari at all despite supporting .m4a files

As for the MP3 format, both Safari and Chrome records using the PCM Codec. They both playback normally on the browser.

For clarity, I know that an M4A file is actually a container file type not the underlying file format. What seems to work most consistently is the MP4 container format with the AAC audio codec which is natively supported by desktop/mobile Internet Explorer, Safari and Chrome.

I’m definitely no expert on this subject, and appreciate how complicated things can get, is this something you can look at closer?

Thanks as always,
Wei

alexandru · February 15, 2021, 2:10pm

Hi @lweili,

Thanks for your feedback. Let me jump in here to help. Sorry for a delayed reply - we are already investigating your request with our dev team as well. I’ll notify as soon as we have an update on this matter.

Best,
Alex

Oinelly · February 20, 2021, 4:46am

@alexandru

Hi, I’ve been using this plugin for few weeks now, great plugin by the way.
I have found that the recorded files with the use of Android devices cannot be played with iOS safari though, EXCEPT wav file. I really don’t want to use wav file because it’s gonna be 5 times larger than mp3 or some other files. I tested every codecs and only wav file is working for Android and iOS devices compatibly.

I appreciate it if you could fix this issue.
Thanks.

Oinelly

alexandru · February 22, 2021, 3:19pm

Hi @Oinelly ,

Thanks for reaching out. Could you please indicate the Android and iOS versions that you are testing on, as well as browser versions, so we can investigate this on our end to see where the problem might be.

Best,
Alex

Oinelly · February 25, 2021, 4:13am

@alexandru
Thanks for your reply. The devices that I use are:
Android)
OS: Android 10
Device: ASUS_Zenfone
Model: ASUS_X00QD
Browser: Chrome 88.0.4324.181

Android)
OS: Android 7.0
Device: 507SH
Model: 507SH
Browser: Chrome 54.0.2840.85

iOS)
OS: 14.4
Device: iPhone 11 Pro
Browser: Safari Mozilla/5.0 (iPhone; CPU iPhone OS 14_4 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1

By the way, it’s playing perfectly fine with my mac browser.

Best,
Oinelly

alexandru · February 25, 2021, 4:48pm

Hi @Oinelly,

Thanks for additional details. I’m afraid this is something we cannot influence on because it depends on the supported media formats by iOS & Android in their browsers. You can find the information here and here.

We have been investigating this issue for a while, and in case of desktop browsers there are little issues with it, the only thing that is causing troubles is the Safari playback which is a problem on their end, which again we cannot influence unfortunately.

Best,
Alex

alexandru · February 26, 2021, 2:19pm

Hi @lweili,

We managed to fix the Mono/Stereo bug in Chrome browser. Please upgrade the plugin to the latest version, refresh your app and give it a try again.

Note: on a Mac, it will generate a Mono even if the plugin setups are Stereo, because Macs have 1 channel only by default, but in case you plug in an additional device to it like headphones, it will generate a Stereo. You can find more information here.

Regarding playback in Safari, this is a problem at the browser level which we cannot influence on, unfortunately.

Thanks for patience.

Best,
Alex

lweili · February 26, 2021, 3:17pm

Much appreciated @alexandru. Thanks for debugging quickly.

Gotcha on the mono/stereo piece.

I understand that the playback is dependent on the platform and the browser. So I am looking for a media file/format/codec that will work across all of them. My preference is still the M4A format with a AAC codec S it works on both safari and chrome and across platforms. But it seems like it’s being encoded in OPUS in Chrome and PCM on safari.

Is there any possibility to use AAC instead?

Thanks as always

alexandru · February 26, 2021, 3:43pm

Always welcome @lweili!

This is true.

Unfortunately, we are not able to influence on this matter at plugin level. The encoding depends on the browsers as well. We can propose the format, but the codecs it alone decides based on its possibilities.

Hope it helps.

Best,
Alex

lweili · March 4, 2021, 3:32am

Thanks @alexandru, I understand.

I did more testing and I still cant get the audio files to play consistently across browsers and devices. Here is what I found:

TL:DR: non-iOS MP3 recordings don’t play on iOS. Everything else works. If we can somehow make this work. That would be magic.

MP3 Recordings made on Windows, Android, Mac (Chrome) can’t play back on iOS (Safari & Chrome), but will play on Windows, Android, Mac (Safari & Chrome)
MP3 Recordings made on Mac & iOS (Safari & iOS Chrome) can play back on iOS & Others (Safari & Chrome)
M4A Recordings made non-iOS devices can’t play back on iOS
M4A Recordings made on iOS devices can play back on iOS
Safari iOS & Mac MP3 & M4A Recordings are encoded as uncrompressed audio (10x the file size)

This defeats the purpose of having MP3 & M4A as small compressed formats that will work across the major decives and browsers.

–

Something I came across today for recording mp3 audio across devices & I’m hoping this helps as it worked when playing back mp3 files on iOS recorded from Android & Windows: Recording mp3 audio in HTML5 using vmsg - a WebAssembly library based on LAME
Demo: Simple vmsg audio recording demo - addpipe.com

I really appreciate the attention and the effort to fix, but these inconsistencies are hurting the ability to rely on this plugin, especially with bubble being web based, it is difficult to dictate users to only use a certain device and browser.

Could you let me know if this can be fixed?

Screen shot from an iOS device

alexandru · March 4, 2021, 2:13pm

Hi @lweili,

Thanks for catching up. I can understand your request, but there is little we can influence on this matter, unfortunately, because cross-browsers functionality depends on multiple factors as you mentioned in your list: formats, codecs, browsers etc.

For example, the iOS will never register an audio in MP3, because they have their own format that works, but doesn’t always guarantee to be working among other devices, browsers etc.

However, we’ll consider your inputs anyway, to be added to our improvement roadmap list, but it is in the long-term perspective.

Our plugin comes with a feature to select the format you’d like to record your audio, but the codecs and cross-browsers, as well as file sizes, is something we cannot influence at this point, unfortunately.

Thanks for understanding.

Best,
Alex

lweili · March 4, 2021, 11:19pm

Here’s to hoping Safari opens up their media formats more soon. There has been recent news about that, like webm for 4k video 2 weeks ago.

Thanks again @alexandru

alexandru · March 5, 2021, 9:29am

Always welcome @lweili!

lweili · April 14, 2021, 6:43am

Great to see regular feature updates for this plugin.

Tested the mp4 format today on Windows, Android & iOS. So far it only works on Windows. Is that intended?

Serg · April 14, 2021, 5:39pm

Hi @lweili, thanks for your question.
Allow me to quote my colleague’s reply to the discussion above, which also fits your question.

Thus, I’m afraid, there’s nothing we can do at the moment, unfortunately. Apologies for the inconvenience.

Regards,

lweili · April 15, 2021, 4:27am

The thing is that the recordings made on windows with the mp4 format are encoded with AAC, this plays back fine across iOS.

The problem is that the MP4 recordings made on iOS and Android is not even being captured by the plugin, ie, at the end of the recording, Audiorecorder A’s value is empty.

Serg · April 15, 2021, 3:04pm

Hi @lweili, allow me to check once again with the developer team about this.
Once I will get feedback, I will let you know.

Thank you.

Regards