Lordgiotto's
SoundCloud

SoundCloud Player e Validazione XHTML: due soluzioni grazie a JQuery


Inauguro oggi una serie di mini guide riguardanti XHTML, CSS3 e Jquery.

Inizierò parlandovi di un problema nel quale mi sono imbattuto giusto oggi: come validare con xHTML 1.0 Strict il codice da incorporare fornito da SoundCloud.

Ultimamente mi sono trovato a dover integrare in un sito che sto sviluppando il player di SoundCloud, famoso Social Network musicale.

Utilizzando il player Flash

Vista la necessità di rendere il sito più cross-browser possibile, potremmo decidere di optatare per il player flash a discapito di quello HTML5.

Purtroppo, però, il codice da incorporare che SoundCloud fornisce non può in alcun modo esser validato con xHTML 1.0 Strict a causa della presenza del tag embed al suo interno. In rete non ho trovato alcuna soluzione a questo problema, quindi me la sono dovuta inventare.

Questo è il codice fornito dal servizio:

<a href="http://--LinkAlFileSwf--">http://--LinkAlFileSwf--</a>

Il tag embed, come dicevo, non è standard xHTML, quindi inevitabilmente la validazione fallirà. Togliendolo, però, il player non verrà visualizzato se non su Chrome.

La soluzione è quella di cambiare in questo modo la conformazione del tag object:

<a href="http://--LinkAlFileSwf--">http://--LinkAlFileSwf--</a>

Per Evitare, però, di dover modificare tutte le volte il codice html, è possibile usare questo semplice script JQuery che ho creato, inserendo il codice di incorporazione normale che SoundCloud ci fornisce, eliminando il tag embed e demandando allo script la sua modifica.

if ( $('param').length > 0) {
	$('param').each( function () {
		if ( $(this).attr('name') == 'movie' ) {
			var movie = $(this).attr('value');
			var obj = $(this).parent('object');
			$(obj).attr('type', 'application/x-shockwave-flash');
			$(obj).attr('data', movie);
		};
	});
};

Purtroppo IE8 non supporta i selettori di attributo, quindi ho dovuto “sporcare” un po’ il codice per renderlo compatibile.

In ogni caso questo script non fa altro che controllare se esistono tag param con attributo name=movie, modificando il tag object genitore come descritto sopra.

Mi auguro questo possa tornare utile a qualcuno.

Utilizzando il Widget JavaScript

Ho recentemente scoperto l’esistenza di un widget Javascript creato dal team di SoundCloud per incorporare le tracce audio nel proprio sito.

In questa pagina potete trovare la documentazione ufficiale: il suo utilizzo è davvero semplice e la possibilità di personalizzazione tramite la modifica dei css dei temi standard è davvero ottima.

Vi lascio solo un paio di accorgimenti:

  • nell'<head> della vostra pagina importate il css del tema più conforme ai vostri gusti, come ad esempio:
    <link rel="stylesheet" href="../css/sc-player-minimal.css" type="text/css">
    
  • è importante modificate il file sc-player-minimal.css (o quello da voi scelto) eliminando la riga
    @import url("sc-player-minimal/standards.css");
    
  • A questo punto modificate a piacimento i file sc-player-minimal/structure.csssc-player-minimal/colors.css e le immagini in sc-player-minimal/img per uniformarlo allo stile del resto della pagina.

Buon divertimento ;)

Questa voce è stata pubblicata il aprile 12, 2012 alle 10:45 am. È archiviata in CSS, JQuery, Tecnologie Web, xHTML con tag , , . Aggiungi il permalink ai segnalibri. Segui tutti i commenti qui con il feed RSS di questo articolo.

2 pensieri su “SoundCloud Player e Validazione XHTML: due soluzioni grazie a JQuery

  1. Ciao, volevo chiederti se c’è un modo di inserire il codice embed di soundcloud in una mail, e fare in modo che chi riceve la mail possa sentirsi il brano direttamente da lì, quindi senza aggiungere altri link di collegamento…
    Utilizzando Hotmail e selezionando modifica in html ho potuto inserire il codice embed, dopodiché tornando in formato rtf visualizzo correttamente il player di soundcloud… ma mandando a me stesso la mail come test prova purtroppo il player non è più visualizzabile… hai qualche consiglio? grazie e buon lavoro!

  2. nino in ha detto:

    Ciao, pensi sia possibile utilizzare il player di soundcloud per un flusso streaming?

Lascia un commento

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione / Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione / Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione / Modifica )

Google+ photo

Stai commentando usando il tuo account Google+. Chiudi sessione / Modifica )

Connessione a %s...

%d blogger cliccano Mi Piace per questo: