Grazie, penso di aver capito. La registrazione audio diretta non è possibile.
Il componente attualmente non funziona a causa di un problema CSP.
L’aggiunta di https://cdn.jsdelivr.net/ all’impostazione del sito content security policy script src non risolve il problema: il pulsante di registrazione funzionerà, ma la creazione del file attiverà un altro errore JS:
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/\".
Il registratore vocale funziona (per lo più) sul mio sito. Vedi gli screenshot qui sotto del mio processo…
Subito dopo la registrazione, nulla è cliccabile (ma posso vedere che è sottolineato in rosso che il file è stato effettivamente registrato e inserito nel post)…
Quindi, cliccando sul pulsante Indietro del browser (poiché il pulsante Carica non risponde), torno alla finestra di composizione dove posso vedere che il file è stato inserito e funziona per essere riprodotto nel riquadro di anteprima…
Quindi, dopo aver cliccato su + Crea argomento, il post appare correttamente…
Tuttavia, ho ricevuto questo errore nella console subito dopo aver cliccato sul pulsante Interrompi registrazione…
Inoltre, dopo aver cliccato sul pulsante Carica, ricevo un secondo errore…
E infine, dopo aver cliccato sul pulsante Annulla, ricevo un terzo errore…
Nonostante questi errori, la clip audio appare e viene riprodotta correttamente nel post.
Sto cercando di capire gli errori che ricevo nel tentativo di utilizzare questo componente tema.
A parte il fatto che la modale non si chiude, per il resto sembra funzionare.
(E se aggiorno la pagina per uscire dalla modale, torno al compositore dove il file è stato registrato e caricato correttamente, ed è riproducibile, ma non nell’anteprima, solo dopo aver salvato il post.)
Ecco il mio miglior indizio finora…
Questa è una possibile soluzione…
1) Quando la modale si apre (dopo aver cliccato sul pulsante del microfono nel compositore)…
2) Quando clicco sul pulsante di riproduzione (nella modale) per rivedere la registrazione prima del caricamento…
3) Quando clicco sul pulsante di caricamento (nella modale)…
Ecco il log completo copiato dall’Inspector di Chrome…
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.com/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
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
Qualsiasi suggerimento è apprezzato!
2 Mi Piace
Questa è una questione diversa, ed è probabilmente presente da molto tempo. Ci darò un’occhiata presto.
4 Mi Piace
Lo stesso qui, ma nel browser. Ecco alcuni errori dalla console. Grazie per aver riportato in vita questa cosa, Angus.
2 Mi Piace
Sembra un problema di Safari. Ci darò un’occhiata a breve.
1 Mi Piace
Sì, è un problema di Safari ed è presente da un po’ (infatti, probabilmente non ha mai funzionato su Safari).\n\nIl componente funziona su Chrome e Firefox, come faceva prima. Ho ulteriormente aggiornato il componente per utilizzare l’API nativa MediaRecorder di JavaScript (invece di una libreria npm vecchia di 5 anni), tuttavia qualcuno con più tempo a disposizione dovrà far sì che l’API nativa MediaRecorder e l’elemento audio funzionino bene con Safari. Sono felice di aiutare con una PR per quel compito specifico.\n\n@peter.be @denvergeeks Forse volete concentrare i vostri sforzi solo su quello. Sarei felice di rendervi manutentori del repository.
6 Mi Piace
Grazie, Angus, al momento non avrò il tempo di approfondire ulteriormente.
Per quello che vale, ho provato l’API MediaRecorder inizialmente quando ho sviluppato il plugin, ma ho rapidamente scoperto che non c’è modo di supportare tutti i browser per la registrazione e la riproduzione (c’è sempre una combinazione che non funziona) a causa di problemi di codec/formato. Ci ho passato parecchio tempo, ma per quanto ne so, non c’è modo di supportare tutti i browser quando si utilizza l’API MediaRecorder. Ecco perché ho usato un codificatore mp3.
3 Mi Piace
Grazie @peter.be e @angus! Ho testato e ho scoperto che questo TC ora funziona, eccetto:\n\n1) non su Safari su MacOS (anche se funziona su Chrome su MacOS)\n\n2) non su Safari o Chrome o Firefox o Brave su iOS\n\nEcco una possibile soluzione…\n\nhttps://stackoverflow.com/questions/76532656/media-recorder-api-browser-compatibility
3 Mi Piace
@denvergeeks hai testato la riproduzione nei rispettivi altri browser?
Quando ho testato, la registrazione ha funzionato, ma soprattutto passando da Safari a Chrome e viceversa ci sono sempre stati problemi di riproduzione. Nello specifico, se ricordo bene, i file registrati tramite Chrome non venivano riprodotti in Safari, indipendentemente dal codec utilizzato.
Ma hai detto di averlo testato e che ha funzionato (con tutte le combinazioni per la registrazione e la riproduzione tra browser diversi)?
Sì @peter.be – ho appena testato e ho scoperto che…
Registrazioni effettuate in Chrome su Windows:
- vengono riprodotte in Chrome su MacOS
- vengono riprodotte in FireFox su MacOS
- non vengono riprodotte in Safari su MacOS
- non vengono riprodotte in Chrome su iOS
- non vengono riprodotte in Safari su iOS
- non vengono riprodotte in FireFox su iOS
- non vengono riprodotte in Brave su iOS
1 Mi Piace
Giusto…
Ecco perché ho scelto di utilizzare un codificatore mp3. Utilizzare solo l’API MediaRecorder in quel modo non sarà supportato da tutti i browser.
1 Mi Piace
Quindi… siamo di nuovo nella situazione in cui un plugin funziona, ma un componente no 
2 Mi Piace
Il componente funziona come sempre. Considerando il chiaro interesse per questo, cercherò di trovare del tempo per affrontare i problemi di Safari più tardi questa settimana.
4 Mi Piace
Ok, questo componente ora
- supporta tutti i browser (inclusi Safari, Firefox e Chrome iOS)
- non utilizza dipendenze esterne
- funziona con l’ultima versione di Discourse
9 Mi Piace
Come dicono i nostri amici britannici: splendido davvero.
Funziona bene. Grazie.
2 Mi Piace
2 Mi Piace