# Guitar tuner (JavaScript)

Susanna Huhtanen
ihmis.suski@gmail.com 2012
Use GTK+ and GStreamer to build a simple guitar tuner application for GNOME.
Luc Rebert,
traduc@rebert.name 2011
Alain Lojewski,
allomervan@gmail.com 2011-2012
Luc Pionchon
pionchon.luc@gmail.com 2011
Bruno Brouard
annoa.b@gmail.com 2011-12
Luis Menina
liberforce@freeside.fr 2014

# Guitar tuner

          Dans ce tutoriel, nous allons construire une petite application, Accordeur de guitare, utilisant JavaScript, GTK+ et GStreamer. Pour écrire et lancer tous les exemples de code vous-même, vous avez besoin d'un éditeur pour écrire le code, de Terminal et d'un ordinateur sur lequel GNOME 3 ou supérieur est installé. Dans ce guide, nous illustrerons les éléments suivants :

           GStreamer pipelines
           Script for running the application
           Libraries to import
           Creating the main window for the application
           Buttons for the tunes
           Making the sounds with GStreamer
           Connecting buttons to playSound
           The whole program
           Running the application form Terminal

Après avoir suivi ce tutoriel, vous devriez voir ceci sur votre écran :

# Les pipelines GStreamer

GStreamer est l'architecture multimédia de GNOME — vous pouvez vous en servir pour des jeux, des enregistrements, pour traiter des flux vidéo, audio, de webcam entre autres. Ici, nous allons nous en servir pour émettre des tonalités à une seule fréquence.

Le concept de GStreamer est le suivant : il y a création d'un pipeline contenant plusieurs éléments de traitement en provenance d'une source à destination d'un collecteur (sortie). La source peut être un fichier image, une vidéo ou un fichier musical, par exemple, et la sortie un élément graphique ou une carte son.

Entre la source et le collecteur, vous pouvez appliquer différents filtres et convertisseurs pour prendre en charge les effets, les conversions de format et ainsi de suite. Chaque élément du pipeline possède des propriétés pouvant être utilisées pour modifier son comportement.

Un exemple de pipeline GStreamer.

# Script de lancement de l'application

#!/usr/bin/gjs

Cette ligne indique comment lancer le script. Elle doit être la première ligne de code et le script doit être exécutable. Pour donner les bonnes permissions, allez dans Terminal et lancer dans le dossier correct la commande : chmod +x nomduscript. Vous pouvez aussi utiliser le gestionnaire de fichiers graphique. Déplacez-vous dans le bon dossier où se trouve votre code, faites un clic-droit sur le fichier, sélectionnez Propriétés, cliquez sur l'onglet Permissions et cochez la case pour permettre l'exécution du fichier comme un programme.

# Bibliothèques à importer

var Gtk = imports.gi.Gtk; var Gst = imports.gi.Gst;

const Mainloop = imports.mainloop;

Afin que le programme fonctionne, vous devez importer quelques bibliothèques d'introspection GObject à utiliser. Pour faire une interface graphique, nous avons besoin de Gtk et pour que Gstreamer fonctionne, nous avons besoin de Gst. Elles sont importées au début afin de pouvoir les utiliser partout ensuite. Nous importons également au début une boucle principale Mainloop pour prendre en charge le délai à utiliser avec les sons d'accordage.

# Création de la fenêtre principale de l'application

Gtk.init(null, 0); Gst.init(null, 0);

var guitarwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL, border_width: 100}); guitarwindow.title = "Guitar Tuner"; guitarwindow.connect("destroy", function(){Gtk.main_quit()});

guitarwindow.show(); Gtk.main();

L'importation de Gtk et Gst n'est pas suffisante, nous devons les initialiser afin qu'elles fonctionnent. Lorsque c'est fait, nous devons créer la fenêtre de l'application. Plus tard, nous allons placer tous les boutons pour faire les sons dans cette fenêtre. Afin que la fenêtre s'affiche, nous devons lui dire de s'afficher et nous avons besoin de lancer le code avec Gtk.main().

# Les boutons pour les sons

var guitar_box = new Gtk.ButtonBox ({orientation: Gtk.Orientation.VERTICAL, spacing: 10});

var E = new Gtk.Button({label: "E"}); var A = new Gtk.Button({label: "A"}); var D = new Gtk.Button({label: "D"}); var G = new Gtk.Button({label: "G"}); var B = new Gtk.Button({label: "B"}); var e = new Gtk.Button({label: "e"});

guitar_box.add(E); guitar_box.add(A); guitar_box.add(D); guitar_box.add(G); guitar_box.add(B); guitar_box.add(e);

guitarwindow.add(guitar_box);

guitar_box.show_all();

Puisque Gtk.Window ne peut contenir qu'un seul élément graphique, nous devons créer quelque chose en dessous pour pouvoir ajouter tous les boutons nécessaires à l'intérieur. Dans cet exemple, nous utilisons Buttonbox. Après la création de Buttonbox, nous créons les boutons avec les étiquettes nécessaires. Après l'obtention des boutons, nous devons les ajouter au Buttonbox et celui-ci doit être ajouté au Gtk.Window et tout ce qui est dans Buttonbox doit être affiché.

