Feature voice message as mp3 #4920

nicodh · 2025-04-03T12:38:30Z

This is a workaround as long as iOS does not support the weba codec and as long as we don't have some audio converter in core.

- uses MediaRecorder which is restricted to audio/webm or audio/mp4 codecs based on pr #3456

The only codec supported natively in Chrome MediaRecorder weba (Web Audio) which is not supported in iOS. This PR adds a standalone AudioRecorder with a simple dependency to lame

packages/frontend/src/components/composer/Composer.tsx

WofWca

Haven't looked thoroughly yet.

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx

packages/frontend/src/components/composer/Composer.tsx

packages/frontend/src/components/AudioRecorder/Encoder.ts

packages/frontend/src/components/composer/Composer.tsx

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx

packages/frontend/src/components/composer/ComposerMessageInput.tsx

r10s · 2025-04-04T10:14:48Z

very nice to push that forward! tested a bit - voice recording and sending works already nicely, also for iOS - thanks a lot to give us more time to adapt iOS to ogg, and to remove the pressure 🙏

some UI things that come to my mind:

i like the idea of the pulsating record icon
the time display during recording should use the normal font (as used in message input) and there should not be spaces before/after colon
it is not so nice that on normal message input, on entering the first letter, that shifts to the left now (as the record button disappears). that appears restless and unstable.
all of whatsapp/telegram/signal have the record button right of the input field - i think, we should go for that as well.
this also fits nicely with the send button only shown when text is entered:
we can have less moving parts now, by just replacing record-button by send-button - which both should have the exact same size
the pulsating audio and the time display during recording can stay where they are, on the left
for the "stop" button is a bit unclear what happens - it is a "stages" things, but that is a bit hard to explain. maybe just call it "ok" - and add a "cancel" button at the same time
i personally like the staging - though all of whatsapp/telegram/signal send without directly without staging and without the option to re-hear, never really got that part

packages/frontend/src/components/AudioRecorder/MicRecorder.ts

r10s

very nice!

let's keep "audio controls" and "message sending controls" together, that means, move the buttons right, and the level meter to time and pulsating mic:

(the "green" looks aggressive on the screenshot, but i think, it is okay, as it flickers fast anyways)

packages/frontend/src/components/AudioRecorder/styles.module.scss

r10s · 2025-04-07T13:46:39Z

ah, another things that needs to be targeted before it can be released:

you can switch to another chat while recording, and the bar will stay as is. the message then is sent to whatever chat was selected last, this is quite unexpected ...

i suggest to stop recording and stage the recording when switching chats (this is what eg. signal is doing)

r10s · 2025-04-07T13:52:01Z

packages/frontend/src/components/AudioRecorder/Encoder.ts

+      sampleRate: 44100,
+      bitRate: 128,


this results in unexpectedly high data usage. until we can switch to opus, i suggest to half both parameters, for voice that is usually good enough

Suggested change

sampleRate: 44100,

bitRate: 128,

sampleRate: 22050,

bitRate: 64,

just a rough estimation, for sampleRate, i am not 100% sure, maybe that's unrelated to file size, we should try out (older considerations)

moreover, we should respect the "media_quality" setting, but that can be done in another PR to not complicate things here further

If we're into downsampling, for speech 8000 would be enough to make it understandable, but yeah, that is gonna be phone-level quality.

https://en.wikipedia.org/wiki/Sampling_(signal_processing)#Speech_sampling

For reference, in Telegram a one-minute voice message takes up ~230KB.

I played around with various values but it didn't had any impact on the size of the recorded audio. It's always ~484kB for 30 seconds.

hm, then there is a bug somewhere, maybe in the used library, ~1 mb/minute is the standard rate mp3 has as 128 kbit, 44.1 kHz

i think, it should not block merging this PR, but we might want to file an issue for that

I will open a new issue when this PR is merged

Simon-Laux · 2025-04-08T04:50:31Z

About colors in the volume meter: many apps such as discord, mumble (in first setup), audacity and professional Digital Audio Workstations have different colors for ranges, like green, yellow and red (red is if you are too loud so that it clips/overloads).

Bildschirmaufnahme.2025-04-08.um.06.43.41.mov

Bildschirmaufnahme.2025-04-08.um.06.45.34.mov

Just an idea, I'm not saying that we need it, especially not now, I think it is fine as is (with button placement that r10s posted). maybe we find a more intuitive solution in the future like a waveform.

nicodh · 2025-04-08T14:09:42Z

