ciao, ... ti posterei i miei codici inventati 15 anni fa, ... in pratica si tratterebbe di costruire un player EXTRA in scatole cinesi, ...ma visto che in rete ormai si trova di tutto già bello e pronto preferisco darti un LINK con player già pronto e personalizzabile...
... questa è la fonte su cui documentarti per far da te:
>https://codeconvey.com/customize-html5-audio-player-css/
...!... se non vuoi perder tempo e provare subito all'istante con un solo click, con un  copia/incolla usa il codice qui (↓) in allegato rispettando la fonte e i crediti che ho elaborato, raccolto e compattato in un unico listato, da incollare in un OggettoCodiceHTML..!...
... puoi provalo subito e fai sapere, ormai sei esperto e puoi personalizzare a tuo piacere...

↓  ↓  ↓

↓  ↓

  ↓

... personalmente preferisco il collegamento AUDIO nello ShowBox...

.

ciao

.

Esperto è una parola grossa e infatti non riesco a capire come estrapoli il file, ho visto il percorso del file di default (che funziona, già testato) ma non capisco come si estrapola il file in base alla data del giorno. Nessun problema per i crediti, ci mancherebbe, ho sempre rispettato queste regole, perché è giusto.
In realtà a me servirebbe la versione ovale, identica a quella che c'è attualmente; ti chiedo troppo a realizzare lo stesso file unico con l'altra grafica? In caso contrario nessun problema, mi metto a studiare quel link e cerco di capire dove sistemare i file che mi ha fatto scaricare. Grazie

Ho capito, il codice che mi hai inviato non estrapola il file con la data del giorno, ma legge solo il file default.mp3, infatti appena l'ho tolto dalla cartella non ha funzionato più. A me il file default servirà solo nel caos in cui in un determinato giorno non ci fosse il file con la relativa data, cosa peraltro che sarà capitata un paio di volte in svariati anni.

se ti interessa un codice da inserire in oggetto html con queste caratteristiche te lo posto.

• Riproduzione audio: puoi avviare e mettere in pausa la traccia con il pulsante ▶/⏸

• Visualizzazione del titolo: mostra il nome del file MP3 caricato

• Barra di avanzamento: indica il progresso della riproduzione con colore dinamico 

• Timer: mostra il tempo corrente e la durata totale della traccia

• Controllo volume: puoi regolare il volume cliccando sulla barra rossa

• Download: scarica il file MP3 con un clic sull’icona

• Personalizzazione colore: cambia lo sfondo del player con l’icona paint e salva la scelta in localStorage

        Funzionalità intelligenti

• Memorizzazione del colore: il colore scelto viene salvato e ripristinato automaticamente alla prossima visita

• Adattamento layout: se il titolo è troppo lungo, viene tagliato

• Responsive: si adatta bene anche su schermi piccoli grazie al layout flessibile

Ciao Roberto, lo testo volentieri; il titolo si può disattivare? Considerando che è una data giornaliera non serve a nulla.

Ok testalo e vedi se può andarti bene: Clicca su ►  DEMO

Trovi la versione con il codice per il Brano e senza Brano. 

Per cambiare colore clikka sul pennellino vicino all'icona Scarica File.

Ti serve una pagina,una cella e un oggetto HTML dove inserire il codice. E' tt un blocco. Ricordati che se ti andasse bene devi mettere titolo del brano in due parti: una per l'esecuzione e una per il download.

Fammi sapere. 

...!... scusami , ho propri ignorato il tuo codice pensando ti interessasse solo la personalizzazione del player......!...
... il controllo della data è tutto un altro discorso...
... qui nel forum si trovano decine miei codici sul controlla data, giorno, scadenze per svariate necessità, in genere tutti originali...
... i più usati, per messaggi temporali, showbox, , per avvisi periodici, eccetera, il più ricercato per il palinsesto settimanale di alcune radio, anche per una chiesa con le letture del giorno associate alla relativa omelia in pagina testuale, ma tutti codici diversi l'uno dall'altro in base appunto alle rispettive necessità...
... se ancora non hai trovato altra soluzione, nel web trovi di tutto, e se ti interessa la mia partecipazione, avvisami, valuterò l'insieme e ti farò sapere, e nel caso  mi dirai nel dettaglio cosa vorresti ottenere, la lista ed il link dei file audio e quando e come si devono attuare, date, periodicità, eccetera......
.
ciao