Après cette étape, vous devriez voir s'afficher une fenêtre à l'écran avec les 6 boutons. Pour l'instant, les boutons n'ont aucune action et nous verrons cela plus tard. Pour pouvoir connecter les signaux des boutons à quelque chose, il nous faut d'abord coder ce quelque chose.

# Création des sons avec GStreamer

var frequencies = {E: 329.63, A: 440, D: 587.33, G: 783.99, B: 987.77, e: 1318.5}

function playSound(frequency){ var pipeline = new Gst.Pipeline({name: "note"}); var source = Gst.ElementFactory.make("audiotestsrc","source"); var sink = Gst.ElementFactory.make("autoaudiosink","output");

source.set_property('freq', frequency); pipeline.add(source); pipeline.add(sink); source.link(sink); pipeline.set_state(Gst.State.PLAYING);

Mainloop.timeout_add(500, function () { pipeline.set_state(Gst.State.NULL); return false; }); }

The first thing we need to do is decide what tunes we want to make when we push a button. The frequencies list takes care of that. After that we get to actually making the sounds with the function playSound. For function playSound we give as an input a frequency (that we just defined in the frequencies variable). First thing we need to construct is a pipeline, a source and a sink. For the source we set the frequency. To the pipeline we add both the source and the sink and then we tell it to keep playing. As a last thing we use the const Mainloop to get the pipeline to stop after a 500ms.

Now we have the method of playing a tune when clicking a button. Next well make the connections between pushing a button and playing the correct sound from that button.

# Connexion des boutons à playSound

E.connect("clicked", function() { playSound(frequencies.E); }); A.connect("clicked", function(){ playSound(frequencies.A); }); D.connect("clicked", function(){ playSound(frequencies.D); }); G.connect("clicked", function(){ playSound(frequencies.G); }); B.connect("clicked", function(){ playSound(frequencies.B); }); e.connect("clicked", function(){ playSound(frequencies.e); });

The method of connecting button clicks to playSound with the correct tune is by using the connect method of the button widget. So we choose a button to be connected and type `E.connect("clicked", function(){playSound(frequencies.E);});` The `connect` tells that when pushing E, something should happen. The `clicked` tells the type of the signal happening to E and then in the `function(){};` we call playSound with the correct note that should be associated with the button.

# Le programme complet

So this is what all the parts combined looks like. When running this code, you should be able to tune your guitar (if you have correctly calibrated speakers).

#!/usr/bin/gjs var Gtk = imports.gi.Gtk; var Gst = imports.gi.Gst;

const Mainloop = imports.mainloop;

Gtk.init(null, 0); Gst.init(null, 0);

var guitarwindow = new Gtk.Window({type: Gtk.WindowType.TOPLEVEL, border_width: 100}); guitarwindow.title = "Guitar Tuner"; guitarwindow.connect("destroy", function(){Gtk.main_quit()});

var guitar_box = new Gtk.ButtonBox ({orientation: Gtk.Orientation.VERTICAL, spacing: 10});

var E = new Gtk.Button({label: "E"}); var A = new Gtk.Button({label: "A"}); var D = new Gtk.Button({label: "D"}); var G = new Gtk.Button({label: "G"}); var B = new Gtk.Button({label: "B"}); var e = new Gtk.Button({label: "e"});

var frequencies = {E: 329.63, A: 440, D: 587.33, G: 783.99, B: 987.77, e: 1318.5}

function playSound(frequency){ var pipeline = new Gst.Pipeline({name: "note"});

var source = Gst.ElementFactory.make("audiotestsrc","source"); var sink = Gst.ElementFactory.make("autoaudiosink","output");

source.set_property('freq', frequency); pipeline.add(source); pipeline.add(sink); source.link(sink); pipeline.set_state(Gst.State.PLAYING);

Mainloop.timeout_add(500, function () { pipeline.set_state(Gst.State.NULL); return false; }); }

E.connect("clicked", function() { playSound(frequencies.E); }); A.connect("clicked", function(){ playSound(frequencies.A); }); D.connect("clicked", function(){ playSound(frequencies.D); }); G.connect("clicked", function(){ playSound(frequencies.G); }); B.connect("clicked", function(){ playSound(frequencies.B); }); e.connect("clicked", function(){ playSound(frequencies.e); });

guitar_box.add(E); guitar_box.add(A); guitar_box.add(D); guitar_box.add(G); guitar_box.add(B); guitar_box.add(e);

guitarwindow.add(guitar_box);

guitar_box.show_all(); guitarwindow.show(); Gtk.main();

# Exécution de l'application à partir de Terminal

Pour lancer cette application, ouvrez Terminal, allez dans le dossier où votre application est enregistrée et lancez

     $  GJS_PATH=`pwd` gjs guitarTuner.js

# Implémentation de référence

Si vous rencontrez des difficultés avec ce tutoriel, comparez votre programme à ce programme de référence.