Eseguire un file audio mediante il codice html e mediante il codice javascript

Da Gambas-it.org - Wikipedia.

Un file audio potrà essere eseguito sia con il codice html sia con il codice javascript all'interno di un oggetto che supporta tali codici.


Esecuzione mediante il solo codice HTML

Con il codice HTML è possibile eseguire un file audio cliccando su un testo collegato al percorso del file audio, utilizzando il Tag <A HREF="...> dell'html, posto in un oggetto grafico di Gambas capace di supportarlo.

La sintassi generale del tag "A Href" è:

"<A Href=/percorso/del/file/audio>testo qualsiasi</a>"

In particolare il file sarà lanciato cliccando sul testo inserito; e sarà aperto dal programma prescelto dall'utente per il tipo di file audio.

Esempio usando la risorsa Gambas Message:

Public Sub Button1_Click()

  Message.Info("<A HREF=/percorso/del/file/audio>Clicca qui per ascoltare il file audio.</a>")

End


Esecuzione mediante il solo codice HTML 5 e l'oggetto WebView

E' possibile eseguire con questa modalità i file audio di formato: wav, mp3, ogg e wma.

Uso dell'Oggetto WebView con il supporto di un file html esterno

E' possibile, abilitando il componente gb.qt4.webkit o gb.qt5.webkit utilizzare l'oggetto WebView ed il protocollo HTML 5che dovrà essere scritto all'interno di un file html, distinto dal codice dell'applicazione Gambas.
Tale file html dovrà essere richiamato dalla proprietà .Url del predetto oggetto WebView, come nell'esempio che segue:

Public Sub Button1_Click()
  
' Abilitiamo i "plugin" nelle pagine WEB:'
  WebSettings[WebSettings.PluginsEnabled] = True

  WebView1.Url = "/percorso/del/file.html"

End

Nel codice Gambas bisognerà avere cura - come sopra mostrato - di attivare i plugin nelle pagine WEB.


Esecuzione di file audio da supporti di memoria

Per l'esecuzione di file audio richiamati da supporti di memoria è possibile l'uso di tre elementi del protocollo html: "Audio Controls" e "Embed".

Uso del TAG AUDIO

Il file html presenterà almeno il seguente codice:

<HTML>

<AUDIO controls>
  <source src="/percorso/del/file/audio" type="audio/estensione_del_file_audio">
</audio>

</html>

Esempio:

<HTML>

<audio controls>
 <source src="/percorso/del/file/audio" type="audio/mp3">
</audio>

</html>

</html>

Ma anche più semplicemente:

<HTML>

<AUDIO controls
  src="/percorso/del/file">
</audio>

</html>

Per far partire automaticamente l'esecuzione del file audio si dovrà aggiungere il seguente parametro autoplay ai controlli audio:

 <HTML>

<audio controls=controls autoplay>
  <source src="/percorso/del/file/audio" type="audio/estensione_del_file_audio">
</audio>

</html>

oppure più semplicemente:

 <HTML>

<audio controls=controls autoplay
  src="/percorso/del/file/audio">
</audio>

</html>

Uso del TAG EMBED

Si potrà utilizzare nel file html l'elemento EMBED:

<HTML><HEAD>
  <EMBED src="/percorso/del/file/audio" type="audio/estensione_del_file_audio" width="640" height="480" hidden=false autoplay="false"></embed>
  </head>
</html>

Nell'attributo type va specificato anche il tipo di file che sarà eseguito.

Se si intende far partire automaticamente il brano audio, è necessario porre l'attributo autoplay a true.


Esecuzione di un file audio da una pagina WEB

Per ascoltare via internet un file audio presente in una pagina WEB si potranno utilizzare nel file html esterno tre elementi del protocollo html: "Audio Controls", "Iframe" e "Embed"

Uso dell'elemento Audio Controls

<HTML>

<AUDIO Controls>
  <source src="http://www.indirizzo/web/del/file/audio" type="audio/estensione_del_file_audio">
</audio>

</html>

oppure ovviamente:

<HTML>

<AUDIO controls
  src="http://www.indirizzo/web/del/file/audio">
</audio>

</html>

Uso dell'elemento Iframe

<HTML><HEAD>
  <IFRAME src="http://www.indirizzo/web/del/file/audio" type="audio/estensione_del_file_audio" width="640" height="480"/>
  </head>
</html>

Uso dell'elemento Embed

<HTML><HEAD>
  <EMBED src="http://www.indirizzo/web/del/file/audio" type="audio/estensione_del_file_audio" width="640" height="480" hidden=false autoplay="false"/>
  </head>
</html>


Uso dell'Oggetto WebView senza supporto di un file html esterno

In questo caso la riga di comando scritta in html sarà assegnata direttamente alla proprietà .HTML dell'oggetto WebView.

Esecuzione di un file da un indirizzo web

Per eseguire un file audio posto in un indirizzo web, è possibile utilizzare due elementi html: "Audio Controls" e "Iframe".

Uso del Tag <Iframe>

Public Sub Button1_Click()

 Dim wv As WebView

  With wv = New WebView(Me)
    .X = 50
    .Y = 100
    .W = 340
    .H = 170
    .HTML = "<IFRAME src=http://indirizzo/del/collegamento/web/del/file/audio type=audio/estensione_del_file_audio width=640 height=480></iframe>"
  End With

End


Uso del Tag <Audio>

Public Sub Button1_Click()

 Dim wv As WebView

  With wv = New WebView(Me)
    .X = 50
    .Y = 100
    .W = 340
    .H = 170
    .HTML = "<AUDIO Controls src=http://indirizzo/del/collegamento/web/del/file/audio type=audio/estensione_del_file_audio width=640 height=480></audio>"
  End With