.

Ciao KolAsim, ci mancava solo che ti scusassi per l'aiuto che mi stai dando Allora, mi spiego meglio, il codice che ho postato a me va benissimo, non gli manca nulla. Ho una sola esigenza grafica: vorrei poter cambiare il colore dello sfondo a mio piacimento. Ho messo i due link: nella versione attuale ufficiale ha assunto un sfondo grigio; nella nuova versione sotto test (altervista) invece è celeste molto chiaro, ma non mi pare di aver fatto modifiche, anche se ho eseguito moltissime prove. In realtà mi basterebbe farlo un po' più scuro mantenendo la stessa tonalità di colore, se poi posso agire anche sul colore, sarebbe il massimo.

Quindi non vale la pena che mi metta a lavorare con altre opzioni, mi basta superare questo impedimento e quello che sto usando è perfetto. Si può fare qualcosa o è proprio limitato il codice?

Ho visto, il player è bello, ma la grafica è troppo diversa da quello che uso e che va benissimo sul sito; inoltre dovrei implementare la lettura automatica del file giornaliero. Il player che uso io è perfetto, mi basterebbe solo superare il problema del colore di sfondo dell'ovale e non avrei bisogno di altro. Grazie per l'intervento.

ho dato un'occhiata veloce alla tua pagina, se non ho visto male sembra che la classe sia .sdAudio

eventualmente puoi tentare con questo codice, provare non costa nulla

<style>
.sdAudio {
background-color: #ff0000; /* qui il colore che desideri */
}
</style>

ciao, ... quello che tu vuoi ottenere non si può fare con il player audio di HTML5 perchè e incorporato nel browser, ed ogni browser usa il suo player di sistema; puoi notare che in Edge, Chrome, Firefox, del PC ed anche negli smartphone, il player è diverso tra loro, e per questo che ti avevo postato il precedente codice...
...purtroppo ho dovuto guardare il tuo codice iniziale che non avevo visto prima per rivisitare il codice da me postato e renderlo compatibile, rimanendo un po' amareggiato dalla fonte...
... comunque lasciamo stare il passato....

... intanto ho ottenuto questo risultato provvisorio da stabilizzare; ...fammi sapere se ti possa andar bene così o è qualcos'altro che ti interessa ottenere, così mi regolo:.
1) ... il player interagisce con il tuo script, aggiornando il file audio con quello della data corrente;
2) .. il player è trasparente, quindi adattabile a qualsiasi sfondo chiaro;
3) - in questo STAMP di anteprima il player è in giallo/yellow. per evidenziarlo:

.

ciao

.

Ciao Giancarlo, ho provato ad inserirlo nella sezione degli stili ma non cambia nulla; probabilmente è come dice KolAsim, e cioè che il player audio di HTML5 e incorporato nel browser e quindi non è modificabile; in effetti ora ho aperto il sito con altri browser ed ognuno mostra il formato proprio; quindi a questo punto conviene metterne uno "scollegato" e personalizzabile che vada bene universalmente.

Finalmente, grazie alla tua spiegazione, ho capito il problema; infatti ho visto ora che su Mozilla appare completamente differente, quindi è inutile insistere sulla mia idea. Mi va benissimo la tua idea, appena posti il codice lo testo subito. Grazie mille.

L'ho caricato e pubblicato. Un paio di cose:

In visualizzazione Anteprima si vede completamente sballato come posizione, tutto sulla sinistra e sfasato rispetto alla frase "ascolta...", però una volta pubblicato sembra posizionarsi correttamente. Il problema è che non ho modo di verificare le risoluzioni intermedie (smartphone di grandi dimensioni, tablet, ecc) e senza anteprima è un problema.

Quando apro il sito il player deve partire in automatico, nelle prove è successo solo un paio di volte, ma non ho capito con quale combinazione di azioni; e quando è partito il pulsante è rimasto con la freccetta del play, invece di mostrare le due linee verticali del pulsante "pausa". Se invece non parte e agisco manualmente sul pulsante si comporta correttamente.

