{"id":5589,"date":"2022-10-17T10:00:25","date_gmt":"2022-10-17T08:00:25","guid":{"rendered":"https:\/\/www.eugigufo.net\/it\/?page_id=5589"},"modified":"2024-10-01T13:58:27","modified_gmt":"2024-10-01T11:58:27","slug":"paragrafo33","status":"publish","type":"page","link":"https:\/\/eugigufo.net\/it\/inerario\/paragrafo33\/","title":{"rendered":"\u00a7\u00a033. Come pubblicare gli archivi audio online"},"content":{"rendered":"<p><i>Indice dei sottoparagrafi<\/i><br \/>\n1.&nbsp;<a href=\"#art33spar1\">Il&nbsp;problema da&nbsp;risolvere<\/a><br \/>\n2.&nbsp;<a href=\"#art33spar2\">Con quali file lavoriamo<\/a><br \/>\n3.&nbsp;<a href=\"#art33spar3\">Quali tecnologie utilizziamo<\/a><br \/>\n4.&nbsp;<a href=\"#art33spar4\">Prepariamo i&nbsp;file per la&nbsp;pubblicazione<\/a><br \/>\n5.&nbsp;<a href=\"#art33spar5\">Mostriamo l&rsquo;elenco dei file caricati nella directory<\/a><br \/>\n6.&nbsp;<a href=\"#art33spar6\">Creiamo i&nbsp;link al&nbsp;player audio e&nbsp;ai&nbsp;testi<\/a><br \/>\n7.&nbsp;<a href=\"#art33spar7\">Creiamo la&nbsp;pagina con il&nbsp;player e&nbsp;i&nbsp;testi<\/a><br \/>\n8.&nbsp;<a href=\"#art33spar8\">Cosa possiamo aggiungere<\/a><br \/>\n9.&nbsp;<a href=\"#art33spar9\">Un&nbsp;esempio funzionante del metodo descritto<\/a><\/p>\n<p>A&nbsp;marzo del&nbsp;2022 al&nbsp;sottoscritto &egrave;&nbsp;capitato di&nbsp;pubblicare, sulla versione russa di&nbsp;questo sito, una <a href=\"https:\/\/eugigufo.net\/echomoskvy\/\">parte degli archivi audio<\/a> di&nbsp;una emittente radiofonica russa chiusa proprio in&nbsp;quel periodo storico per dei motivi politici (era fortemente sgradita al&nbsp;regime politico vigente). Dal punto di&nbsp;vista tecnico, la&nbsp;pubblicazione sopraindicata &egrave;&nbsp;stata una esperienza professionale nuova&nbsp;e, di&nbsp;conseguenza, ha&nbsp;spinto l&rsquo;autore a&nbsp;stilare un&nbsp;articolo utile al&nbsp;fine di&nbsp;non dimenticare (o&nbsp;riepilogare mentalmente) le&nbsp;nuove nozioni acquisite nel corso del lavoro. Il&nbsp;testo potrebbe rivelarsi utile anche ai&nbsp;lettori italiani. A&nbsp;chi, eventualmente, legge bene in&nbsp;russo conviene vedere l&rsquo;<a href=\"https:\/\/eugigufo.net\/echomoskvy\/kakjetosdelano\/\">articolo originale<\/a>, tutti gli altri rimangano su&nbsp;questa pagina.<br \/>\nProcediamo con l&rsquo;ordine.<\/p>\n<p><a name=\"art33spar1\"><\/a><b>1.&nbsp;Il&nbsp;problema da&nbsp;risolvere<\/b><br \/>\nImmaginiamo di&nbsp;voler\/dover pubblicare su&nbsp;un&nbsp;sito web un&nbsp;archivio di&nbsp;file audio: una alta quantit&agrave; di&nbsp;file che per qualche motivo non &egrave;&nbsp;destinata a&nbsp;crescere nel tempo (o, almeno, non crescere con una buona costanza e\/o frequenza). Pubblicando tale archivio dobbiamo dunque realizzare i&nbsp;seguenti punti elencati nell&rsquo;ordine di&nbsp;priorit&agrave;:<br \/>\n&ndash;&nbsp;indicare, per ogni file audio, il&nbsp;suo argomento e\/o titolo, la&nbsp;data della prima pubblicazione ufficiale, i&nbsp;nomi degli autori e&nbsp;la&nbsp;durata;<br \/>\n&ndash;&nbsp;fornire ai&nbsp;visitatori del sito la&nbsp;possibilit&agrave; non solo di&nbsp;scaricare i&nbsp;file, ma&nbsp;anche di&nbsp;ascoltarli direttamente dal sito;<br \/>\n&ndash;&nbsp;aggiungere la&nbsp;possibilit&agrave; di&nbsp;leggere con gli occhi il&nbsp;testo relativo al&nbsp;file audio (che pu&ograve; essere la&nbsp;trascrizione di&nbsp;una trasmissione radiofonica, il&nbsp;testo di&nbsp;una canzone etc. etc.);<br \/>\n&ndash;&nbsp;pubblicare i&nbsp;materiali aggiuntivi in&nbsp;qualche modo connessi ai&nbsp;file audio pubblicati.<\/p>\n<p><a name=\"art33spar2\"><\/a><b>2.&nbsp;Con quali file lavoriamo<\/b><br \/>\nSupponiamo di&nbsp;avere una serie di&nbsp;file *.mp3 con l&rsquo;audio e&nbsp;di&nbsp;file *.txt con i&nbsp;relativi testi (in&nbsp;particolare, quest&rsquo;ultimo formato mi&nbsp;sembra il&nbsp;pi&ugrave; facilmente integrabile nelle pagine web; nel corso dell&rsquo;articolo spiegher&ograve; perch&eacute; i&nbsp;testi non vengono inclusi direttamente nel codice delle pagine o&nbsp;inseriti attraverso un&nbsp;CMS). Ogni coppia dei file ha&nbsp;i&nbsp;nomi uguali (per esempio, brano001.mp3 e brano001.txt con la&nbsp;numerazione che va&nbsp;dal file pi&ugrave; datato al&nbsp;file pi&ugrave; recente): tra poco capirete il&nbsp;perch&eacute;.<br \/>\nTutti i&nbsp;file vengono banalmente caricati sul server, nella directory appositamente creata: per esempio, nella directory archivio\/audio (il&nbsp;cui indirizzo assoluto sar&agrave; https:\/\/sito.it\/archivio\/audio).<\/p>\n<p><a name=\"art33spar3\"><\/a><b>3.&nbsp;Quali tecnologie utilizziamo<\/b><br \/>\nDi&nbsp;tutte le&nbsp;conoscenze tecniche disponibili nella testa del sottoscritto sono stati scelti i&nbsp;linguaggi PHP, HTML, CSS e&nbsp;XML. Tutti gli altri linguaggi di&nbsp;programmazione e&nbsp;di&nbsp;markup che possono apparirvi utili, non sono stati presi in&nbsp;considerazione per una serie di&nbsp;motivi tecnicamente giustificati (a&nbsp;volte anche a&nbsp;causa della scarsa conoscenza, ahahaha).<\/p>\n<p><a name=\"art33spar4\"><\/a><b>4.&nbsp;Prepariamo i&nbsp;file per la&nbsp;pubblicazione<\/b><br \/>\nL&rsquo;utilizzo di&nbsp;un&nbsp;database per la&nbsp;gestione degli archivi che per qualche motivo non saranno pi&ugrave; aggiornati (oppure aggiornati molto raramente) &egrave;&nbsp;uno spreco criminale di&nbsp;risorse. &Egrave;&nbsp;assolutamente sufficiente creare per il&nbsp;nostro [ognuno dei nostri] archivio un&nbsp;file xml statico con i&nbsp;metadati di&nbsp;ogni file audio.<br \/>\nDi&nbsp;conseguenza, nel nostro file brani.xml per ogni file audio scriviamo una struttura di&nbsp;questo tipo:<\/p>\n<pre class=\"brush: xml; collapse: false; title: listing 1; notranslate\" title=\"listing 1\">\n&lt;puntata ntid=&quot;brano001&quot;&gt;\n     &lt;trasmissione&gt;Le avventure degli archivi&lt;\/trasmissione&gt;\n     &lt;conduttori&gt;Tizio Rossi e Caio Verdi&lt;\/conduttori&gt;\n     &lt;data&gt;12 aprile 2014&lt;\/data&gt;\n     &lt;durata&gt;45:50&lt;\/durata&gt;\n     &lt;topic&gt;Alla ricerca degli archivi segreti di Sempronio Bianchi...&lt;\/topic&gt;\n&lt;\/puntata&gt;\n<\/pre>\n<p>\nCome potete vedere, il&nbsp;file xml contiene tutte le&nbsp;informazioni che abbiamo pianificato di&nbsp;visualizzare sulla pagina web dell&rsquo;archivio (si&nbsp;riveda il&nbsp;primo sottoparagrafo).<br \/>\nNotate che l&rsquo;identificatore delle informazioni relative ai&nbsp;singoli file audio (brid) ha&nbsp;lo&nbsp;stesso nome dei rispettivi file *.mp3&nbsp;e *.txt e&nbsp;varia nella parte numerica assieme a&nbsp;essi. Il&nbsp;fatto &egrave;&nbsp;che intendo utilizzare l&rsquo;identificatore non solo per &laquo;ripescare&raquo; le&nbsp;informazioni necessarie dalla tabella, ma&nbsp;anche per generare automaticamente i&nbsp;link dei file audio e&nbsp;di&nbsp;testo.<\/p>\n<p><a name=\"art33spar5\"><\/a><b>5.&nbsp;Mostriamo l&rsquo;elenco dei file caricati nella directory<\/b><br \/>\nIn&nbsp;realt&agrave;, una delle mie idee folli iniziali era quella di&nbsp;ottenere l&rsquo;elenco dei file caricati nella directory con la&nbsp;funzione PHP scandir(), estraendo in&nbsp;contemporanea i&nbsp;metadati direttamente dai tag ID3 dei file mp3. Il&nbsp;codice che mi&nbsp;era venuto funzionava visualizzando il&nbsp;risultato atteso, era molto semplice, breve e&nbsp;quasi universale: esattamente come quei codici che ritengo ideali. La&nbsp;pagina web con il&nbsp;risultato visualizzato, per&ograve;, ci&nbsp;impiegava una infinit&agrave; a&nbsp;caricarsi&#8230; In&nbsp;presenza di&nbsp;particolarmente tanti mp3&nbsp;da analizzare provocava, addirittura, il&nbsp;blocco del computer. Di&nbsp;conseguenza, avevo compreso tutta la&nbsp;profondit&agrave; della mia stupidit&agrave; ed&nbsp;ero tornato alla idea di&nbsp;progettare un&nbsp;file xml.<br \/>\nCome avete gi&agrave; avuto modo di&nbsp;vedere sopra, nel file xml non sono indicati non solo i&nbsp;nomi dei file, ma&nbsp;nemmeno i&nbsp;percorsi assoluti che portino verso di&nbsp;essi. Questa scelta &egrave;&nbsp;stata adottata per raggiungere due obiettivi. In&nbsp;primo luogo, volevo fare un&nbsp;file xml pi&ugrave; leggero possibile. In&nbsp;secondo luogo, nessuno pu&ograve; essere sicuro al&nbsp;100% di&nbsp;riuscire a&nbsp;mantenere gli stessi URL per tutta la&nbsp;vita. Di&nbsp;conseguenza, al&nbsp;fine di&nbsp;evitare di&nbsp;dover, in&nbsp;un&nbsp;giorno futuro, riscrivere manualmente gli indirizzi (oppure dimenticare di&nbsp;farlo nel momento critico), ho&nbsp;deciso di&nbsp;costruire quegli indirizzi in&nbsp;una modalit&agrave; pi&ugrave; automatizzata possibile. Per iniziare, ho&nbsp;dovuto scrivere questo:<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 2; notranslate\" title=\"listing 2\">\n$protokol = (!empty($_SERVER&#x5B;'HTTPS']) &amp;&amp; 'off' !== strtolower($_SERVER&#x5B;'HTTPS'])?&quot;https:\/\/&quot;:&quot;http:\/\/&quot;);\n$domen = $_SERVER&#x5B;SERVER_NAME];\n$koren = $protokol.$domen;\n$dir = 'archivio\/audio'; \/\/ la directory dei file mp3\n$images = $koren.'\/images\/archivimp3'; \/\/ il percorso delle immagini utilizzate\n$url = ((!empty($_SERVER&#x5B;'HTTPS'])) ? 'https' : 'http') . ':\/\/' . $_SERVER&#x5B;'HTTP_HOST'] . $_SERVER&#x5B;'REQUEST_URI']; \/\/ determiniamo url della pagina corrente\n<\/pre>\n<p>\nAvrei preferito un&nbsp;codice pi&ugrave; breve, ma&nbsp;non l&rsquo;ho ancora inventato.<br \/>\nSolo a&nbsp;questo punto si&nbsp;pu&ograve; leggere il&nbsp;file xml (la&nbsp;cui struttura &egrave;&nbsp;gi&agrave; stata mostrata sopra), scoprire l&rsquo;identificatore di&nbsp;ogni file audio e&nbsp;visualizzare sulla pagina dell&rsquo;archivio, per ogni file audio dell&rsquo;archivio, un&nbsp;rettangolo-contenitore con tutte le&nbsp;informazioni utili. Notate che nel link del file mp3&nbsp;ci metto&nbsp;&ndash; proprio come avevo pianificato&nbsp;&ndash; il&nbsp;nome dell&rsquo;identificatore preso dal file xml (si&nbsp;vedano le&nbsp;righe&nbsp;4, 7 e&nbsp;17 del codice):<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 3; notranslate\" title=\"listing 3\">\n$xml = simplexml_load_file(&quot;$dir\/brani.xml&quot;);\n$i = 0; \/\/ questo valore serve per la lettura corretta del file xml\nforeach ($xml as $puntata) {\n$path = $xml-&gt;puntata&#x5B;$i]&#x5B;'brid'];\n$i++; \/\/ contiamo le puntate presenti nell'archivio\necho &quot;&lt;div class=singlevypusk&gt;&lt;div class=singlevypuskimg&gt;&quot;; \/\/ il div della puntata e il div della immagine\necho &quot;&lt;a href='$koren\/$dir\/$path.mp3'&gt;&quot;; \/\/ creaiamo il link del file mp3 (per il download)\necho &quot;&lt;img src='$images\/radio.jpg' title='Scaricare il file mp3' \/&gt;&quot;; \/\/ quella immagine grande che troviamo in ogni rettangolo-contenitore\necho &quot;&lt;\/a&gt;&lt;\/div&gt;&quot;; \/\/ chiudiamo il link del file mp3\necho &quot;&lt;div class=singlevypusktxt&gt;&quot;;\necho '&lt;b&gt;L&amp;rsquo;argomento:&lt;\/b&gt; '.$puntata-&gt;topic.'&lt;br \/&gt;'; \/\/ l'argomento della puntata\necho '&lt;b&gt;I conduttori:&lt;\/b&gt; '.$puntata-&gt;conduttori.'&lt;br \/&gt;'; \/\/ i nome dei conduttori\necho '&lt;b&gt;La data della trasmissione:&lt;\/b&gt; '.$puntata-&gt;data.'&lt;br \/&gt;'; \/\/ la data della trasmissione in onda\necho '&lt;b&gt;La durata:&lt;\/b&gt; '.$puntata-&gt;durata.'&lt;br \/&gt;'; \/\/ la durata della puntata\necho '&lt;\/div&gt;';\necho '&lt;div class=singlevypuskpic&gt;';\necho &quot;&lt;a href='$koren\/$dir\/$path.mp3'&gt;&lt;img src='$images\/downloadaudio.png' title='Scaricare il file mp3' \/&gt;&lt;\/a&gt;&lt;br \/&gt;&quot;; \/\/ creaiamo il link del file mp3 (per il download)\necho &quot;&lt;a href='&quot;.$url.&quot;sluhaivsjotak?search=$path'&gt;&lt;img src='$images\/listenaudio.png' title='Ascoltare sul sito' \/&gt;&lt;\/a&gt;&lt;br \/&gt;&quot;; \/\/ creaiamo il link del player audio\necho &quot;&lt;a href='&quot;.$url.&quot;sluhaivsjotak?search=$path'&gt;&lt;img src='$images\/readtext.jpg' title='Leggere la trascrizione' \/&gt;&lt;\/a&gt;&quot;; \/\/ creaiamo il link della trascrizione\necho &quot;&lt;\/div&gt;&lt;\/div&gt;&quot;; \/\/ chiudiamo il rettangolo-contenitore\n}\n<\/pre>\n<p>\nIl&nbsp;risultato che il&nbsp;visitatore vedr&agrave; sullo schermo &egrave;&nbsp;una serie di&nbsp;questi blocchi (rettangoli-contenitori) generati automaticamente dal codice:<br \/>\n<img decoding=\"async\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art33mp3archive01.jpg\" title=\"per ogni puntata uscir&agrave; un rettangolo come questo\" border=\"0\"><br \/>\nLa&nbsp;variabile i&nbsp;che avete visto nel codice serve solo per contare i&nbsp;file mp3&nbsp;e visualizzare la&nbsp;loro quantit&agrave; totale:<br \/>\n<img decoding=\"async\" src=\"https:\/\/eugigufo.net\/images\/inerario\/art33mp3archive02.jpg\" title=\"la quantit&agrave; totale dei file (quindi delle puntate)\" border=\"0\"><\/p>\n<p><a name=\"art33spar6\"><\/a><b>6.&nbsp;Creiamo i&nbsp;link al&nbsp;player audio e&nbsp;ai&nbsp;testi<\/b><br \/>\nNella parte destra di&nbsp;ogni rettangolo (si&nbsp;veda l&rsquo;immagine sopra) sono presenti tre pittogrammi, il&nbsp;cui significato &egrave;&nbsp;secondo me&nbsp;chiaro a&nbsp;tutti (o&nbsp;no?). Renderli funzionanti &egrave;&nbsp;facilissimo.<br \/>\nCome avete gi&agrave; visto nel listing&nbsp;N3, il&nbsp;link per il&nbsp;download di&nbsp;ogni singolo brano viene generato sempre con le&nbsp;stesse variabili (compresa la&nbsp;variabile path che contiene l&rsquo;identificatore preso dal file xml):<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 4; notranslate\" title=\"listing 4\">\necho &quot;&lt;a href='$koren\/$dir\/$path.mp3'&gt;&lt;img src='$images\/downloadaudio.png' title='Scaricare il file mp3' \/&gt;&lt;\/a&gt;&lt;br \/&gt;&quot;; \/\/ creaiamo il link del file mp3 (per il download)\n<\/pre>\n<p>\nCi&nbsp;resta creare i&nbsp;link che portino al&nbsp;player audio e&nbsp;al&nbsp;testo della trascrizione. Penso che per tutti gli utenti dell&rsquo;archivio sia pi&ugrave; comodo trovare quei materiali&nbsp;&ndash; il&nbsp;player e&nbsp;il&nbsp;relativo testo&nbsp;&ndash; su&nbsp;una pagina unica: proprio (e&nbsp;solo) per questo motivo i&nbsp;due link sono identici (anche essi vengono generati con l&rsquo;aiuto delle variabili che conoscete gi&agrave;):<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 5; notranslate\" title=\"listing 5\">\necho &quot;&lt;a href='&quot;.$url.&quot;sluhaivsjotak?search=$path'&gt;&lt;img src='$images\/listenaudio.png' title='Ascoltare sul sito' \/&gt;&lt;\/a&gt;&lt;br \/&gt;&quot;; \/\/ creaiamo il link del player audio\necho &quot;&lt;a href='&quot;.$url.&quot;sluhaivsjotak?search=$path'&gt;&lt;img src='$images\/readtext.jpg' title='Leggere la trascrizione' \/&gt;&lt;\/a&gt;&quot;; \/\/ creaiamo il link della trascrizione\n<\/pre>\n<p>\nCome potete immaginare, una persona media non ha&nbsp;abbastanza tempo e&nbsp;voglia per creare manualmente decine o&nbsp;centinaia di&nbsp;pagine, una per ogni singola coppia audio-testo. &Egrave;&nbsp;molto pi&ugrave; facile e&nbsp;comodo crearne una sola: si&nbsp;trover&agrave; all&rsquo;indirizzo https:\/\/sito.it\/archivio\/audio\/ascoltaaudio e&nbsp;in&nbsp;base alla richiesta GET (quella che inizia dai punti interrogativi nei link del listing appena visto) avr&agrave; i&nbsp;contenuti che corrispondono, in&nbsp;sostanza, alla variabile che ha&nbsp;lo&nbsp;stesso nome dell&rsquo;identificatore. Non so&nbsp;se&nbsp;vi&nbsp;sia chiaro il&nbsp;concetto. Se&nbsp;non lo&nbsp;capite subito, provate a&nbsp;rileggere&#8230;<br \/>\nE&nbsp;poi andiamo avanti.<br \/>\nCome ho&nbsp;gi&agrave; scritto pi&ugrave; in&nbsp;alto, il&nbsp;nome dell&rsquo;identificatore di&nbsp;ogni porzione delle informazioni nella tabella xml &egrave;&nbsp;uguale al&nbsp;nome del rispettivo file mp3. L&rsquo;ultimo elemento del link generato con l&rsquo;aiuto della variabile path &laquo;si&nbsp;chiama&raquo; come l&rsquo;identificatore. Di&nbsp;conseguenza, sulla pagina del player e&nbsp;del testo dovremo solamente aprire di&nbsp;nuovo il&nbsp;file xml e&nbsp;trovare le&nbsp;informazioni con l&rsquo;identificatore che &laquo;fa&nbsp;parte&raquo; del link.<br \/>\nMa&nbsp;prima di&nbsp;procedere vediamo bene il&nbsp;traguardo raggiunto. Il&nbsp;codice completo della pagina sulla quale vengono visualizzati la&nbsp;lista dei file audio e&nbsp;i&nbsp;rispettivi link al&nbsp;player e&nbsp;al&nbsp;testo &egrave;&nbsp;dunque questo:<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 6; notranslate\" title=\"listing 6\">\n$protokol = (!empty($_SERVER&#x5B;'HTTPS']) &amp;&amp; 'off' !== strtolower($_SERVER&#x5B;'HTTPS'])?&quot;https:\/\/&quot;:&quot;http:\/\/&quot;);\n$domen = $_SERVER&#x5B;SERVER_NAME];\n$koren = $protokol.$domen;\n$dir = 'archivio\/audio'; \/\/ la directory dei file mp3\n$images = $koren.'\/images\/archivimp3'; \/\/ il percorso delle immagini utilizzate\n$xml = simplexml_load_file(&quot;$dir\/brani.xml&quot;);\n$i = 0; \/\/ questo valore serve per la lettura corretta del file xml\nforeach ($xml as $puntata) {\n$path = $xml-&gt;puntata&#x5B;$i]&#x5B;'brid'];\n$i++; \/\/ contiamo le puntate presenti nell'archivio\necho &quot;&lt;div class=singlevypusk&gt;&lt;div class=singlevypuskimg&gt;&quot;; \/\/ il div della puntata e il div della immagine\necho &quot;&lt;a href='$koren\/$dir\/$path.mp3'&gt;&quot;; \/\/ creaiamo il link del file mp3 (per il download)\necho &quot;&lt;img src='$images\/radio.jpg' title='Scaricare il file mp3' \/&gt;&quot;; \/\/ quella immagine grande che troviamo in ogni rettangolo-contenitore\necho &quot;&lt;\/a&gt;&lt;\/div&gt;&quot;; \/\/ chiudiamo il link del file mp3\necho &quot;&lt;div class=singlevypusktxt&gt;&quot;;\necho '&lt;b&gt;L&amp;rsquo;argomento:&lt;\/b&gt; '.$puntata-&gt;topic.'&lt;br \/&gt;'; \/\/ l'argomento della puntata\necho '&lt;b&gt;I conduttori:&lt;\/b&gt; '.$puntata-&gt;conduttori.'&lt;br \/&gt;'; \/\/ i nome dei conduttori\necho '&lt;b&gt;La data della trasmissione:&lt;\/b&gt; '.$puntata-&gt;data.'&lt;br \/&gt;'; \/\/ la data della trasmissione in onda\necho '&lt;b&gt;La durata:&lt;\/b&gt; '.$puntata-&gt;durata.'&lt;br \/&gt;'; \/\/ la durata della puntata\necho '&lt;\/div&gt;';\necho '&lt;div class=singlevypuskpic&gt;';\necho &quot;&lt;a href='$koren\/$dir\/$path.mp3'&gt;&lt;img src='$images\/downloadaudio.png' title='Scaricare il file mp3' \/&gt;&lt;\/a&gt;&lt;br \/&gt;&quot;; \/\/ creaiamo il link del file mp3 (per il download)\necho &quot;&lt;a href='&quot;.$url.&quot;sluhaivsjotak?search=$path'&gt;&lt;img src='$images\/listenaudio.png' title='Ascoltare sul sito' \/&gt;&lt;\/a&gt;&lt;br \/&gt;&quot;; \/\/ creaiamo il link del player audio\necho &quot;&lt;a href='&quot;.$url.&quot;sluhaivsjotak?search=$path'&gt;&lt;img src='$images\/readtext.jpg' title='Leggere la trascrizione' \/&gt;&lt;\/a&gt;&quot;; \/\/ creaiamo il link della trascrizione\necho &quot;&lt;\/div&gt;&lt;\/div&gt;&quot;; \/\/ chiudiamo il rettangolo-contenitore\n}\necho &quot;&lt;div style=\\&quot;clear: both\\&quot;&gt;La quantit&amp;agrave; dei file audio nell&amp;rsquo;archivio: $i&lt;\/div&gt;&quot;;\n<\/pre>\n<p>\nOra che abbiamo finito con la&nbsp;visualizzazione dell&rsquo;elenco, passiamo alla creazione della seconda pagina: quella dedicata al&nbsp;singolo file audio e&nbsp;al&nbsp;relativo testo.<\/p>\n<p><a name=\"art33spar7\"><\/a><b>7.&nbsp;Creiamo la&nbsp;pagina con il&nbsp;player e&nbsp;i&nbsp;testi<\/b><br \/>\nLa&nbsp;prima parte del codice di&nbsp;questa seconda pagina dovrebbe esservi gi&agrave; chiara: automatizziamo la&nbsp;costruzione dell&rsquo;indirizzo del file, leggiamo la&nbsp;richiesta GET e&nbsp;inseriamo il&nbsp;codice HTML del player con l&rsquo;indirizzo del file mp3 corrispondente alla richiesta.<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 7; notranslate\" title=\"listing 7\">\n$protokol = (!empty($_SERVER&#x5B;'HTTPS']) &amp;&amp; 'off' !== strtolower($_SERVER&#x5B;'HTTPS'])?&quot;https:\/\/&quot;:&quot;http:\/\/&quot;);\n$domen = $_SERVER&#x5B;SERVER_NAME];\n$koren = $protokol.$domen;\n$dir = 'archivio\/audio'; \/\/ la directory dei file mp3\n$fileinfo = $_GET&#x5B;'search'];\n$fileinfo = htmlspecialchars($fileinfo);\necho &quot;&lt;center&gt;&lt;audio controls preload='auto' src='$koren\/$dir\/$fileinfo.mp3' type='audio\/mp3'&gt;&lt;\/audio&gt;&lt;\/center&gt;&lt;br \/&gt;&quot;;\n<\/pre>\n<p>\nCarichiamo il&nbsp;file xml:<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 8; notranslate\" title=\"listing 8\">\n$xml = simplexml_load_file(&quot;$dir\/brani.xml&quot;);\n<\/pre>\n<p>\nDopo di&nbsp;che dobbiamo vedere gli elementi del file a&nbsp;partire dal primo (il&nbsp;quale, in&nbsp;realt&agrave;, &egrave;&nbsp;numerato nella logica del xml come&nbsp;0) alla ricerca di&nbsp;quello avente l&rsquo;identificatore che corrisponde al&nbsp;link&nbsp;\/ URL del file audio. &Egrave;&nbsp;per questo che ho&nbsp;dovuto scrivere il&nbsp;seguente codice, senza dimenticare di&nbsp;precisare che l&rsquo;analisi degli elementi xml deve necessariamente partire dal primo (i=0).<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 9; notranslate\" title=\"listing 9\">\n$i = 0;\nforeach ($xml as $puntata) {\n$brid = $xml-&gt;puntata&#x5B;$i]&#x5B;'brid'];\n$i++;\nif ($brid == $fileinfo)\n{\necho '&lt;div class=sluhainfo&gt;&lt;h3&gt;'.$puntata-&gt;topic.'&lt;\/h3&gt;&lt;br \/&gt;La data della trasmissione: '.$puntata-&gt;data.'.&lt;br \/&gt;I conduttori: '.$puntata-&gt;conduttori.'.&lt;\/div&gt;';\n$tracklist = $dir.'\/'.$fileinfo.'.txt'; \/\/ il file con la trascrizione\nif (file_exists($tracklist)) {echo '&lt;div class=sluhaitxt&gt;'.file_get_contents($tracklist).'&lt;\/div&gt;';} \/\/ mostriamo il contenuto del file txt\nelse {echo 'La trascrizione non &amp;egrave; ancora pronta.&lt;br \/&gt;&lt;br \/&gt;';}\necho &quot;&lt;div class=sluhainfo&gt;&lt;a href='$koren\/$dir\/$fileinfo.mp3' &gt;Potete inoltre scaricare il file mp3.&lt;\/a&gt;.&lt;\/div&gt;&quot;;\n}\n}\n<\/pre>\n<p>\nOra, se&nbsp;qualcuno volesse vedere la&nbsp;soluzione nel suo complesso, riporto il&nbsp;codice completo della pagina con il&nbsp;player e&nbsp;il&nbsp;testo del file scelto dal visitatore del nostro archivio.<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 10; notranslate\" title=\"listing 10\">\n$protokol = (!empty($_SERVER&#x5B;'HTTPS']) &amp;&amp; 'off' !== strtolower($_SERVER&#x5B;'HTTPS'])?&quot;https:\/\/&quot;:&quot;http:\/\/&quot;);\n$domen = $_SERVER&#x5B;SERVER_NAME];\n$koren = $protokol.$domen;\n$dir = 'archivio\/audio'; \/\/ la directory dei file mp3\n$fileinfo = $_GET&#x5B;'search'];\n$fileinfo = htmlspecialchars($fileinfo);\necho &quot;&lt;center&gt;&lt;audio controls preload='auto' src='$koren\/$dir\/$fileinfo.mp3' type='audio\/mp3'&gt;&lt;\/audio&gt;&lt;\/center&gt;&lt;br \/&gt;&quot;;\n$xml = simplexml_load_file(&quot;$dir\/brani.xml&quot;);\n$i = 0;\nforeach ($xml as $puntata) {\n$brid = $xml-&gt;puntata&#x5B;$i]&#x5B;'brid'];\n$i++;\nif ($brid == $fileinfo)\n{\necho '&lt;div class=sluhainfo&gt;&lt;h3&gt;'.$puntata-&gt;topic.'&lt;\/h3&gt;&lt;br \/&gt;La data della trasmissione: '.$puntata-&gt;data.'.&lt;br \/&gt;I conduttori: '.$puntata-&gt;conduttori.'.&lt;\/div&gt;';\n$tracklist = $dir.'\/'.$fileinfo.'.txt'; \/\/ il file con la trascrizione\nif (file_exists($tracklist)) {echo '&lt;div class=sluhaitxt&gt;'.file_get_contents($tracklist).'&lt;\/div&gt;';} \/\/ mostriamo il contenuto del file txt\nelse {echo 'La trascrizione non &amp;egrave; ancora pronta.&lt;br \/&gt;&lt;br \/&gt;';}\necho &quot;&lt;div class=sluhainfo&gt;&lt;a href='$koren\/$dir\/$fileinfo.mp3' &gt;Potete inoltre scaricare il file mp3.&lt;\/a&gt;.&lt;\/div&gt;&quot;;\n}\n}\n<\/pre>\n<p>\nGrazie alla organizzazione dell&rsquo;archivio appena descritta, l&rsquo;ipotetica aggiunta dei nuovi file audio (qualora dovessero essere creati o&nbsp;trovati), ci&nbsp;richieder&agrave; solo due azioni manuali: caricare i&nbsp;nuovi file (mp3&nbsp;e txt) nella nostra directory e&nbsp;aggiungere le&nbsp;relative informazioni nel file xml.<br \/>\nInfine, il&nbsp;file CSS necessario per la&nbsp;pubblicazione del nostro archivio audio non ha&nbsp;alcunch&eacute; di&nbsp;particolare: il&nbsp;perfezionamento dell&rsquo;aspetto grafico di&nbsp;tutti gli elementi visivi creati nel corso di&nbsp;questo lavoro &egrave;&nbsp;un&nbsp;compito puramente manualistico. Di&nbsp;conseguenza, non tento di&nbsp;caricare l&rsquo;articolo di&nbsp;informazioni che avete gi&agrave; in&nbsp;testa.<\/p>\n<p><a name=\"art33spar8\"><\/a><b>8.&nbsp;Cosa possiamo aggiungere<\/b><br \/>\nVolendo possiamo aggiungere alcune funzionalit&agrave; potenzialmente apprezzabili al&nbsp;nostro archivio pubblicato. Per esempio, potremmo aggiungere il&nbsp;rss-feed per i&nbsp;file audio (creando un&nbsp;altro file xml particolare e&nbsp;alcuni script in&nbsp;linguaggio Go). Oppure, potremmo aggiungere la&nbsp;possibilit&agrave; di&nbsp;scaricare i&nbsp;testi direttamente in&nbsp;pdf (una cosa realizzabile anche in&nbsp;PHP). Ma&nbsp;questi sono degli argomenti troppo grandi per essere aggiunti al&nbsp;presente articolo.<br \/>\nOra mi&nbsp;limito a&nbsp;dire che ogni archivio deve essere comodo da&nbsp;consultare. Questo significa, per esempio, che un&nbsp;archivio fatto bene deve avere anche uno strumento di&nbsp;ricerca interna. Quest&rsquo;ultima &egrave;&nbsp;facile da&nbsp;aggiungere all&rsquo;esempio trattato nel presente articolo.<br \/>\nSupponiamo di&nbsp;voler permettere di&nbsp;effettuare la&nbsp;ricerca tra i&nbsp;titoli dei file audio dell&rsquo;archivio. Il&nbsp;meccanismo di&nbsp;ricerca pi&ugrave; semplice che potremmo inventare funzioner&agrave; in&nbsp;due situazioni: se&nbsp;il&nbsp;visitatore ha&nbsp;inserito il&nbsp;titolo esatto (ma&nbsp;non &egrave;&nbsp;detto che se&nbsp;lo&nbsp;ricordi) oppure se&nbsp;ha&nbsp;inserito qualche parola facente parte del titolo (in&nbsp;pratica, una o&nbsp;pi&ugrave; parola\/e chiave). Quindi controlliamo che il&nbsp;campo di&nbsp;ricerca non sia vuoto e&nbsp;poi andiamo a&nbsp;confrontare il&nbsp;suo contenuto con i&nbsp;campi dei titoli nel file xml. E&nbsp;poi visualizziamo la&nbsp;lista di&nbsp;tutti i&nbsp;risultati linkati attraverso un&nbsp;ciclo foreach:<\/p>\n<pre class=\"brush: php; collapse: false; title: listing 11; notranslate\" title=\"listing 11\">\nif (!isset($_POST&#x5B;'searcharg'])) echo &quot;&quot;;\nelseif ($_POST&#x5B;'searcharg']) $searcharg = $_POST&#x5B;'searcharg']; \/\/ creiamo la variabile per il testo della ricerca\n?&gt;\n&lt;div style=&quot;width: 100%; clear: both&quot;&gt;\n&lt;form method=&quot;post&quot;&gt;&lt;input type=&quot;search&quot; class=&quot;searchinputecho&quot; name=&quot;searcharg&quot; id=&quot;searcharg&quot; value=&quot;&lt;?=$searcharg?&gt;&quot; placeholder=&quot;cosa cerchi?&quot; required&gt; &lt;input type=&quot;submit&quot; value=&quot;  Cerca  &quot; class=&quot;searchbuttecho&quot;&gt;\n&lt;?php\nif(!isset($_POST&#x5B;'searcharg'])) echo &quot;&quot;;\nelseif ($_POST&#x5B;'searcharg'])\n{\n$data = 'https:\/\/sito.it\/archivio\/audio\/brani.xml';\n$xml = new SimpleXMLElement(file_get_contents($data));\n$result = $xml-&gt;xpath('puntata\/topic');\necho '&lt;br&gt;I risultati della ricerca:&lt;br&gt;';\n$p = 0;\n$x = 0;\nforeach ($result as $node)\n{\n     if (mb_stripos($node, $searcharg) === false ) echo &quot;&quot;; else { $brid = $xml-&gt;puntata&#x5B;$x]&#x5B;'brid']; echo '&lt;br&gt;&amp;ndash;&amp;nbsp;&lt;a href=https:\/\/sito.it\/archivio\/audio\/ascoltaaudio?search='.$brid.'&gt;'.$node.'&lt;\/a&gt;&lt;br&gt;'; $p++; }\n     $x++;\n}\nif ($p == 0) { echo &quot;&lt;br&gt;la Sua ricerca non ha prodotto risultati...&lt;br&gt;&quot;; }\necho &quot;&lt;br&gt;&lt;i&gt;Qualora tra i risultati della ricerca dovesse mancare una puntata che secondo voi \u00e8 sicuramente esistita, provate a cercare una (o pi\u00f9) parola chiave potenzialmente presente nel suo titolo, oppure consultate la lista completa riportata di seguito.&lt;\/i&gt;&lt;br&gt;&quot;;\n}\n?&gt;\n&lt;\/form&gt;&lt;\/div&gt;\n<\/pre>\n<p>\n&Egrave;&nbsp;un&nbsp;meccanismo talmente semplice che non so&nbsp;nemmeno in&nbsp;quale sua parte debba essere spiegato.<\/p>\n<p><a name=\"art33spar9\"><\/a><b>9.&nbsp;Un&nbsp;esempio funzionante del metodo descritto<\/b><br \/>\nA&nbsp;questo punto non mi&nbsp;resta altro che completare il&nbsp;presente paragrafo di&nbsp;Inerario con un&nbsp;esempio funzionante di&nbsp;quanto descritto. In&nbsp;qualit&agrave; di&nbsp;tale esempio vi&nbsp;propongo l&rsquo;<a href=\"https:\/\/eugigufo.net\/it\/inerario\/paragrafo33\/esempiopar33\/\">archivio delle trasmissioni radiofoniche di&nbsp;Pyotr Mamonov<\/a> dedicate alla sua musica preferita.<br \/>\nBene, ora siete un&nbsp;po&rsquo; pi&ugrave; preparati alla pubblicazione degli archivi audio online. Alle persone che volessero utilizzare lo&nbsp;stesso metodo per la&nbsp;pubblicazione di&nbsp;un&nbsp;archivio dei file video &egrave;&nbsp;sufficiente fare appena due cambiamenti: sostituire l&rsquo;estensione .mp3 con quella dei video&nbsp;e, nel codice della seconda pagina, il&nbsp;player audio con il&nbsp;player video.<br \/>\nSpero che la&nbsp;mia soluzione sia comprensibile a&nbsp;tutti e&nbsp;utile almeno ad&nbsp;alcuni!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Il paragrafo dell\u2019\u201cInerario\u201d dedicato a uno dei modi possibili di pubblicare gli archivi audio online. Il metodo proposto pu\u00f2 essere applicato facilmente anche ai file video.<br \/>\nQuesto paragrafo \u00e8 stato pensato per gli sviluppatori che non hanno mai affrontato un compito del genere oppure stanno cercando una soluzione alternativa a quella gi\u00e0 concepita. Inoltre, il paragrafo sar\u00e0 utile per i proprietari dei vari archivi multimediali e dei siti web.<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":452,"menu_order":33,"comment_status":"open","ping_status":"closed","template":"inerarioart.php","meta":{"footnotes":""},"class_list":["post-5589","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/5589","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/comments?post=5589"}],"version-history":[{"count":0,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/5589\/revisions"}],"up":[{"embeddable":true,"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/pages\/452"}],"wp:attachment":[{"href":"https:\/\/eugigufo.net\/it\/wp-json\/wp\/v2\/media?parent=5589"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}