jQuery è incredibilmente versatile nella manipolazione del DOM. In questo articolo vedremo come trasformare dei semplici link HTML in
elementi audio HTML5.
I nostri link dovranno essere contraddistinti da una classe specifica e da un attributo di dati per ottenere la versione alternativa del file audio:
<a href="audio.mp3" class="audio" data-src="audio.ogg">...</a>
Il codice jQuery è abbastanza semplice:
$('a.audio').each(function() {
var $a = $(this);
var href = this.href;
var alt = $a.data('src');
var html = '<audio controls>';
html += '<source src="' + href + '"/>';
html += '<source src="' + alt + '"/>';
html += '</audio>';
$a.replaceWith(html);
});
Come si può notare si tratta di una soluzione molto efficace.