شكراً لك، أعتقد أنني فهمتك. التسجيل الصوتي المباشر غير ممكن.
لا يعمل المكون حاليًا بسبب مشكلة في CSP.
إن إضافة https://cdn.jsdelivr.net/ إلى إعداد الموقع content security policy script src لا يحل المشكلة: سيعمل زر التسجيل، ولكن إنشاء الملف سيؤدي إلى حدوث خطأ 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/".
مسجل الصوت يعمل (في الغالب) على موقعي. انظر لقطات الشاشة أدناه لعمليتي…
مباشرة بعد التسجيل، لا شيء قابل للنقر (ولكن يمكنني رؤية الخط الأحمر الذي يشير إلى أنه تم تسجيل الملف وإدراجه في المنشور)…
ثم بالنقر على زر الرجوع في المتصفح (لأن زر التحميل لا يستجيب) أعود إلى المحرر حيث يمكنني رؤية الملف مدرجًا، ويعمل بشكل صحيح للتشغيل في نافذة المعاينة…
ثم، بعد النقر على + إنشاء موضوع، يظهر المنشور بشكل صحيح…
ومع ذلك، تلقيت هذا الخطأ في وحدة التحكم فورًا بعد النقر على زر إيقاف التسجيل…
أيضًا، بعد النقر على زر تحميل أحصل على خطأ ثانٍ…
وأخيرًا، بعد النقر على زر إلغاء أحصل على خطأ ثالث…
على الرغم من هذه الأخطاء، تظهر المقطع الصوتي وتشغيله بشكل صحيح في المنشور.
أحاول فهم الأخطاء التي أحصل عليها عند محاولة استخدام مكون السمة هذا.
بخلاف عدم إغلاق النافذة المنبثقة، يبدو أن الأمور تعمل بشكل جيد.
(وإذا قمت بتحديث الصفحة للهروب من النافذة المنبثقة، أعود إلى المنشئ حيث تم تسجيل الملف وتحميله بشكل صحيح، ويمكن تشغيله، ولكن ليس في المعاينة، فقط بعد حفظ المنشور.)
هذا هو أفضل دليل لدي حتى الآن…
هل هذا حل محتمل…
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
أي نصائح موضع تقدير!
إعجابَين (2)
هذه مشكلة مختلفة، ومن المحتمل أنها موجودة منذ فترة طويلة. سألقي نظرة عليها قريبًا.
4 إعجابات
نفس الشيء، ولكن في المتصفح. إليك بعض الأخطاء من وحدة التحكم. شكراً لك على إعادة هذه الحياة يا Angus.
إعجابَين (2)
يبدو أنها مشكلة في سفاري. سألقي نظرة على ذلك قريبًا.
إعجاب واحد (1)
نعم، إنها مشكلة في سفاري وقد استمرت لفترة طويلة (في الواقع، ربما لم يعمل هذا مطلقًا على سفاري).
تعمل المكونة في كروم وفايرفوكس، كما كانت من قبل. لقد قمت بتحديث المكونة بشكل أكبر لاستخدام واجهة برمجة تطبيقات MediaRecorder الأصلية لجافاسكريبت (بدلاً من مكتبة npm قديمة عمرها 5 سنوات)، ومع ذلك سيحتاج شخص لديه المزيد من الوقت إلى جعل واجهة برمجة تطبيقات MediaRecorder الأصلية وعنصر audio يعملان بشكل جيد مع سفاري. يسعدني المساعدة في طلب سحب (PR) لهذه المهمة المحددة.
@peter.be @denvergeeks ربما ترغبون في تركيز جهودكم على ذلك فقط. يسعدني أن أجعلكم مشرفين على المستودع.
6 إعجابات
شكرًا لك يا أنجوس، لن يكون لدي الوقت للتعمق في هذا في الوقت الحالي.
على سبيل المثال - لقد جربت واجهة برمجة تطبيقات MediaRecorder في البداية عند تطوير المكون الإضافي، ولكني سرعان ما اكتشفت أنه لا توجد طريقة لدعم جميع المتصفحات للتسجيل والتشغيل (هناك دائمًا تركيبة لا تعمل) بسبب مشكلات الترميز/التنسيق. لقد قضيت وقتًا طويلاً في هذا، ولكن على حد علمي، لا توجد طريقة لدعم جميع المتصفحات عند استخدام واجهة برمجة تطبيقات MediaRecorder. لهذا السبب استخدمت مُرمّز mp3.
3 إعجابات
شكراً @peter.be و @angus! لقد اختبرت ووجدت أن هذا الـ TC يعمل الآن، باستثناء:\n\n1) ليس في سفاري على نظام MacOS (على الرغم من أنه يعمل في كروم على نظام MacOS)\n\n2) ليس في سفاري أو كروم أو فايرفوكس أو برايف على نظام iOS\n\nإليك حل محتمل…\n\nhttps://stackoverflow.com/questions/76532656/media-recorder-api-browser-compatibility
3 إعجابات
هل اختبرت التشغيل في المتصفحات الأخرى المعنية؟
عندما اختبرت، كان التسجيل يعمل، ولكن خاصة عند التبديل من سفاري إلى كروم والعكس صحيح، كانت هناك دائمًا مشاكل في التشغيل. على وجه التحديد، إذا كنت أتذكر بشكل صحيح، فإن الملفات المسجلة عبر كروم لم يتم تشغيلها في سفاري، بغض النظر عن الترميز الذي استخدمته.
ولكنك قلت إنك اختبرت هذا وعمل (مع جميع التركيبات للتسجيل والتشغيل بين المتصفحات المختلفة)؟
نعم @peter.be – لقد اختبرت للتو ووجدت أن…
التسجيلات التي تم إجراؤها في Chrome على Windows:
- يتم تشغيلها في Chrome على MacOS
- يتم تشغيلها في FireFox على MacOS
- لا يتم تشغيلها في Safari على MacOS
- لا يتم تشغيلها في Chrome على iOS
- لا يتم تشغيلها في Safari على iOS
- لا يتم تشغيلها في FireFox على iOS
- لا يتم تشغيلها في Brave على iOS
إعجاب واحد (1)
حسنًا…
لهذا السبب اخترت استخدام مشفر mp3. استخدام واجهة برمجة تطبيقات MediaRecorder بهذه الطريقة فقط لن يدعم جميع المتصفحات.
إعجاب واحد (1)
إذًا… هل عدنا إلى الوضع الذي تعمل فيه الإضافة، ولكن المكون لا يعمل 
إعجابَين (2)
يعمل المكون بنفس الطريقة التي كان يعمل بها دائمًا. بالنظر إلى الاهتمام الواضح بهذا، سأحاول إيجاد بعض الوقت لمعالجة مشكلات سفاري في وقت لاحق من هذا الأسبوع.
4 إعجابات
حسناً، هذه المكونة الآن
- تدعم جميع المتصفحات (بما في ذلك Safari و Firefox و Chrome iOS)
- لا تستخدم أي تبعيات خارجية
- تعمل مع أحدث إصدار من Discourse
9 إعجابات
كما يقول أصدقاؤنا البريطانيون: رائع حقًا.
يعمل بشكل جيد. شكرًا.
إعجابَين (2)
إعجابَين (2)