ボイスレコーダーコンポーネント

Aizada_M · 2022 年 10 月 31 日午前 9:49

ありがとうございます。理解できたと思います。直接の音声録音はできません。

Canapin · 2023 年 7 月 3 日午後 8:26

コンポーネントは現在、CSPの問題により機能していません。

content security policy script src サイト設定に https://cdn.jsdelivr.net/ を追加しても問題は解決しません。録音ボタンは機能しますが、ファイルの作成は別のJavaScriptエラーをトリガーします。

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 · 2023 年 7 月 3 日午後 9:15

Voice Recorder は (ほとんど) サイトで動作しています。私のプロセスを以下のスクリーンショットで確認してください…

録音直後、何もクリックできません (しかし、ファイルが実際に録音され、投稿に挿入されたことが赤の下線でわかります)…

次にブラウザの戻るボタンをクリックすると (アップロードボタンが応答しないため)、コンポーザーに戻り、ファイルが挿入され、プレビューペインで再生できることがわかります…

次に、「トピックを作成」をクリックすると、投稿が正しく表示されます…

しかし、「録音停止」ボタンをクリックした直後に、コンソールでこのエラーが発生しました…

また、「アップロード」ボタンをクリックすると、2番目のエラーが発生します…

そして最後に、「キャンセル」ボタンをクリックすると、3番目のエラーが発生します…

これらのエラーにもかかわらず、オーディオクリップは投稿に正しく表示され、再生されています。

denvergeeks · 2023 年 8 月 1 日午後 4:39

このテーマコンポーネントの使用中に発生しているエラーを理解しようとしています。

モーダルが閉じないという点を除けば、他に問題はないようです。

（ページをリロードしてモーダルを抜け出すと、ファイルが記録され、正常にアップロードされ、再生可能になっているコンポーザーに戻りますが、プレビューではなく、投稿を保存した後でのみです。）

ここまでの最良の手がかりです…
discourse-close-modal-error

これは可能な解決策でしょうか…

1) モーダルが開くとき（コンポーザーのマイクボタンをクリックした後）…

2) 再生ボタン（モーダル内）をクリックして、アップロード前に録音を確認するとき…

3) アップロードボタン（モーダル内）をクリックするとき…

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.org/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
$._ensureInstance @ index.ts:791
$.ensureInstance @ index.ts:579
scheduleRevalidate @ index.js:5390
dirtyTag @ validator.js:411
R @ validator.js:486
_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

何かヒントがあれば教えてください！

angus · 2023 年 8 月 14 日午前 7:59

このテーマコンポーネントを修正しました。

Jagster · 2023 年 8 月 14 日午前 8:58

iPadとiPhoneでは、ここから先には進めません。

記憶が正しければ、以前と同じ問題です。

angus · 2023 年 8 月 14 日午前 9:29

それは別の問題で、おそらく長い間そこにあったものです。すぐに確認します。

davidkingham · 2023 年 8 月 15 日午後 1:40

私も同様ですが、ブラウザで発生しています。コンソールからのエラーをいくつか示します。Angusさん、復活させてくれてありがとう。

angus · 2023 年 8 月 15 日午後 2:35

Safariの問題のようですね。すぐに確認します。

angus · 2023 年 8 月 15 日午後 4:06

はい、Safariの問題で、しばらく前から発生しています（実際、Safariではこれが機能したことがないかもしれません）。

コンポーネントはChromeとFirefoxでは以前と同様に動作します。コンポーネントをさらに更新して、ネイティブJavaScriptのMediaRecorder API（5年前のnpmライブラリではなく）を使用するようにしましたが、時間のある誰かがネイティブのMediaRecorder APIとaudio要素をSafariとうまく連携させる必要があります。その特定のタスクのPRをお手伝いできれば幸いです。

@peter.be @denvergeeks おそらく、そちらに労力を集中させたいのではないでしょうか。リポジトリのメンテナーになっていただければ幸いです。

peter.be · 2023 年 8 月 15 日午後 4:20

アンガスさん、ありがとうございます。現時点では、これ以上深く調べる時間がありません。

参考までに、プラグイン開発当初はMediaRecorder APIを試しましたが、コーデック/フォーマットの問題により、すべてのブラウザで録音と再生をサポートする方法がないことにすぐに気づきました。かなりの時間を費やしましたが、私の知る限り、MediaRecorder APIを使用した場合、すべてのブラウザをサポートする方法はありません。そのため、mp3エンコーダーを使用しました。

denvergeeks · 2023 年 8 月 15 日午後 4:45

@peter.be、@angus、ありがとうございます。テストしたところ、このTCは現在機能しますが、ただし以下を除きます。

macOSのSafariでは機能しません（macOSのChromeでは機能します）。
iOSのSafari、Chrome、Firefox、Braveでは機能しません。

考えられる解決策はこちらです…

peter.be · 2023 年 8 月 15 日午後 5:01

@denvergeeks は、それぞれの他のブラウザで再生をテストしましたか？

私がテストしたとき、録音は機能しましたが、特に Safari から Chrome に切り替えたり、その逆に切り替えたりすると、常に再生の問題が発生しました。具体的には、記憶が正しければ、Chrome で録音されたファイルは、どのコーデックを使用しても Safari では再生されませんでした。

しかし、あなたはこれをテストして、機能した（異なるブラウザ間での録音と再生のすべての組み合わせで）と言いましたか？

denvergeeks · 2023 年 8 月 15 日午後 5:28

はい、@peter.be さん – 今テストしたところ、以下のことがわかりました。

WindowsのChromeで録画したもの：

MacOSのChromeで再生できます
MacOSのFireFoxで再生できます
MacOSのSafariでは再生できません
iOSのChromeでは再生できません
iOSのSafariでは再生できません
iOSのFireFoxでは再生できません
iOSのBraveでは再生できません

peter.be · 2023 年 8 月 15 日午後 5:31

なるほど…

だからmp3エンコーダーを使うことにしたんだ。MediaRecorder APIをそのように使うだけでは、すべてのブラウザでサポートされるわけではないからね。

Jagster · 2023 年 8 月 15 日午後 5:35

プラグインは動作するのに、コンポーネントは動作しないという状況に戻ったということですか

angus · 2023 年 8 月 16 日午前 5:21

コンポーネントはこれまでと全く同じように機能します。これに対する明確な関心を考慮して、今週後半にSafariの問題に対処する時間を確保するように努めます。

angus · 2023 年 8 月 16 日午前 7:25

このコンポーネントは現在、

すべてのブラウザ（Safari、Firefox、Chrome iOS を含む）をサポートしています
外部依存関係を使用していません
最新の Discourse で動作します

Jagster · 2023 年 8 月 16 日午前 11:03

イギリスの友人たちが言うように、実に素晴らしい。

うまく動作しました。ありがとうございます。

denvergeeks · 2023 年 8 月 16 日午前 11:37

Happy Very Funny GIF by Disney Zootopia

トピック		返信	表示
Discourse Audio Message Dev	26	1961	2024 年 6 月 9 日
Voice messages for discourse Feature	15	3986	2023 年 8 月 2 日
Voice to text integration Support	9	747	2023 年 11 月 13 日
Voice note recording Feature chat	3	1068	2023 年 10 月 14 日
Screen recorder theme component (experimental) Theme component	3	1498	2020 年 1 月 30 日

ボイスレコーダーコンポーネント

関連トピック