Tema WordPress audio appuntato

Ripubblicato da Platone

Seguaci: 0

Temo di dover iniziare con un intero retroscena, poiché il viaggio qui è il punto, non tanto il tema.

Un tizio mi ha scritto qualche tempo fa descrivendo la situazione in cui si trovava. La sua azienda ha un sacco di siti WordPress per la radio pubblica, molti dei quali sono essenzialmente sedi di podcast. C'è una funzionalità specifica che secondo lui sarebbe stata l'ideale per tutti: avere un lettore audio "bloccato". Ad esempio, potresti riprodurre un podcast e quindi continuare a navigare nel sito senza che il podcast si interrompa.

Questo è un po' complicato da realizzare in WordPress, perché WordPress ricarica l'intera pagina come qualsiasi altro sito Web normale, senza fare nulla di speciale con la gestione dei collegamenti o la manipolazione della cronologia. Quando una pagina viene ricaricata, la riproduzione di qualsiasi audio sulla pagina viene interrotta. È proprio così che funziona il web.

Quindi, come lo faresti su un sito WordPress? Bene, potresti renderlo un sito WordPress senza testa e ricostruire l'intero front-end come un'app a pagina singola. Mi sembra divertente, ma sarei riluttante a fare quella chiamata ad appena per questo prima cosa.

Cos'altro potresti fare? Potresti trovare un modo per fare in modo che la pagina non si ricarichi mai. Ricordo di averlo fatto un piccolo sito statico 10 anni fa, ma non era un sito WordPress in piena regola e allora non mi presi nemmeno la briga di aggiornare l'URL.

E se facessi questo...?

Intercetta i clic sui link interni
Ajax ha salvato il contenuto da quell'URL
Sostituito il contenuto della pagina con quel nuovo contenuto

Lo farò velocemente in jQuery per te:

$("a").on("click", () => { const url = $(this).attr("href"); $.get(url + " main", (data) => { $("main").html(data); history.pushState({}, "", url); });
});

Non è lontano dall’essere letteralmente funzionale. Vorresti stare attento a popstate evento per gestire il pulsante Indietro, ma sono solo poche righe in più.

In questo mondo ipotetico, disporresti il sito in questo modo:

<html>
<!-- ... --> <body> <main></main> <audio src="" controls ...></audio>
</body>
</html>

Quindi tutto questo <main> il contenuto viene scambiato, l'URL cambia, ma il tuo <audio> il giocatore viene lasciato solo per continuare a giocare in pace. Scriveresti più JavaScript per dare alle persone un modo per aggiornare quale podcast sta riproducendo e così via.

Si scopre che c'è altro a cui pensare qui però. Verranno eseguiti script in linea sul contenuto? Che ne dici di aggiornare il file <title> pure? Ci sono abbastanza preoccupazioni sui margini che probabilmente ti irriteranno nel gestirle.

Volevo provare con queste cose, quindi ho messo insieme un tema WordPress e ho cercato Turbo invece di scrivere qualcosa a mano. Turbo (la nuova versione di Turbolinks) è pensata proprio per questo. È una libreria JavaScript che rilasci sulla pagina (nessun processo di compilazione, nessuna configurazione) e funziona e basta. Intercetta i clic sui collegamenti interni, quelli Ajax per i nuovi contenuti, ecc. Ma ha questa caratteristica interessante in cui se inserisci un data-turbo-permanent attributo su un elemento HTML, lo persisterà durante il ricaricamento. Così io l'ho fatto per il lettore audio qui.

Ecco il punto però.

Semplicemente non ho tempo per finire questo progetto correttamente. È stato divertente fare uno spettacolo, ma il mio interesse per esso si è un po' esaurito. Quindi per ora lo lascio stare:

It quasi funziona, meno un bug evidente per cui l'audio interrompe la riproduzione durante la prima navigazione, quindi funziona dopo. Sono sicuro che sia risolvibile, ma semplicemente non ho molta pelle in questo gioco. Immagino che mi limiterò a ritirarmi e lascerò questo codice in giro affinché qualcuno possa ritirarlo se è utile per loro.

Un'altra cosa in gioco qui è che Turbo viene da Basecamp, e Basecamp sì piuttosto imploso recentemente non è stato piacevole utilizzare il loro software. Esacerbato dal fatto che Sam Stephenson ha scritto il 75% di Turbo e ha detto che non lo toccherà (o altri progetti correlati) a meno che il software non venga spostato nelle sue fondamenta. Turbo era già in un posto traballante da quando sembrava passeggino rispetto a Turbolinks, e ora è attivo molto terreno nodoso.

Fonte: https://css-tricks.com/pinned-audio-wordpress-theme/

Timestamp: 18 Maggio 2021