End


Esecuzione mediante il codice Javascript

Con il codice Javascript la procedura è più complessa: si dovrà innanzitutto utilizzare l'oggetto WebView che caricherà un apposito file con estensione html, nel quale sarà scritto il necessario codice Javascript. Si dovrà, pertanto, attivare il componente gb.qt4.webkit.

Mostreremo di seguito un semplice esempio: |1|

La parte del codice Gambas può essere la seguente:

Public Sub Button1_Click()

' Abilitiamo innanzitutto i "plugin" nelle pagine WEB:
  WebSettings[WebSettings.PluginsEnabled] = True

' Carichiamo il file .html contenente il codice "javascript" necessario:
   WebView1.Url = "percorso_del_file.html"

End

Il file .html, a sua volta, conterrà almeno il seguente codice:

<HTML>

<HEAD>


<SCRIPT language="JavaScript" type="text/javascript">

<!-- Funzione per avviare l'esecuzione:-->

  document.write('<embed src="percorso_del_file_audio" ' +

<!-- poniamo il "loop" a zero per far eseguire soltanto una sola volta il file:-->

    'type="audio/wav" loop=0 autostart=true hidden=true name="Audio" mastersound></embed>');

</script>


</head>

</html>

Ovviamente andrà specificato il tipo di file audio nel tag: Type="audio/....."


Uso di JavaScript e di un file esterno .js

In quest'altro esempio nel file HTML di supporto sarà utilizzata una variabile contenente il percorso del file audio da eseguire:

<HTML>
<SCRIPT>var fileSonoro = "/percorso/del/file/audio";</script>
<SCRIPT type="text/javascript" src="/percorso/del/file.js"></script>
</html>

e nel file .js vi sarà il seguente codice:

document.write('<embed src=' + fileSonoro + ' type="audio/estensione_del_file_audio" loop=0 autostart=true hidden=true name=jsaudio mastersound></embed>');


Esempio pratico

Mostriamo un esempio pratico, nel quale sarà possibile eseguire diversi formati di file audio:

Private wv As WebView


Public Sub Form_Open()
  
  WebSettings[WebSettings.PluginsEnabled] = True
   
  wv = New WebView(Me)
   
  File.Save("/tmp/stop.html", "<HTML>\n" &
            "<SCRIPT type=\"text/javascript\">document.write('<embed src=\"\">');</script>\n</html>")
  
  File.Save("/tmp/fileJs.js", "document.write('<embed src=' + fileSonoro + ' type=\"audio/estensione_del_file_audio\" loop=0 autostart=true " &
            "hidden=true name=jsaudio mastersound></embed>');")
             
  File.Save("/tmp/esegue.html", "<HTML>\n<SCRIPT>var fileSonoro = \"/percorso/del/file/audio\";</script>\n" &
            "<SCRIPT type=\"text/javascript\" src=\"/tmp/fileJs.js\"></script>\n</html>")
   
End


Public Sub ToggleButton1_Click()
  
' Avvio esecuzione del file:
  If ToggleButton1.Value Then
    wv.Url = "/tmp/esegue.html"
  Else
' Arresto esecuzione del file:
    wv.Url = "/tmp/stop.html"
  Endif
  
End


Public Sub Form_Close()
  
  wv.Url = "/tmp/stop.html"
  
  Me.Close
  
End



Esecuzione all'interno di una finestra della guida dei commenti con Markdown

E' possibile far eseguire un file audio anche all'interno di una finestra della guida dei commenti di un progetto Gambas, purché per la riga di commento, che dovrà far eseguire il file audio, sia stato utilizzato il linguaggio Markdown.

La riga di commento con i Markdown con la quale è possibile eseguire un file audio è la seguente:

'' <audio controls src="/percorso/del/file/audio"></audio>

Se si intende far eseguire automaticamente il file, si utilizzerà la seguente riga:

'' <audio controls autoplay=true src="file_audio_da_eseguire"></audio>

Uso di JavaScript e di un file esterno .js

E' possibile utilizzare il linguaggio JavaScript ed un file .js esterno, nel quale sarà presente la riga di comando per l'esecuzione del file audio.

La riga di commento con Markdown sarà la seguente:

'' <script language="JavaScript" type="text/JavaScript" src="file.js"></script>

mentre la riga di comando per l'esecuzione effettiva del file sarà così:

document.write('<audio controls src="/percorso/del/file/audio">')


Uso di un file html di supporto

Si potrà utilizzare anche un file esterno .html di supporto, il quale potrà a sua volta richiamare anche un file .js.

Uso del solo file html di supporto

Se si intende utilizzare solo il file html di supporto, senza il richiamo ad un file .js, potrà adottarsi il seguente codice nel commento con Markdown:

'' <A HREF="/percorso/del/file.html">Testo di collegamento su cui cliccare</a>

mentre nel file html si avrà il seguente codice:

<html>
<head>
 <script language="JavaScript" type="text/JavaScript">
   document.write('<audio controls="true" src="/percorso/del/file/audio">')
 </script>
</head>
</html

Uso del file html di supporto e di un file .js

Volendo utilizzare, oltre al file html di supporto, anche un file .js, avremo nel commento con Markdown:

'' <A HREF="/percorso/del/file.html">Testo di collegamento su cui cliccare</a>

mentre nel file html si avrà il seguente codice:

<html>
<head>
 <script language="JavaScript" type="text/JavaScript" src="file.js_da_richiamare">></script>
</head>
</html

e nel file .js vi sarà il seguente codice:

document.write('<audio controls="true" src="/percorso/del/file/audio">')


Note

[1] Per avviare l'esecuzione del file audio, potrebbe talvolta essere necessario ripetere il lancio del codice Javascript.