语音录音组件

Aizada_M · 2022 年10 月 31 日 09:49

谢谢，我想我明白了。无法直接录制音频。

Canapin · 2023 年7 月 3 日 20:26

该组件目前由于 CSP 问题无法正常工作。

将 https://cdn.jsdelivr.net/ 添加到 内容安全策略脚本源 站点设置中并不能解决问题：录制按钮可以工作，但文件创建会触发另一个 JS 错误：

拒绝创建来自“blob:https://discourse.canapin.dev/a2d7c36c-2919-48a4-9ca6-8da59a2b020e”的工作线程，因为它违反了以下内容安全策略指令：“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 日 21:15

Voice Recorder 在我的网站上（大部分）可以正常工作。请看下面我操作过程的截图……

录制后，没有任何东西可以点击（但我可以看到红色下划线，表明文件已成功录制并插入到帖子中）……

然后，点击浏览器的“后退”按钮（因为“上传”按钮没有响应），我回到了编辑器，可以看到文件已插入，并且在预览窗格中可以正常播放……

然后，点击“+ 创建主题”后，帖子会正常显示……

不过，在我点击“停止录制”按钮后，立即在控制台中收到了这个错误……

另外，点击“上传”按钮后，我收到了第二个错误……

最后，点击“取消”按钮后，我收到了第三个错误……

尽管有这些错误，音频片段仍然出现在帖子中并能正常播放。

denvergeeks · 2023 年8 月 1 日 16: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
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

任何提示都将不胜感激！

angus · 2023 年8 月 14 日 07:59

我已经修复了这个主题组件。

Jagster · 2023 年8 月 14 日 08:58

使用 iPad 和 iPhone，情况无法再向前发展了：

如果我没记错的话，和之前是同样的问题。

angus · 2023 年8 月 14 日 09:29

这是另一个问题，而且可能存在很长时间了。我很快会看看。

davidkingham · 2023 年8 月 15 日 13:40

我也是，但在浏览器中。这是控制台中的一些错误。感谢您让 Angus 复活。

angus · 2023 年8 月 15 日 14:35

看起来是 Safari 的问题。我马上看一下。

angus · 2023 年8 月 15 日 16:06

是的，这是 Safari 的一个问题，而且已经存在一段时间了（事实上，这在 Safari 上可能从未奏效过）。

该组件在 Chrome 和 Firefox 中都能正常工作，就像以前一样。我已进一步更新该组件以使用原生的 JavaScript MediaRecorder API（而不是一个 5 年前的 npm 库），但是需要有人花更多时间来让原生的 MediaRecorder API 和 audio 元素在 Safari 上正常工作。我很乐意为这项特定任务提供 PR 帮助。

@peter.be @denvergeeks 也许你们想把精力集中在这上面。我很乐意让你们成为该存储库的维护者。

peter.be · 2023 年8 月 15 日 16:20

谢谢你，Angus，我现在没有时间深入研究这个问题。

就我所知——我在开发插件的初期尝试过 MediaRecorder API，但很快发现由于编解码器/格式问题，无法支持所有浏览器进行录制和播放（总会有一些组合不起作用）。我在这上面花了不少时间，但据我所知，在使用 MediaRecorder API 时没有办法支持所有浏览器。这就是我使用 mp3 编码器的原因。

denvergeeks · 2023 年8 月 15 日 16:45

感谢 @peter.be 和 @angus！我已测试并发现此 TC 现在可以工作，但存在以下问题：

在 MacOS 的 Safari 中无法工作（但在 MacOS 的 Chrome 中可以工作）
在 iOS 的 Safari、Chrome、Firefox 或 Brave 中无法工作

这里有一个可能的解决方案……

peter.be · 2023 年8 月 15 日 17:01

@denvergeeks 您是否在相应的其他浏览器中测试过播放？

当我测试时，录制可以工作，但尤其是在 Safari 和 Chrome 之间切换时，总会出现播放问题。具体来说，如果我没记错的话，通过 Chrome 录制的文件在 Safari 中无法播放，无论我使用什么编解码器。

但是您说您测试过并且可以工作（在不同浏览器之间录制和播放的所有组合）？

denvergeeks · 2023 年8 月 15 日 17:28

是的 @peter.be – 我刚才测试了一下，发现……

在 Windows 上的 Chrome 中录制的视频：

可以在 MacOS 上的 Chrome 中播放
可以在 MacOS 上的 FireFox 中播放
不能在 MacOS 上的 Safari 中播放
不能在 iOS 上的 Chrome 中播放
不能在 iOS 上的 Safari 中播放
不能在 iOS 上的 FireFox 中播放
不能在 iOS 上的 Brave 中播放

peter.be · 2023 年8 月 15 日 17:31

好吧……

这就是我选择使用 mp3 编码器的原因。仅以这种方式使用 MediaRecorder API 将不支持所有浏览器。

Jagster · 2023 年8 月 15 日 17:35

所以……我们又回到了插件可用但组件不可用的情况

angus · 2023 年8 月 16 日 05:21

该组件的运行方式与以往相同。考虑到对此的明确兴趣，我将在本周晚些时候设法抽出时间来解决 Safari 问题。

angus · 2023 年8 月 16 日 07: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	1497	2020 年1 月 30 日

语音录音组件

相关话题