Personalizzazione grafica Player audio 
Autor: Michele M.Buongiorno a tutti, uso da tempo questo player audio, così organizzato:
Nella Home c'è un oggetto html:
<div>
<audio id="sdAudio" src="https://homilyvoice.it/public/VDGaudio/default.mp3" controls autoplay loop />
</div>
Nelle proprietà della Home, prima della chiusura del tag HEAD:
<script>
$(function() {
sdOggi = new Date(); //millisecondi da mezzanotte del 01/01/1970
GG = sdOggi.getDate(); // giorno del mese
MM = sdOggi.getMonth() + 1; // mese
AAAA = sdOggi.getFullYear(); // Anno
if (GG < 10) GG = "0" + GG;
if (MM < 10) MM = "0" + MM;
sdMp3Dir = "https://homilyvoice.it/public/VDGaudio/";
sdMp3File = sdMp3Dir + AAAA + MM + GG + ".mp3";
$("#sdAudio").attr("src", sdMp3File);
});
</script>
In Impostazioni - Statistiche e codice - Codice:
<style>
#imHTMLObject_12 {
padding-top: 56.25% !important;
height: 0 !important;
width: 100% !important;
position: relative !important;
border-radius: 5px !important;
box-shadow: 3px 3px 5px 0px rgb(128 128 128) !important;
}
#imHTMLObject_12 iframe {
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: calc(100% - 4px) !important;
height: calc(100% - 4px) !important;
right: 8px !important;
border: 2px solid rgba(255, 153, 0, 1) !important;
}
@media (min-width: 900px) {
#imHTMLObject_12 iframe {
border-radius: 5px;
}
}
</style>
Vorrei poter modificare a piacimento il colore interno dell'ovale del player; ho notato che usandolo in siti diversi il colore cambia:
www.homilyvoice.it (grigio)
https://www.michelemenniti.altervista.org/HV/ (celeste)
ma io vorrei personalizzarlo.
Inoltre non mi ha mai funzionato la lettura del file default.mp3 in assenza del file con la data del giorno. Ora non posso eliminarlo in quanto ci sono tanti utenti che lo ascoltano, ma se mi arriva qualche suggerimento posso fare delle prove al volo. Comunque per ora la parte più importante è quella del colore. Grazie.
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
.
Autor
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
Autor
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
Autor
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.