jPlayer è un plug-in per jQuery che consente di:

• suonare ed avere pieno controllo dei file audio nella tua pagina web.
• creare e disegnare un player audio soltanto con HTML e CSS
• aggiungere effeti sonori ai tuoi progetti jQuery
• utilizzare le caratteristiche di streaming veloci di HTML5in mp3 e ogg.

Tutto questo è ottenuto con HTML5 in mp3 e ogg dove disponibile, e in mp3 con un player Flash invisibile per gli altri browser.

La prima cosa da fare è creare uno script PHP che si occupi di fare da Proxi tra il server REST e quello che contiene la nostra applicazione, infatti la richiesta XmlHttpRequest di Javascript è per motivi di sicurezza legata esclusivamente al domino su cui viene effettuata.

Scriviamo quindi per prima cosa la parte PHP che ci è necessaria, utilizzando CURL è semplicissimo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<?php
// Per sicurezza è meglio che l'hostname del server rest non sia un parametro
// ma sia scritto staticamente.
define('HOSTNAME', 'http://www.wheretherestserveris.com/');
// Prende il path del file rest
$query = urlencode($_GET['query']);
$url = HOSTNAME.$query;
// Apre Curl
$mycurl = curl_init($url);
// Setto curl per restituire solo il contenuto senza header
curl_setopt($mycurl, CURLOPT_HEADER, false);
curl_setopt($mycurl, CURLOPT_RETURNTRANSFER, true);
$myxml = curl_exec($mycurl);
// Imposto gli header XML
header("Content-Type: text/xml");
echo $myxml;
curl_close($mycurl);
?>

Salviamo il nostro file proxi sul nostro dominio con il nome desiderato (Es. myrestserver.php) , e poi utilizziamo jQuery e il plugin jParse per interpretare comodamente l’xml, ecco uno snippet di esempio del codice javascript necessario:

1
2
3
4
5
6
7

$(function(){
$('#divchevoglio').jParse({
ajaxOpts: {url: 'myrestserver.php?query=iwantthis.xml'},
elementTag: ['field1', 'field2', 'field3'],
output: ' <div><ul><li>jpet0</li><li>jpet1</li><li>jpet2</li></div>'
});
});

Per approfondimenti su opzioni, callback etc. guardate il sito ufficiale di jParse

Spero di essere stato utile.