Il codice in file txt è incomprensibile in quanto i gruppi style e script diventanto due sole righe infinite; dove hai messo /*...*/ li ho fatti diventare inizio riga, ma poi non saprei come indentarlo correttamente. Potresti inviarmelo in formato doc/docx o ti crea problemi?

Se riusciamo prima a risolvere queste cose, poi mi metto a fare prove di spostamento e colorazione. Grazie.

SUGGERIMENTO:

Se stai valutando di avviare automaticamente la riproduzione audio sul tuo sito, è importante sapere che i dispositivi Apple (iPhone e iPad) — in particolare Safari su iOS — bloccano l’autoplay di contenuti audio e video a meno che non vi sia stata un’interazione esplicita da parte dell’utente (es. un tap o un clic).

Anche se imposti l’attributo autoplay sull’elemento <audio>, la riproduzione non verrà avviata automaticamente a meno che:

• l’utente abbia già interagito con la pagina (es. tocco, clic, scroll, tap)

• oppure l’audio sia completamente silenziato (muted autoplay), ma questo vale solo per i video, non per l’audio standalone

Questa restrizione è stata introdotta per migliorare l’esperienza utente e ridurre contenuti invasivi. Tutti i principali browser moderni (Chrome, Firefox, Edge) stanno adottando politiche simili, rendendo l’autoplay audio sempre meno affidabile.

Testato personalmente su dispositivi iOS: anche con muted autoplay, l’audio non parte se non c’è interazione. Solo i video silenziati possono essere riprodotti automaticamente. Parte in automatico da PC ma non avendo un MAC non so se è uguale. Di sicuro non parte sui cellulari.

Grazie Roberto, non lo sapevo, molti utenti del sito sono abituati ad aprirlo per ascoltare direttamente l'audio del giorno; ovvio che se l'automatismo sarà impedito dai browser dovranno abituarsi a cliccare sul pulsante play. Effettivamente ora ho verificato che alla prima apertura non succede nulla, se poi apro una pagina qualsiasi e torno sulla Home il player si avvia automaticamente, quindi è esattamente come dici tu. A questo punto la mia richiesta di verifica per KolAsim non ha più senso. Grazie ancora per il suggerimento.

... nel BloccoNote di Windows, quello che uso io, usa l'opzione >Visualizza>A capo automatico

... no!, lo sconsiglio! ...poi, per l'inibizione dell'audio in autoplay in presenza di tracce audio (audio o video che siano, o per esempio gallerie con sfondo audio) è un fatto noto, direi da sempre che ho spesso ricordato in HelpCenter, per esempio puoi vedere anche in >>questo Topic di 5 anni fa...!...

...

... riguardo all'avvio automatico del suono audio, cosa da me sempre sconsigliata, purtroppo è stata una mia svista, avendo usato in una sezione del codice una parte con una mia invenzione per i video nello showbox...

... appresso ti passo una semplice modifica che puoi far da te:

...

