Voice Recorder Component

Jagster · January 24, 2022, 2:20pm

Mostly because of size, when wav is huge. Support for vorbis is limited. MP3s are resonable in sizes and every device and browser supports it.

hellekin · January 24, 2022, 5:18pm

Yet using vorbis would be even more size-efficient. If it could become an option it would be nice

Jagster · January 24, 2022, 7:23pm

Uploading audio as a file would be even more nicer

anon40545810 · January 25, 2022, 1:07am

I would like to help Discourse by translating plugins in ptbr.
There are several plugins that I really like and want to translate in ptbr.
As I said earlier, I would like to be a good software developer, one way I thought was to translate plugins in Discourse. I feel that in doing so, I am contributing in some way to Discourse.
As I said earlier, I can send a pull request if you guys want and find it interesting.
I think Discourse is amazing and the people in it are a great community.
I talked about these points of view, as I had commented here on this post: https://meta.discourse.org/t/voice-recording-plugin - But they said the plugin doesn’t work - old post link. They said here would be the most stable version. So here I am - Hope this helps in some way
As far as I know at the moment, .yml files can be translated. This is very interesting if you want to support multiple languages, you may have multiple users who want to use your plugin in a native language. About this, I hope to help in some way

idea

ptbr.yml :

ptbr:
  composer:
    composer_audio_upload_button_title:  "Gravar & enviar arquivo de áudio"
  composer_audio_upload:
    button_text: "Gravar & enviar áudio"
    title: "Gravar & enviar áudio"
  theme_metadata:
    description: "Adicione sua voz nas postagens"

angus · January 25, 2022, 1:20am

Fantastic! @keegan is setting up a new translation pipeline for Pavilion that will include this Theme Component, and a number of other Discourse plugins. He can fill you in on the details.

osioke · January 25, 2022, 9:08am

This would be an interesting addition along with chat, ~~let me share this with the team~~ we are already discussing it but it may not come immediately though.

anon40545810 · January 25, 2022, 5:59pm

@angus

Can I submit the pull request?

So, I was waiting for your answer ;D
If you allow, please submit the pull request.

keegan · January 26, 2022, 2:47am

Hey @anon40545810,

Glad to hear you would like to contribute through translations!

We are moving to using Crowdin for all our official Pavilion plugins.

To submit translations, you will first need a Crowdin account. You can sign up for one here. After creating an account you can submit your translations for the voice recorder component by doing the following:

Visit Pavilion’s Crowdin Profile here.
Select the plugin you would like to translate. In your case, you would select discourse-voice-recorder.
Select the language you would like to translate for. In your case, you would select Portuguese, Brazilian
From here you can click the Translate All button.
Now you can go ahead and translate!
- On the left are the strings you can select to translate.
- You can enter the translations in the text field in the center and click save once you are complete.

Please feel free to DM me (@keegan) if you have any questions

anon40545810 · January 26, 2022, 3:31am

Thank you so much for the feedback ;D

anon40545810 · April 21, 2022, 2:42pm

@angus @keegan

As promised - ptbr translations completed:

Layouts
Voice Recorder
Custom Wizard
Tickets
Legal Tools
Multilingual
Journal
Mentionables
Ratings
Locations

here: Crowdin Enterprise

angus · April 21, 2022, 2:44pm

Thank you! We’ll get those in post haste.

jimkleiber · May 14, 2022, 5:07pm

I stumbled on this js library but I’m not sure if it would work or be easy to substitute in:

But I figured I’d document it here in case anyone was interested in trying.

Edit: this one may be even better because it also has an option for video and screen recording. The only challenge may be that it records to wav or ogg, not mp3, but says there may an easy way to convert wav to mp3 with a different library:

Aizada_M · October 31, 2022, 5:28am

Hello. When installing this component, I got the following error.

Sorry, I’m not a programmer and I don’t understand this. Can I set up something myself in my Discourse or do I need to involve a specialist?

Jagster · October 31, 2022, 8:31am

No, you don’t need anykind specialist. There is minor bug in localization, aka. translation, and it doesn’t mean anything.

Plus this component is more or less just a demo than a production tool. You (and yours users) should do audio more basic way: use your devices (mobile, audio recorder, deskop, what ever) and upload that file normally.

In general nothing is as badly supported as audio. Thinking the rise of podcasts it is a bit strange situation. iPhones doesn’t natively support even MP3 (AFAIK) and you don’t have too many options to stream your audio files.

Aizada_M · October 31, 2022, 9:49am

Thank you, I think I understand you. Direct audio recording is not possible.

Canapin · July 3, 2023, 8:26pm

The component currently doesn’t work because of a CSP issue.

