Realizzare un sito web per pubblicare i propri lavori musicali è il primo passo per allargare la rete degli ascoltatori e dare la giusta visibilità ai propri lavori: ma come farlo in maniera che il risultato sia anche esteticamente gradevole?
Per me è fuori di dubbio che un sito web personale sia una scelta giusta per mettere in mostra le tue opere musicali, a prescindere dal numero di piattaforme di streaming su cui hai già pubblicato il tuo catalogo.
Del resto, nella giungla dei vari Spotify, Apple Music oppure Qobuz e via discorrendo, ottenere anche un minimo di visibilità, per un’artista indipendente, non è certo cosa semplice.
Chi frequenta Musica Informatica sa bene quanto amo raccogliere le sollecitazioni che mi arrivano dagli utenti e quella arrivatami ieri in posta mi è sembrata degna di interesse, visto anche il mio profilo lavorativo.
Mi si chiedeva se esistesse un modo per pubblicare i propri lavori musicali sul web potendo contare su un player bello esteticamente e facile sia da utilizzare sia da implementare.
Ebbene, non avevo mai pensato di dedicarmi ad un argomento del genere, nonostante per me sia pane quotidiano, soprattutto quando sono impegnato sullo sviluppo prima che sul web design.
Una libreria per visualizzare forme d’onda
Ecco allora, la presentazione di Wavesurfer, una libreria Javascript che permette di visualizzare forme d’onda e file musicali in maniera gradevole e molto funzionale. Facile da implementare su ogni pagina web e utile per numerose applicazioni, web e mobile, responsive oppure no.
A tutto ciò si aggiunge – primo – che Wavesurfer è una libreria gratuita e open source, e – secondo – che può essere utilizzata come un vero e proprio player musicale, anche avanzato.
Wavesurfer in prima battuta può sembrare un semplice giochino ma in realtà è una libreria utilizzata in contesti anche di una certa complessità, relativi alla ricerca acustica e fonetica.
Nell’articolo di oggi, che mi piacerebbe fosse il primo di una serie, voglio soffermarmi innanzitutto sulla sua integrazione all’interno di una semplice pagina HTML, giusto per capire come e da dove iniziare. Gradualmente, nel corso di altri articoli, scenderemo sempre più in profondità.
Come utilizzare Wavesurfer in una pagina web?
Dato che si tratta di un articolo per iniziare (Getting Started) vediamo subito come è possibile richiamre Wavsurfer all’interno di una pagina web per sfruttare il potenziale.
La libreria Wavesurfer può essere richiamata in 3 modi:
- Installando e importando la libreria;
- Richiamando la libreria via URL all’interno dei tag script.
Per semplicità io scelgo sempre la seconda opzione, soprattutto se si tratta di lavorare su piccoli siti web. Per progetti più complessi, invece, è consigliabile adoperare la prima, così da avere maggiore controllo sugli aggiornamenti e sui moduli.
Richiamare Wavesurfer in una pagina HTML
Per richiamare Wavesurfer tramkite url, è sufficiente la stringa di seguito prima che sia chiuso l’elemento head:
<head>
<script src="https://unpkg.com/wavesurfer.js"></script>
</head>Successivamente, nella medesima pagina ma in fondo, dopo il footer, bisogna creare un’istanza di Wavesurfer, con una serie di valori operativi, opzionali e non:
<script>
document.addEventListener("DOMContentLoaded", () => {
const wavesurfer = WaveSurfer.create({
container: '#waveform',
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
});
wavesurfer.load('/complex_audio.mp3');
document.querySelector("#waveform").addEventListener('click', () => {
wavesurfer.playPause();
});
});
</script>L’istanza non fa altro che generare una forma d’onda all’interno del div HTML che porta ID waveform e che avrà un certo stile di colore. Inoltre viene dichiarato il file da riprodurre e che la riproduzione deve avviarsi ed essere stoppata al click del mouse sulla forma d’onda.
Nella pagina HTML sarà sufficiente aggiungere questo DIV:
<div id="waveform"></div>E una volta renderizzata la pagina, vedremo apparire magicamente il nostro player:
Ovviamente previso caricamento sul server.
L’implementazione di Wavesurfer è veramente molto semplice. Nei prossimi articoli scenderemo nel dettaglio, per capire come richiamare i plugin e come personalizzare i player, visto che si possono ottenere numerose combinazioni.
Lascia un commento