Come utilizzare il blocco audio di WordPress?

Pubblicato: 2021-09-15

Il blocco audio di WordPress ti consente di fornire file audio riproducibili all'interno delle tue pagine e dei tuoi post. I file audio possono essere aggiunti dalla tua libreria multimediale o da un URL. Gli utenti possono riprodurre l'audio dai loro browser o scaricarli per ascoltarli offline. Questo è un ottimo modo per fornire musica, podcast o altri tipi di file audio che i tuoi visitatori possono ascoltare e utilizzare.

In questo articolo, esamineremo il blocco audio e vedremo come funziona. Vedremo anche come aggiungerlo ai tuoi post e alle tue pagine, vedremo suggerimenti e best practice per utilizzarlo e esamineremo le domande frequenti.

Come aggiungere il blocco audio al tuo post o pagina

Come aggiungere il blocco audio al tuo post o pagina

Per aggiungere un blocco audio, fai clic sull'inseritore di blocchi nella posizione in cui desideri posizionare il blocco o selezionalo nell'angolo in alto a sinistra. Cerca Audio e fai clic su di esso.

Come aggiungere il blocco audio al tuo post o pagina

In alternativa, puoi digitare /audio e premere invio dove vuoi posizionare il blocco.

Come aggiungere il blocco audio al tuo post o pagina

Il Blocco audio verrà aggiunto ai tuoi contenuti dove potrai aggiungere un file audio da riprodurre o scaricare. Fai clic per caricare il file audio, sceglilo dalla tua libreria o inserisci un URL per il file.

Come aggiungere il blocco audio al tuo post o pagina

Il tuo file audio verrà visualizzato come un lettore audio completo di una didascalia in cui puoi inserire il nome o altre informazioni sul file. Include le opzioni di base del lettore audio.

Come aggiungere il blocco audio al tuo post o pagina

Passando il mouse sull'icona del volume si apre il dispositivo di scorrimento in cui l'utente può modificare il livello del volume.

Come aggiungere il blocco audio al tuo post o pagina

Sulla destra ci sono tre punti che aprono le opzioni per l'utente. Questo ha un link per il download.

Impostazioni e opzioni del blocco audio

Impostazioni e opzioni del blocco audio

Il blocco audio include impostazioni e opzioni all'interno del blocco stesso e della barra laterale destra. Diamo un'occhiata a entrambi.

Barra degli strumenti Blocco audio

Barra degli strumenti Blocco audio

La barra degli strumenti Blocco audio è posizionata sopra il blocco. Appare quando selezioni il blocco e include meno strumenti rispetto alla maggior parte dei blocchi di WordPress.

Cambia tipo di blocco o stile

Cambia tipo di blocco o stile

Trasforma il blocco in colonne, un blocco file per consentire agli utenti di scaricare l'audio come file o un gruppo a cui è possibile applicare uno stile. Sto passando il mouse su File in questo esempio. Fornisce un'anteprima dell'aspetto del file come Blocco file.

Trascina e sposta

Trascina e sposta

Lo strumento Trascina, l'icona con 6 punti, ti permette di trascinare il blocco dove vuoi. Lo strumento Sposta, le frecce su e giù, spostano il blocco in alto o in basso di uno spazio contenuto ogni volta che si fa clic su una freccia. Entrambi forniscono un modo semplice per spostare il blocco nell'area del contenuto.

Cambia allineamento

Cambia allineamento

Le opzioni di allineamento determinano il posizionamento del blocco sullo schermo. Le opzioni includono sinistra, destra, larghezza ampia e larghezza completa. La scelta di sinistra o destra lo posiziona su quel lato dello schermo e lo avvolge con il blocco di contenuto sotto di esso.

Cambia allineamento

Questa è la larghezza ampia, che occupa la maggior parte della larghezza dello schermo.

Sostituire

Sostituire

Questa opzione consente di sostituire il file audio senza eliminare il blocco. Apri la libreria, carica un file o inserisci l'URL del file.

Opzioni

Opzioni

L'opzione include le impostazioni standard che si trovano nella maggior parte dei blocchi di WordPress:

Nascondi altre impostazioni : nasconde la barra laterale destra.

Copia : copia il blocco in modo da poterlo incollare da qualche altra parte all'interno del contenuto.

Duplica : aggiunge un duplicato del blocco sotto l'originale.

Inserisci prima : posiziona uno spazio per un blocco prima del blocco.

Inserisci dopo : posiziona uno spazio per un blocco dopo il blocco.

Sposta in : consente di spostare il blocco utilizzando una linea blu per sceglierne il posizionamento.

Modifica come HTML : passa il blocco alla visualizzazione dell'editor di codice in modo da poter modificare l'HTML senza modificare il resto dei blocchi.

Aggiungi a blocchi riutilizzabili : aggiunge il blocco all'elenco dei blocchi riutilizzabili.

Gruppo : aggiunge il blocco a un gruppo in modo da poterli regolare come una singola unità.

Rimuovi blocco : elimina il blocco.

Didascalia

Didascalia

La didascalia ha un altro set di opzioni che include impostazioni per testo in grassetto e corsivo, collegamenti e altre opzioni. Ne ho usati molti in questo esempio. Influenzano il testo che stai evidenziando.

Le opzioni in grassetto e corsivo possono essere utilizzate insieme o indipendentemente. Ho aggiunto grassetto e corsivo alla parola "Questo" nell'esempio sopra.

