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

Da Gambas-it.org - Wikipedia.

Un file MIDI 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 Midi cliccando su un testo collegato al percorso del file Midi, 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.mid>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 Midi.

Esempio usando la risorsa Gambas Message:

Public Sub Button1_Click()

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

End


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

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 Midi da supporti di memoria

Per l'esecuzione di file Midi 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.mid" type="audio/midi">
</audio>

</html>

Ma anche più semplicemente:

<HTML>

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

</html>

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

 <HTML>

<audio controls=controls autoplay>
  <source src="/percorso/del/file.mid" type="audio/midi">
</audio>

</html>

oppure più semplicemente:

 <HTML>

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

</html>

Uso del TAG EMBED

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

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

Nell'attributo type va specificato anche il tipo di file che sarà eseguito, e si inserirà la parola "midi".

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


Esecuzione di un file Midi da una pagina WEB

Per ascoltare via internet un file Midi 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.mid" type="audio/midi">
</audio>

</html>

oppure ovviamente:

<HTML>

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

</html>

Uso dell'elemento Iframe

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

Uso dell'elemento Embed

<HTML><HEAD>
  <EMBED src="http://www.indirizzo/web/del/file.mid" type="audio/midi" 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 Midi 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.mid type=audio/midi 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.mid type=audio/midi 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.mid" ' +

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

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

</script>


</head>

</html>


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 Midi da eseguire:

<HTML>
<SCRIPT>var fileMidi = "/percorso/del/file.mid";</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=' + fileMidi + ' type="audio/midi" loop=0 autostart=true hidden=true name=jsaudio mastersound></embed>');


Esempio pratico

Mostriamo un esempio pratico, nel quale sarà possibile eseguire un file Midi:

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=' + fileMidi + ' type=\"audio/midi\" loop=0 autostart=true " &
            "hidden=true name=jsaudio mastersound></embed>');")
             
  File.Save("/tmp/esegue.html", "<HTML>\n<SCRIPT>var fileMidi = \"/percorso/del/file.mid\";</script>\n" &
            "<SCRIPT type=\"text/javascript\" src=\"/tmp/fileJs.js\"></script>\n</html>")
   
End


Public Sub ToggleButton1_Click()
  
' Avvio esecuzione del file Midi:
  If ToggleButton1.Value Then
    wv.Url = "/tmp/esegue.html"
  Else
' Arresto esecuzione del file Midi:
    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 Midi 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 Midi, sia stato utilizzato il linguaggio Markdown.

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

'' <audio controls src="file_midi_da_eseguire"></audio>

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

'' <audio controls autoplay=true src="/percorso/del/file.mid"></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 Midi.

La riga di commento con Markdown sarà la seguente:

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

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

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


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="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.mid">')
 </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="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="/percorso/del/file.js">></script>
</head>
</html

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

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



Note

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