[NEW] Audio recording as mp3 and better ui for recording

[kb0304]

@RocketChat/core
Closes #7844 #4552

Real-time mp3 encoding or audio message using lame.js (JS library ported from LAME Mp3 encoder)

Updated UI :

[geekgonecrazy]

@RocketChat/core can we give this some attention?

❤️ This UI change. Not sure on performance implications of libmp3lame.js I assume compatible with all recent browsers?

[geekgonecrazy]

Instead of including the full libmp3lame.js can we use an MP3 reference? Ideally a library that we aren't developing would be brought in as a dependency via npm

[amonemian]

@kb0304 thank you for your great effort. all things are good except the deley between pressing the green "ok" button and the sending progress bar load.

What's exactly the cause of the delay? and how can I overcome that?

[kb0304]

@geekgonecrazy
Yes, it is compatible. I have tested it for Chrome and Firefox.
Can you please guide me on how to bring it in as a npm dependency and inject only the relevant methods into the worker?

@amonemian
The delay is the time taken for encoding to mp3, which starts at the end of the recording process. I will work on encoding it while recording itself, which would take care of this issue.

[rodrigok]

@kb0304 the box for audio control is taking unnecessary space when not in use

[rodrigok]

@kb0304 Can you replace the mic icon by the loading spinner while processing?

[rodrigok]

@kb0304 It's not working on safari

[rodrigok]

@kb0304 Safari 11.0.3

[geekgonecrazy]

Can you please guide me on how to bring it in as a npm dependency and inject only the relevant methods into the worker?

@kb0304
https://www.npmjs.com/package/lame looks like contains / wraps it.

Plenty of packages in the project bring in npm packages. So lots of examples. Just define the npm package in the package.js and do an import at the top of the file you use it in.

[kb0304]

@geekgonecrazy

I am unable to use the imported package in Worker's scope. Is there any other alternative to serving the static js file from the server?
The package you mentioned provides a minified static file. How can we serve it as a static file?

[geekgonecrazy]

You should just be able to swap this import for an import to the package and serve this file from public still. https://github.com/RocketChat/Rocket.Chat/pull/9726/files#diff-d796bdf4e59d6b846640607e356f820aR1 I see no problem continuing to serve this wrapper. Its just including the library its self and serving that up that feels dirty. :)

[kb0304]

@geekgonecrazy I agree with you. Will improve it.

[kb0304]

@rodrigok I have fixed the UI and have added a loader. I tested the Heroku deployment via Safari 11.0.3 and it worked without any issue. Could you please share steps to reproduce / details about the error?
It does have a pre-existing issue, it doesn't work in Safari when served via HTTP even on localhost.

Updated UI:

[rodrigok]

Are you still using the import?

[geekgonecrazy]

I think the idea was to use this instead of including the file. But per DM struggling to get the import to work in the worker.

So need to figure out how to serve the file out of the npm package

[kb0304]

Yes, that was the purpose but I am not able to serve it from node_modules
I have removed the dependency for now.

[rodrigok]

Can you remove these duplicated lines?

[kb0304]

Done