... all'inizio del codice del tag STYLE dove vedi la stringa:
.custom-audio-player {display: flex; [eccetera]
... aggiungi margin:auto;  ...così::
.custom-audio-player { margin:auto; display: flex;
... oppure, senza stare a toccare il codice principale, in /HEAD puoi aggiungi questa stringa:
<style> .custom-audio-player { margin:auto !important; </style>

... ... mi è partito l'invio rimanendo indietro con le istruzioni, che sono queste per inibire l'autoplay e che puoi far da te:
...  nel secondo blocco di SCRIPT dove vedi la stringa
audioElement.autoplay = true;
... sostituisci TRUE con FALSE, ...così:
audioElement.autoplay = false;

... se è rimasto indietro qualcosa o ti servissero altri chiarimenti, avvisami...

...+... per comodità ho controllato solo il link altervista e ha sempre funzionato su PC, tablet e smartphone, con il brano della data corrente; ...non so se l'hai notato, al mio codice ho applicato anche il controllo che riconoscere quando il brano del giorno manca sostituendolo automaticamente con quello di default...

.

ciao

.

Eccomi KolAsim, rispondo tutto qui:

Ho impostato l'autoplay su false, tutto ok.

Riguardo l'indentazione intendevo dire che quando lo incollo nell'oggetto html, il codice è di difficile lettura (vedi immagine), non si se puoi inviarmelo direttamente in html, in modo da vederlo come lo hai scritto, sarebbe molto più facile per me capirci qualcosa.

ho integrato il codice direttamente nell'oggetto HTML, l'anteprima ora mostra il player esattamente sotto la frase (vedi immagine), e questo va bene per le risoluzioni più piccole, in quanto è proprio così, ma se tu guardi il sito su altervista vedrai che io ho messo l'oggetto testo e quello html sulla stessa riga (vedi immagine) e non su due righe separate. 

Ripeto, se queste due cose si possono sistemare sarebbe cosa buona, altrimenti non sono grandi problemi, sul sito funziona tutto, ho solo un po' di difficoltà io in fase di manutenzione.

Grazie ancora.

... forse non ho capito a cosa ti riferisci, ma per quel che ho visto su altervista mi pare corretto in tutte le risoluzioni:

... ho anche provato adesso il tuo stesso codice direttamente in WebSite, senza apparire in anteprima nessuna alterazione nella pagina con codici o scritte fantasma...

.

ciao

.

Come ho scritto il sito funziona correttamente.

L'immagine che ti ho allegato è l'anteprima alla massima risoluzione e come vedi si comporta come quelle basse. Cioè in anteprima WS PRO vedo sempre la frase sopra e il player sotto, a qualsiasi risoluzione. 

Però se tu lo vedi bene in anteprima la cosa mi preoccupa perché evidentemente c'è un elemento di disturbo nel progetto. Forse il codice PHP che mi estrapola il versetto un paio di righe più sopra che non funziona nemmeno come anteprima. Se guardi l'immagine vedrai che in anteprima esce una parte del codice. Magari provo a levarlo temporaneamente e vedo che succede e poi ti dico.

Fatta la prova, confermo il mio sospetto: la colpa è del codice PHP messo in un altro oggetto html sulla home page; se lo elimino il player si vede perfettamente anche in anteprima. Magari apro un altro post per quel codice che mi serve per estrapolare dei dati da una file csv. Immaginavo ci fosse qualcosa che non andasse ma siccome funzionava, non avevo dato peso al problema dell'anteprima.

Invece per la parte relativa all'indentazione del codice, potresti inviarmelo sotto forma compressa in un formato che sia facilmente ispezionabile? 

.

ciao

.

Sì, infatti, ti chiedo scusa per averti fatto perdere del tempo inutilmente, ma non potevo immaginare questo tipo di problema. Ora mi resta solo da fare i test con il colore di sfondo e poi con questo argomento ho finito. Ti ringrazio moltissimo per l'aiuto che mi stai dando su ogni argomento che ho aperto.

P.S. ora apro un altro post per il codice PHP che mi dà errore in anteprima.

... lì dove ti ho indicato prima per il tag STYLE, trovi background: transparent; ... quindi al posto di transparent puoi assegnare il colore che vuoi, e in sequenza puoi assegnare anche il RADIUS, il BORDER, il PADDING e quello che vuoi......

... oppure , come sempre lì detto, puoi usare lo STYLE CUSTOM senza dover toccare il codice BASE...

... il vecchio SCRIPT che hai ancora nella pagina lo puoi eliminare, è diventato inerte-obsoleto...

.

ciao, e buon divertimento con le personalizzazioni EXTRA...

.

Non è affatto come viene descritto . È vero che il player audio HTML5 ha un aspetto base gestito dal browser, ma questo non significa che non sia personalizzabile. Con CSS, JavaScript e persino con localStorage si possono ottenere risultati sorprendenti. 

Con CSS, JavaScript e localStorage ti permette di costruirti un’interfaccia completamente custom con grafica uniforme ma è richiesta una certa dimestichezza tecnica. In ogni caso l'oggetto AUDIO di incomedia a parte la poca personalizazione fa esattamente quello che deve fare senza troppi problemi per un ascolto standard.