Per il collegamento, vedrai suggerimenti da quelli che hai usato prima. Include un'opzione per aprire il collegamento in una nuova scheda. Ho aggiunto un collegamento alla parola "audio" nell'esempio sopra.

Facendo clic su Altre opzioni sono disponibili impostazioni per lo stile del testo. Influiscono tutti sul testo che stai evidenziando. Ne ho usati diversi nell'esempio sopra. Loro includono:

Codice in linea : questo stilizza il testo in modo che assomigli al codice.

Immagine in linea : aggiunge un'immagine in linea dalla tua libreria multimediale, come ho fatto tra le parole "audio" e "didascalia".

Input da tastiera: modella il testo con la formattazione HTML della tastiera utilizzata dal browser.

Barrato : posiziona una riga nel testo, come la parola "didascalia" nell'esempio sopra.

Pedice : questo rende il testo più basso e più piccolo del resto, come la parola "Tu" nell'esempio sopra.

Apice : questo rende il testo più alto e più piccolo del resto.

Colore del testo : questo apre gli strumenti di colore per cambiare il colore del testo, come ho fatto con la parola "tu" nell'esempio sopra. Scegli tra i colori preselezionati o crea un colore personalizzato. Per i colori personalizzati, puoi utilizzare il selettore colori o inserire il codice esadecimale, il codice RGB o il codice HSL.

Impostazioni della barra laterale del blocco audio

Impostazioni della barra laterale del blocco audio

Le impostazioni della barra laterale aggiungono impostazioni audio e impostazioni avanzate. Seleziona l'ingranaggio per aprire le impostazioni se la barra laterale non viene visualizzata. Seleziona il blocco per vedere le impostazioni per questo blocco specifico. Diamo un'occhiata più da vicino alle impostazioni.

Impostazioni audio

Impostazioni audio

Impostazioni audio ti consente di scegliere come il lettore audio gestisce il file. Impostandolo per la riproduzione automatica avvierà il file quando la pagina viene caricata. Impostandolo su loop fa ricominciare il file quando raggiunge la fine del file.

Puoi anche scegliere come funziona il precarico. Ciò determina la quantità di file scaricata quando la pagina viene caricata nel browser dell'utente. Le opzioni includono:

Auto : scarica l'intero file audio anche se l'utente non fa clic per riprodurlo.

Metadati : scarica solo il testo, che è l'informazione di base sul file. Il file audio stesso non viene scaricato a meno che l'utente non scelga di riprodurre il file.

Nessuno : nessuna informazione o dato viene scaricato automaticamente.

Avanzate

Audio avanzato

Le impostazioni avanzate includono i campi per l'ancora HTML e le classi CSS aggiuntive. L'ancora HTML è un URL che ti consente di collegarti direttamente al blocco. Il campo Classi CSS aggiuntive consente di aggiungere classi CSS per definire lo stile del blocco.

Suggerimenti e best practice per l'utilizzo efficace del blocco audio

Usa la didascalia per mostrare il nome del file audio.

Usa intestazioni e paragrafi chiari per descrivere i file. Questo informa l'utente su cosa aspettarsi.

Imposta il precaricamento su nessuno o sui metadati per accelerare il caricamento della pagina per qualsiasi blocco che non richiede la riproduzione automatica.

Usa la riproduzione automatica e il loop per gli inviti all'azione del prodotto. Disabilita la riproduzione automatica e il loop per altri blocchi audio nella pagina.

Scegli Gruppo per definire lo sfondo del lettore audio.

Usa questo blocco per incorporare l'audio nelle tue pagine e nei tuoi post.

Usa un blocco da incorporare con l'URL del file se non vuoi includere un pulsante di download.

Domande frequenti sul blocco audio

Cosa fa il Blocco Audio?

Aggiunge un lettore audio al tuo sito Web che consente agli utenti di riprodurre o scaricare un file audio.

Qual è il vantaggio di utilizzare il blocco audio?

Crea un lettore, quindi gli utenti sono informati che un file audio è disponibile per l'ascolto.

Può essere trasformato in altri blocchi?

Sì. Può anche essere trasformato in un Blocco file, colonne o un gruppo. Il Blocco file consente agli utenti di scaricare il file anziché riprodurlo tramite i browser.

È possibile utilizzare altri blocchi per i file audio?

Sì. Puoi incollare l'URL in un blocco da incorporare, ma non ha le impostazioni audio del blocco audio. Ti darà un lettore audio sul front-end, ma non è elegante come quello fornito da questo blocco. La versione incorporata include l'ora sulla barra di monitoraggio, ma non include un'opzione di download o una didascalia.

Quali sono gli usi migliori per questo blocco?

Questo blocco può essere utilizzato per musica, tracce audio, campioni di album, podcast, sermoni, corsi audio, audiolibri, ecc.

Quali tipi di file può utilizzare il blocco?

Il blocco audio è compatibile con i file .mp3, .m4a, .ogg e .wav. Il lettore sembra e funziona allo stesso modo con ciascuno dei tipi di file.

Conclusione

Questo è il nostro sguardo al blocco audio di WordPress. È un blocco semplice con poche impostazioni. Hai il controllo sulla sua posizione all'interno dei tuoi contenuti e su come funziona all'interno dei browser dei tuoi visitatori. Questo blocco è una scelta eccellente per qualsiasi tipo di file audio compatibile con WordPress.

Vogliamo sentire da voi. Usi il Blocco Audio? Fateci sapere cosa ne pensate nei commenti.

Immagine in primo piano tramite tutto bagel / shutterstock.com