Danke, ich glaube, ich verstehe Sie. Eine direkte Audioaufnahme ist nicht möglich.
Die Komponente funktioniert derzeit aufgrund eines CSP-Problems nicht.
Das Hinzufügen von https://cdn.jsdelivr.net/ zu den content security policy script src-Siteeinstellungen behebt das Problem nicht: Der Aufnahmeknopf funktioniert, aber die Dateierstellung löst einen weiteren JS-Fehler aus:
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/".
Voice Recorder funktioniert auf meiner Website (meistens). Sehen Sie sich die folgenden Screenshots meines Vorgangs an …
Direkt nach der Aufnahme ist nichts anklickbar (aber ich sehe, dass die Datei unterstrichen und rot markiert ist, dass sie tatsächlich aufgenommen und in den Beitrag eingefügt wurde) …
Dann, indem ich die Zurück-Schaltfläche des Browsers klicke (da die Upload-Schaltfläche nicht reagiert), komme ich zurück zum Composer, wo ich sehen kann, dass die Datei eingefügt wurde und in der Vorschau abgespielt werden kann …
Dann, nachdem ich auf Thema erstellen geklickt habe, erscheint der Beitrag ordnungsgemäß …
Ich habe jedoch diesen Fehler in der Konsole erhalten, unmittelbar nachdem ich auf die Schaltfläche Aufnahme stoppen geklickt hatte …
Auch nachdem ich auf die Schaltfläche Hochladen geklickt habe, erhalte ich einen zweiten Fehler …
Und schließlich, nachdem ich auf die Schaltfläche Abbrechen geklickt habe, erhalte ich einen dritten Fehler …
Trotz dieser Fehler erscheint und spielt der Audioclip korrekt im Beitrag ab.
Ich versuche, die Fehler zu verstehen, die bei der Verwendung dieser Theme-Komponente auftreten.
Abgesehen davon, dass sich das Modal nicht schließt, scheinen die Dinge ansonsten zu funktionieren.
(Und wenn ich die Seite aktualisiere, um dem Modal zu entkommen, lande ich wieder im Composer, wo die Datei aufgezeichnet und ordnungsgemäß hochgeladen wurde und abspielbar ist, aber nicht in der Vorschau, sondern erst nach dem Speichern des Beitrags.)
Hier ist mein bisher bester Hinweis…
Ist das eine mögliche Lösung…
1) Wenn sich das Modal öffnet (nachdem ich auf die Mikrofontaste im Composer geklickt habe)…
2) Wenn ich auf die Wiedergabetaste (im Modal) klicke, um die Aufnahme vor dem Hochladen zu überprüfen…
3) Wenn ich auf die Hochladetaste (im Modal) klicke…
Hier ist das gesamte Protokoll, kopiert aus dem 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
Jeder Tipp wird geschätzt!
2 „Gefällt mir“
Mit iPad und iPhone kann es von hier aus nicht weitergehen:
Gleiches Problem wie zuvor, wenn ich mich richtig erinnere.
Das ist ein anderes Problem und besteht wahrscheinlich schon seit langem. Ich werde es mir bald ansehen.
4 „Gefällt mir“
Hier auch, aber im Browser. Hier sind einige Fehler aus der Konsole. Vielen Dank, dass du das wieder zum Leben erweckt hast, Angus.
2 „Gefällt mir“
Das sieht nach einem Safari-Problem aus. Ich werde mir das gleich ansehen.
1 „Gefällt mir“
Ja, es ist ein Safari-Problem und besteht schon seit einiger Zeit (tatsächlich hat das wahrscheinlich nie auf Safari funktioniert).
Die Komponente funktioniert in Chrome und Firefox, wie sie es auch zuvor tat. Ich habe die Komponente weiter aktualisiert, um die native JavaScript MediaRecorder API zu verwenden (anstelle einer 5 Jahre alten npm-Bibliothek), jedoch wird jemand mit mehr Zeit die native MediaRecorder API und das audio-Element dazu bringen müssen, gut mit Safari zusammenzuarbeiten. Gerne helfe ich mit einem PR für diese spezielle Aufgabe.
@peter.be @denvergeeks Vielleicht möchten Sie Ihre Bemühungen nur darauf konzentrieren. Ich würde Sie gerne zu Maintainern des Repositories machen.
6 „Gefällt mir“
Vielen Dank, Angus, ich werde im Moment keine Zeit haben, tiefer darauf einzugehen.
Was es wert ist – ich habe die MediaRecorder API zunächst bei der Entwicklung des Plugins ausprobiert, musste aber schnell feststellen, dass es aufgrund von Codec-/Formatproblemen keine Möglichkeit gibt, alle Browser für die Aufnahme und Wiedergabe zu unterstützen (es gibt immer eine Kombination, die nicht funktioniert). Ich habe einige Zeit damit verbracht, aber soweit ich weiß, gibt es keine Möglichkeit, alle Browser mit der MediaRecorder API zu unterstützen. Deshalb habe ich einen MP3-Encoder verwendet.
3 „Gefällt mir“
Danke @peter.be und @angus! Ich habe getestet und festgestellt, dass dieser TC jetzt funktioniert, außer:\n\n1) nicht im Safari auf MacOS (obwohl er im Chrome auf MacOS funktioniert)\n\n2) nicht im Safari oder Chrome oder Firefox oder Brave auf iOS\n\nHier ist eine mögliche Lösung…\n\nhttps://stackoverflow.com/questions/76532656/media-recorder-api-browser-compatibility
3 „Gefällt mir“
@denvergeeks Haben Sie die Wiedergabe im jeweils anderen Browser getestet?
Als ich getestet habe, funktionierte die Aufnahme, aber besonders beim Wechsel von Safari zu Chrome und umgekehrt gab es immer Wiedergabeprobleme. Insbesondere, wenn ich mich richtig erinnere, konnten Dateien, die über Chrome aufgenommen wurden, nicht in Safari wiedergegeben werden, egal welchen Codec ich verwendet habe.
Aber Sie sagten, Sie hätten das getestet und es funktionierte (mit allen Kombinationen für Aufnahme und Wiedergabe zwischen verschiedenen Browsern)?
Ja @peter.be – Ich habe gerade getestet und festgestellt, dass…
Aufnahmen in Chrome unter Windows:
- werden in Chrome unter MacOS abgespielt
- werden in FireFox unter MacOS abgespielt
- werden nicht in Safari unter MacOS abgespielt
- werden nicht in Chrome unter iOS abgespielt
- werden nicht in Safari unter iOS abgespielt
- werden nicht in FireFox unter iOS abgespielt
- werden nicht in Brave unter iOS abgespielt
1 „Gefällt mir“
Verstehe…
Deshalb habe ich mich für einen MP3-Encoder entschieden. Die alleinige Verwendung der MediaRecorder API auf diese Weise wird nicht von allen Browsern unterstützt.
1 „Gefällt mir“
Sind wir also wieder in der Situation, in der ein Plugin funktioniert, aber eine Komponente nicht 
2 „Gefällt mir“
Die Komponente funktioniert wie immer. Angesichts des klaren Interesses daran werde ich versuchen, später in dieser Woche Zeit zu finden, um die Safari-Probleme zu beheben.
4 „Gefällt mir“
Ok, diese Komponente jetzt
- unterstützt alle Browser (einschließlich Safari, Firefox und Chrome iOS)
- verwendet keine externen Abhängigkeiten
- funktioniert mit dem neuesten Discourse
9 „Gefällt mir“
Wie unsere britischen Freunde sagen: prächtig in der Tat.
Funktioniert gut. Danke.
2 „Gefällt mir“
2 „Gefällt mir“