About colors in the volume meter: many apps such as discord, mumble (in first setup), audacity and professional Digital Audio Workstations have different colors for ranges, like green, yellow and red (red is if you are too loud so that it clips/overloads).

We have that too:

You can see it, if you put the audio input to a maximum in your system settings

Only question is: it's hard to detect the "real" limit where clipping starts...

I set the values here: https://github.com/deltachat/deltachat-desktop/pull/4920/files#diff-769f75b81cc687f60e9af48e627fdb8efe8608b32f185df559644c374358998dR131

nicodh · 2025-04-08T16:08:24Z

ah, another things that needs to be targeted before it can be released:

you can switch to another chat while recording, and the bar will stay as is. the message then is sent to whatever chat was selected last, this is quite unexpected ...

i suggest to stop recording and stage the recording when switching chats (this is what eg. signal is doing)

I fixed it now lilke this: when you switch chats without stopping the recording it will be lost. If you stop recording before switching your record will be saved as draft. That should be sufficient for now.

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx

packages/frontend/scss/composer/_composer.scss

WofWca · 2025-04-09T09:13:11Z

_locales/_untranslated_en.json

+  "voice_send": {
+    "message": "Send a voice message"
+  },
+  "voice_send_cannot": {


I don't think this is the case.

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx

packages/frontend/src/components/composer/Composer.tsx

WofWca

This feels pretty solid overall.
I left a couple more non-critical comments, but I won't insist on addressing them in this MR. I'll also create an issue with further improvement ideas.

IMO this can be merged at the current state.

Thanks for finally bringing such a demanded feature to life!

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx

packages/frontend/src/components/composer/Composer.tsx

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx

packages/frontend/src/components/composer/Composer.tsx

_locales/_untranslated_en.json

Co-authored-by: WofWca <wofwca@protonmail.com>

nicodh marked this pull request as draft April 3, 2025 12:38

nicodh added 2 commits April 3, 2025 14:39

feature: add voice message

af0b4ef

- uses MediaRecorder which is restricted to audio/webm or audio/mp4 codecs based on pr #3456

Use mp3 capable audio recorder

a68d772

The only codec supported natively in Chrome MediaRecorder weba (Web Audio) which is not supported in iOS. This PR adds a standalone AudioRecorder with a simple dependency to lame

nicodh force-pushed the feature-voice-message-rebased branch from ea00cea to 2638fe1 Compare April 3, 2025 12:39

nicodh temporarily deployed to test April 3, 2025 12:39 — with GitHub Actions Inactive

Add CHANGELOG entry

79bf7d2

nicodh force-pushed the feature-voice-message-rebased branch from 2638fe1 to 79bf7d2 Compare April 3, 2025 12:41

nicodh temporarily deployed to test April 3, 2025 12:41 — with GitHub Actions Inactive

nicodh commented Apr 3, 2025

View reviewed changes

packages/frontend/src/components/composer/Composer.tsx Outdated Show resolved Hide resolved

Hide emojy picker while recording

273cc3c

nicodh temporarily deployed to test April 3, 2025 13:57 — with GitHub Actions Inactive

nicodh changed the title ~~Feature voice message rebased~~ Feature voice message as mp3 Apr 3, 2025

nicodh mentioned this pull request Apr 3, 2025

feature: add voice message #4715

Closed

WofWca reviewed Apr 3, 2025

View reviewed changes

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx Outdated Show resolved Hide resolved

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx Outdated Show resolved Hide resolved

WofWca reviewed Apr 3, 2025

View reviewed changes

packages/frontend/src/components/composer/Composer.tsx Outdated Show resolved Hide resolved

WofWca reviewed Apr 3, 2025

View reviewed changes

packages/frontend/src/components/AudioRecorder/Encoder.ts Show resolved Hide resolved

WofWca reviewed Apr 3, 2025

View reviewed changes

packages/frontend/src/components/composer/Composer.tsx Outdated Show resolved Hide resolved

WofWca reviewed Apr 3, 2025

View reviewed changes

packages/frontend/src/components/AudioRecorder/AudioRecorder.tsx Show resolved Hide resolved

Simon-Laux reviewed Apr 3, 2025

View reviewed changes

packages/frontend/src/components/composer/ComposerMessageInput.tsx Show resolved Hide resolved

Add LICENSE

95639b5

nicodh temporarily deployed to test April 3, 2025 16:16 — with GitHub Actions Inactive

nicodh added 3 commits April 4, 2025 07:56

Add explaining comment

4e54d06

Small Composer refactorings

ffac62b

Design & UI styles

7a8bca4

nicodh temporarily deployed to test April 4, 2025 09:55 — with GitHub Actions Inactive

nicodh marked this pull request as ready for review April 4, 2025 09:56

Move microphone button right

6cc0301

nicodh temporarily deployed to test April 4, 2025 12:05 — with GitHub Actions Inactive

Use Ok Cancel buttons

e1a8314

WofWca reviewed Apr 7, 2025

View reviewed changes

packages/frontend/src/components/AudioRecorder/MicRecorder.ts Show resolved Hide resolved

Add License text

9c0a917

nicodh had a problem deploying to test April 7, 2025 11:34 — with GitHub Actions Failure

r10s reviewed Apr 7, 2025

View reviewed changes

packages/frontend/src/components/AudioRecorder/styles.module.scss Outdated Show resolved Hide resolved

r10s reviewed Apr 7, 2025

View reviewed changes

Move buttons to right

eac797d

nicodh temporarily deployed to test April 7, 2025 16:23 — with GitHub Actions Inactive

Move loadingDraft state change

610f668

nicodh force-pushed the feature-voice-message-rebased branch from 48a1709 to 610f668 Compare April 8, 2025 14:08

nicodh temporarily deployed to test April 8, 2025 14:08 — with GitHub Actions Inactive

Stop recording when switching chats

1f7c523

nicodh temporarily deployed to test April 8, 2025 15:41 — with GitHub Actions Inactive

Stop recorder when unmounting

8113401

nicodh temporarily deployed to test April 9, 2025 09:22 — with GitHub Actions Inactive

WofWca reviewed Apr 9, 2025

View reviewed changes

Various changes from feedback

b998471

WofWca approved these changes Apr 11, 2025

View reviewed changes

Add aria attributes to VolumeBar

1b75334

Co-authored-by: WofWca <wofwca@protonmail.com>

nicodh temporarily deployed to test April 11, 2025 14:06 — with GitHub Actions Inactive

Apply suggestions from code review

bec1e4b

Co-authored-by: WofWca <wofwca@protonmail.com>

nicodh temporarily deployed to test April 11, 2025 14:27 — with GitHub Actions Inactive

Remove console.logs

83de2ed

nicodh temporarily deployed to test April 11, 2025 14:31 — with GitHub Actions Inactive

nicodh merged commit d887c6f into main Apr 11, 2025
13 of 14 checks passed

nicodh deleted the feature-voice-message-rebased branch April 11, 2025 14:37

WofWca mentioned this pull request Apr 11, 2025

Improve voice message recording #4976

Open

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feature voice message as mp3 #4920

Feature voice message as mp3 #4920

nicodh commented Apr 3, 2025 •

edited

Loading

WofWca left a comment

r10s commented Apr 4, 2025 •

edited

Loading

r10s left a comment •

edited

Loading

r10s commented Apr 7, 2025

r10s Apr 7, 2025 •

edited

Loading

WofWca Apr 7, 2025

nicodh Apr 7, 2025

r10s Apr 7, 2025

nicodh Apr 8, 2025

Simon-Laux commented Apr 8, 2025 •

edited

Loading

nicodh commented Apr 8, 2025

nicodh commented Apr 8, 2025

WofWca Apr 9, 2025

WofWca left a comment

Feature voice message as mp3 #4920

Feature voice message as mp3 #4920

Conversation

nicodh commented Apr 3, 2025 • edited Loading

WofWca left a comment

Choose a reason for hiding this comment

r10s commented Apr 4, 2025 • edited Loading

r10s left a comment • edited Loading

Choose a reason for hiding this comment

r10s commented Apr 7, 2025

r10s Apr 7, 2025 • edited Loading

Choose a reason for hiding this comment

WofWca Apr 7, 2025

Choose a reason for hiding this comment

nicodh Apr 7, 2025

Choose a reason for hiding this comment

r10s Apr 7, 2025

Choose a reason for hiding this comment

nicodh Apr 8, 2025

Choose a reason for hiding this comment

Simon-Laux commented Apr 8, 2025 • edited Loading

nicodh commented Apr 8, 2025

nicodh commented Apr 8, 2025

WofWca Apr 9, 2025

Choose a reason for hiding this comment

WofWca left a comment

Choose a reason for hiding this comment

nicodh commented Apr 3, 2025 •

edited

Loading

r10s commented Apr 4, 2025 •

edited

Loading

r10s left a comment •

edited

Loading

r10s Apr 7, 2025 •

edited

Loading

Simon-Laux commented Apr 8, 2025 •

edited

Loading