Sound recording in Safari browser causing javascript on playback in all browsers

[rgabo74]

Found another bug in Safari related to sound recording. When a recording is made in Safari desktop browser, the following JavaScript error is thrown on playback of this recording:

In Chrome desktop browser:

asterics-grid.bundle.js:22 Uncaught (in promise) DOMException: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.
    at https://grid.asterics.eu/app/build/asterics-grid.bundle.js:22:705704
    at new Promise (<anonymous>)
    at Es.playAudio (https://grid.asterics.eu/app/build/asterics-grid.bundle.js:22:705658)
    at Jr (https://grid.asterics.eu/app/build/asterics-grid.bundle.js:22:672481)
    at https://grid.asterics.eu/app/build/asterics-grid.bundle.js:22:674566
    at Array.forEach (<anonymous>)
    at https://grid.asterics.eu/app/build/asterics-grid.bundle.js:22:674554
    at https://grid.asterics.eu/app/build/asterics-grid.bundle.js:22:674597 

In Safari desktop browser:

[Error] Unhandled Promise Rejection: InvalidCharacterError: The string contains invalid characters.
    atob (asterics-grid.bundle.js:22:705719)
    (anonymous function) (asterics-grid.bundle.js:22:705719)
    Promise
    (anonymous function) (asterics-grid.bundle.js:22:705680)
    (anonymous function) (asterics-grid.bundle.js:22:672501)
    asyncFunctionResume
    (anonymous function) (asterics-grid.bundle.js:22:674579)
    forEach
    (anonymous function) (asterics-grid.bundle.js:22:674572)
    (anonymous function) (asterics-grid.bundle.js:22:674608)
    promiseReactionJob

[rgabo74]

Further results: Recording on IOS in Safari and Chrome are all right, playing fine on all tested platforms. Only MacOS/Safari recording seem to be affected by this bug.

[klues]

Please tell me your version of MacOS/Safari, I've just tried to record on Mac Ventura, Safari 16 and Chrome 108, where it seems to work.

[rgabo74]

MacOS Monterey Version 12.6 (21G115) Safari version 16.0 (17614.1.25.9.10, 17614)

[rgabo74]

Here is my grid with the incorrect recording on "Sing" Mese választó.grd.zip

[klues]

Hmm, I couldn't reproduce it. The recording data you've attached is only a string data:, so not real recording data and no base64 encoded string, thats the reason for the javascript exception. I assume that the problem is maybe in this method: https://github.com/asterics/AsTeRICS-Grid/blob/master/src/js/util/audioUtil.js#L178

I've added a possibility for debug output, so please:

1. Open current version of AsTeRICS Grid on your Safari browser on the Mac
2. Open javascript console and type log.setLevel(log.levels.DEBUG)
3. Start a recording and stop it.
4. Tell me what's logged to the console, should be something like data:application/octet-stream;base64,GkXfo59ChoEBQveBAU...

[klues]

btw: with the new release I've also added the Hungarian translation. This was really quick, thanks for your work! 👍

[rgabo74]

It does not log much on recording.

log.setLevel(log.levels.DEBUG) < undefined [Log] data: (asterics-grid.bundle.js, line 22, x2)

But the error is happening when playing back the recording that happened on MacOS/Safari, not on recording.

I am getting a new error on playback now:

[Warning] error decoding base64 audio – InvalidCharacterError: The string contains invalid characters. — asterics-grid.bundle.js:22:705741 (asterics-grid.bundle.js, line 22)
InvalidCharacterError: The string contains invalid characters. — asterics-grid.bundle.js:22:705741atob(anonymous function) — asterics-grid.bundle.js:22:705741Promise(anonymous function) — asterics-grid.bundle.js:22:705707(anonymous function) — asterics-grid.bundle.js:22:672508asyncFunctionResume(anonymous function) — asterics-grid.bundle.js:22:674586forEach(anonymous function) — asterics-grid.bundle.js:22:674579(anonymous function) — asterics-grid.bundle.js:22:674615promiseReactionJob 

[rgabo74]

btw: with the new release I've also added the Hungarian translation. This was really quick, thanks for your work! 👍

Translation looking very good in the app, will do a QA round and refinement. This is really addictive job... Wife have not divorced before it got ready, so all good.

[klues]

It does not log much on recording.

log.setLevel(log.levels.DEBUG) < undefined [Log] data: (asterics-grid.bundle.js, line 22, x2)

But the error is happening when playing back the recording that happened on MacOS/Safari, not on recording.

So after recording and stopping the recording no more log appears? For me it looks like this:

The interesting part is after the line that says undefined. I should log the data that just was recorded. The error on playback results in the fact that no valid data was saved on recording, so we have to investigate the recording.

I am getting a new error on playback now

It's in fact the same but I have added some custom error handling that logs error decoding base64 audio, see https://github.com/asterics/AsTeRICS-Grid/blob/release-2022-12-23-13.15/+0100/src/js/util/audioUtil.js#L85

Wife have not divorced before it got ready, so all good.

👍 😄