Adding https://cdn.jsdelivr.net/ to the content security policy script src site setting doesn’t fix the issue: the recording button will work, but the file creation will trigger another JS error:

Refused to create a worker from 'blob:https://discourse.canapin.dev/a2d7c36c-2919-48a4-9ca6-8da59a2b020e' because it violates the following Content Security Policy directive: "worker-src 'self' https://discourse.canapin.dev/assets/ https://discourse.canapin.dev/brotli_asset/ https://discourse.canapin.dev/javascripts/ https://discourse.canapin.dev/plugins/".

denvergeeks · July 3, 2023, 9:15pm

Voice Recorder is (mostly) working on my site. See the below screenshots of my process…

Just after recording, nothing is clickable (but I can see there underlined in red that the file has indeed been recorded and inserted into the post)…

Then clicking the Back browser button (because the Upload button is non-responsive) I arrive back to the composer where I can see the file has been inserted, and does work to play in the preview pane …

Then, after clicking + Create Topic, the post appears properly…

However, I did get this error in the console immediately after I had clicked the Stop Recording button…

Also, after clicking Upload button I get a second error…

And finally, after clicking the Cancel button I get a third error…

Despite these errors, the audio clip is appearing and playing correctly in the post.

denvergeeks · August 1, 2023, 4:39pm

Trying to understand the errors I’m getting in trying to use this Theme Component.

Other than the modal not closing, things otherwise seem to work.

(And if I refresh the page in order to escape the modal, I do arrive back in the composer where the file has recorded and properly uploaded, and is playable, but not in the preview, only after saving the post.)

Here is my best clue thus far…

Is this a possible solution…

1) When the modal opens (after I click the microphone button in the composer)…

2) When I click the playback button (in the modal) to review the recording prior to upload…

3) When I click the upload button (in the modal)…

Here is the entire log copied from the Chrome Inspector…

