语音录音组件

你是最棒的 Angus!我在 Safari 中进行了测试,上传部分运行良好,但不幸的是播放不起作用。不确定这些错误是否相关:

嘿 David,别担心。Safari 上的播放功能肯定没问题。我已在 demo.pavilion.tech 上为你设置了一个演示。这是我使用 Safari 播放功能的屏幕录像。由于屏幕录像音频的工作方式,你可能听不到播放声音,但相信我,它就在那里 :)(抱歉有背景噪音)。

请尝试禁用你网站上的其他主题或插件,看看它们是否破坏了 Safari 中的 JavaScript。

1 个赞

谢谢 Angus,似乎只影响了这一个帖子,希望只是个孤立事件。

对我来说,播放不起作用。在 Chrome (macOS) 上录制,然后在 Safari (macOS) 上尝试播放时出现此问题。

这可能是我之前描述的问题,我猜,浏览器不支持 MediaRecorder API 的所有浏览器变体的编解码器。

其他人是否遇到过这种组合?在 Chrome 上录制,在 Safari 上播放?

我确认在我的 Discourses @peter.be 上出现了此错误 - 这是一个示例…

https://story.pub/t/voice-recorder-tc-chrome-on-macos/14

在 MacOS 上的 Chrome 中录制的录音:

(与我几天前的错误报告相同,只是这次是在 MacOS 上的 Chrome 中录制的)

iMac 桌面 (MacOS)

  • 在 MacOS 的 Chrome 中可以播放
  • 在 MacOS 的 FireFox 中可以播放

  • 在 MacOS 的 Safari 中不能播放

iPhone, iPad (iOS)

  • 在 iOS 的 Chrome 中不能播放
  • 在 iOS 的 Safari 中不能播放
  • 在 iOS 的 FireFox 中不能播放
  • 在 iOS 的 Brave 中不能播放
    Tired Tv Land GIF by TV Land Classic
2 个赞

这是我在您链接的播放器中看到的内容:

这是我的论坛中的内容:

iPad 和我的都可以正常工作,但您的不行。所以我只是好奇。

1 个赞

@Jagster您在网站上录制视频时使用的是什么操作系统和浏览器?

iPadOS 16.6 和 Safari/DiscouseHub。但在 iPad 上,浏览器在这方面都一样。

我在 iPad 上的 Chrome 中可以录制。它无法播放,并在 iPad 上的 Chrome 中显示错误。

但是,相同的录音可以在 iPad 上的 Safari 和 Windows 机器上的 Chrome 中播放。

它也可以在 iMac/MacOS 上的 Chrome、Safari 和 Firefox 中播放。

https://story.pub/t/voice-recorder-tc-chrome-on-ios/15

但我仍然可以在 Chrome/iPad 上玩它。

既然其他人也遇到了问题,我也分享一下我遇到的问题:我看到的问题帖子是用 Android 上的 MS Edge 创建的,而在桌面版 Safari 上播放时出现了错误。

@angus 我们(暂时)是否应将此标记为已损坏,并在主题帖子中引用当前正在运行的插件 https://meta.discourse.org/t/discourse-audio-message/270432?

它没有坏。它的运行方式与以往完全相同,甚至更好(现在它也可以在 Safari 中录制)。您要求我扩展功能,而不是修复它。

您提到的问题是在 Safari 中,由于 audio 标签在 Discourse 帖子 HTML 中的渲染方式,导致某些类型的音频格式无法播放(@peter.be 这实际上与 MediaRecorder API 的跨浏览器兼容性无关)。

如果您在没有使用插件或主题组件的情况下上传了某些音频格式,仅仅是作为文件上传,您会在 Safari 中看到相同的行为。如果您想解决这个非常具体的问题,您需要:

  • 自己研究具体问题并提交一个 PR(Pull Request)
  • 聘请某人为您处理
  • 提出一个功能请求,以改进 Discourse 帖子 HTML 中 audio 标签的格式处理。
4 个赞

这就是我选择将录制的音频消息转换为 mp3 格式的原因——如果你想称之为 MediaRecorder API 的跨浏览器兼容性问题,或者某些浏览器无法播放某些编解码器;或者你称之为“损坏”与否;总之,我需要一种解决方案,无论文件在哪个浏览器中录制,都能在所有浏览器中支持播放。

由于所有浏览器都支持 mp3 播放,所以我选择了这条路径。

我只是想指出某些用例无法与 MediaRecorder API 配合使用的原因,并解释了原因以及我为插件选择的解决方案。

我就说到这吧。如果以后有机会,我可能会仔细研究一下主题组件,因为我同意这是一种更方便的安装和维护方式,但目前我恐怕没有时间贡献了 :folded_hands:

2 个赞

感谢 @angus 花费时间修复模态框和改进此 TC。:pray:

4 个赞

您能否更新此主题组件以在聊天中使用?或者是否有其他插件或主题组件允许在聊天中录制音频文件?

3 个赞

这倒是个不错的建议。您介意解释一下您的用例吗?

另外,像这样的事情,贡献非常有帮助——无论是提交拉取请求(PR)还是赞助所需的开发工作。

这就是我们的用户想要的。他们希望在聊天时像WhatsApp一样录制和发送音频。

即使我没有庞大的社区,我也可能会考虑赞助这项开发。负责这项工作的人可以与我创建一个私人主题。

6 个赞

如果您能为此在 Marketplace 中创建一个主题,那就太好了。 :+1:

4 个赞

我在 Debian/GNU/Linux 上使用 Firefox(Debian 12,Firefox 115.5.0esr)无法使此组件正常工作。有其他人尝试过此配置吗?

window.injectScript 的 CSP 问题会阻止它吗?