deprecate-shim.js:33 DEPRECATION: Function prototype extensions have been deprecated, please migrate from function(){}.on('foo') to on('foo', function() {}). [deprecation id: function-prototype-extensions.on] See https://deprecations.emberjs.com/v3.x#toc_function-prototype-extensions-on for more details.
(anonymous) @ deprecate-shim.js:33
e @ deprecate-shim.js:10
(anonymous) @ main.js:43
e @ deprecate-shim.js:10
(anonymous) @ main.js:78
e @ deprecate-shim.js:10
require.deprecate @ deprecate-shim.js:17
value @ function.js:139
(anonymous) @ autoplay-media.js:50
e.withPluginApi @ plugin-api.js:2247
initialize @ autoplay-media.js:47
i.initialize @ app.js:173
(anonymous) @ index.js:126
e.each @ dag-map.js:192
e.walk @ dag-map.js:121
e.each @ dag-map.js:66
e.topsort @ dag-map.js:72
_runInitializer @ index.js:138
runInstanceInitializers @ index.js:124
_bootSync @ instance.js:101
didBecomeReady @ application.js:656
p.invoke @ queue.ts:201
p.flush @ queue.ts:98
h.flush @ deferred-action-queues.ts:75
$._end @ index.ts:616
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._ensureInstance @ index.ts:791
$.schedule @ index.ts:384
_ @ index.js:351
waitForDOMReady @ application.js:409
init @ application.js:323
r @ index.js:388
_ @ core_object.js:122
create @ core_object.js:626
(anonymous) @ start-app.js:4
(anonymous) @ discourse-boot.js:20
(anonymous) @ discourse-boot.js:1
deprecated.js:64 Deprecation notice: DButton no longer supports @action as a string. Please refactor to use an closure action instead. [deprecation id: discourse.d-button-action-string]
e.default @ deprecated.js:64
y @ d-button.js:91
createComponent @ base-component-manager.js:31
createComponent @ ember-component-manager.js:50
create @ manager.js:419
create @ glimmer-component-with-deprecated-parent-view.js:11
(anonymous) @ runtime.js:2679
evaluate @ runtime.js:1052
evaluateSyscall @ runtime.js:4263
evaluateInner @ runtime.js:4234
evaluateOuter @ runtime.js:4227
next @ runtime.js:5058
_execute @ runtime.js:5045
execute @ runtime.js:5038
handleException @ runtime.js:4372
handleException @ runtime.js:4580
throw @ runtime.js:4319
evaluate @ runtime.js:2091
_execute @ runtime.js:4306
execute @ runtime.js:4291
rerender @ runtime.js:4606
render @ index.js:6751
(anonymous) @ index.js:7013
Mt @ runtime.js:4139
_renderRoots @ index.js:6996
_renderRootsTransaction @ index.js:7039
_revalidate @ index.js:7072
p.invoke @ queue.ts:201
p.flush @ queue.ts:98
h.flush @ deferred-action-queues.ts:75
$._end @ index.ts:616
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._end @ index.ts:623
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._end @ index.ts:623
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._end @ index.ts:623
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._end @ index.ts:623
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._ensureInstance @ index.ts:791
$.ensureInstance @ index.ts:579
scheduleRevalidate @ index.js:5390
dirtyTag @ validator.js:411
R @ validator.js:486
F @ index.js:497
z @ index.js:533
_set @ index.js:1848
set @ index.js:1790
r @ index.js:930
De @ index.js:1390
Te @ index.js:1385
set @ observable.js:175
_setModel @ composer.js:1000
await in _setModel (async)
open @ composer.js:980
await in open (async)
editPost @ topic.js:611
$._join @ index.ts:646
$.join @ index.ts:362
p @ index.js:157
(anonymous) @ index.js:708
a @ index.js:128
(anonymous) @ index.js:707
(anonymous) @ index.js:666
_sendComponentAction @ widget.js:275
(anonymous) @ widget.js:319
rerenderResult @ widget.js:291
sendWidgetAction @ widget.js:314
click @ button.js:122
(anonymous) @ hooks.js:236
(anonymous) @ hooks.js:202
rerenderResult @ widget.js:291
R @ hooks.js:202
(anonymous) @ hooks.js:236
dispatch @ jquery.js:5135
g.handle @ jquery.js:4939
deprecated.js:64 Deprecation notice: DButton no longer supports @action as a string. Please refactor to use an closure action instead. [deprecation id: discourse.d-button-action-string]
e.default @ deprecated.js:64
_triggerAction @ d-button.js:164
click @ d-button.js:144
deprecated.js:64 [THEME 11 'Voice Recorder'] Deprecation notice: Defining modals using a controller is deprecated. Use the component-based API instead. (modal: audio_upload) [deprecated since Discourse 3.1] [removal in Discourse 3.2] [deprecation id: discourse.modal-controllers] [info: https://meta.discourse.org/t/268057]
e.default @ deprecated.js:64
show @ modal.js:126
e.default @ show-modal.js:36
showAudioUploadModal @ audio-upload-initializer.js:15
send @ action_support.js:20
r @ index.js:388
_triggerAction @ d-button.js:166
click @ d-button.js:144
deprecated.js:64 Deprecation notice: DButton no longer supports @action as a string. Please refactor to use an closure action instead. [deprecation id: discourse.d-button-action-string]
e.default @ deprecated.js:64
y @ d-button.js:91
createComponent @ base-component-manager.js:31
createComponent @ ember-component-manager.js:50
create @ manager.js:419
create @ glimmer-component-with-deprecated-parent-view.js:11
(anonymous) @ runtime.js:2679
evaluate @ runtime.js:1052
evaluateSyscall @ runtime.js:4263
evaluateInner @ runtime.js:4234
evaluateOuter @ runtime.js:4227
next @ runtime.js:5058
_execute @ runtime.js:5045
execute @ runtime.js:5038
handleException @ runtime.js:4372
handleException @ runtime.js:4580
throw @ runtime.js:4319
evaluate @ runtime.js:2091
_execute @ runtime.js:4306
execute @ runtime.js:4291
rerender @ runtime.js:4606
render @ index.js:6751
(anonymous) @ index.js:7013
Mt @ runtime.js:4139
_renderRoots @ index.js:6996
_renderRootsTransaction @ index.js:7039
_revalidate @ index.js:7072
p.invoke @ queue.ts:201
p.flush @ queue.ts:98
h.flush @ deferred-action-queues.ts:75
$._end @ index.ts:616
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._end @ index.ts:623
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._end @ index.ts:623
_boundAutorunEnd @ index.ts:257
Promise.then (async)
n @ platform.ts:28
flush @ index.js:41
$._scheduleAutorun @ index.ts:803
$._ensureInstance @ index.ts:791
$.ensureInstance @ index.ts:579
scheduleRevalidate @ index.js:5390
dirtyTag @ validator.js:411
R @ validator.js:486
setter @ validator.js:702
c @ index.js:3501
close @ modal.js:62
close @ modal.js:177
show @ modal.js:122
e.default @ show-modal.js:36
showAudioUploadModal @ audio-upload-initializer.js:15
send @ action_support.js:20
r @ index.js:388
_triggerAction @ d-button.js:166
click @ d-button.js:144

Any tips appreciated!

angus · August 14, 2023, 7:59am

I’ve fixed this theme component.

Jagster · August 14, 2023, 8:58am

With iPad and iPhone it can’t go forward from here:

Same issue than earlier, if I’m remembering right.