Méthode simplifiée
- - Créer un répertoire (un dossier), dans lequel nous allons créer l'instrument de musique
- - Télécharger les fichiers, en cliquant dans la colonne de gauche sur : Télécharger Lecjoa
- -Décompressé le répertoire téléchargé et récupérer le fichier PianoBaul.html et le répertoire PianoBaul que nous plaçons dans le répertoire de travail.
- -Pour jouer de l'instrument, il suffit de cliquer sur PianoBaul.html
- - L'instrument téléchargé permet de jouer 47 briques acoustiques différentes.
Une brique acoustique est composée de 75 valeurs pilotant des dimensions acoustiques.
Pour générer ses propres sonorités (notes de musique), il faut ouvrir avec son éditeur de texte le fichier adn1.js et créer sa propre brique acoustique.
Chaque brique est sous forme de la lettre m avec un indice, nous pouvons créer des briques liées comme dans l'exemple, ou créer des sons totalement différents en indiquant 75 valeurs derrière la lettre m sur un indice précis. - - Pour créer sa propre extension firefox, il faut prendre dans le répertoire téléchargé, le fichier manifest.json
- - Ouvrir le fichier manifest.json avec son éditeur de texte, changer le nom et le numéro de version, supprimer tous les fichier non utilisés. Ensuite l'application est prête à être installée comme extension firefox
Méthode intermédiaire
- -La méthode intermédiaire reprend le début de la méthode simplifiée et y ajoute un instrument de musique personnalisé.
- - Le dessin de l'instrument de musique s'effectue en utilisant le css lui même appelé par le HTML. A l'attention de ceux qui veulent se familliariser avec le dessin en css, j'ai placé de nombreux exemples de dessins d'instruments de musique dans mes pages web PianoBaul. Je conseille vivement de les modifier pour personnaliser, celles-ci n'ont qu'un rôle d'apprentissage
- - Pour dessiner son instrument de musique, il faut oublier toute les conventions pour basculer sur un raisonnement multidirectionnel avec pour ordre de construction que c'est le dernier qui parle qui a raison. Chaque forme que nous dessinons est la résultante de plusieurs dimensions. Il n'y a pas de carré, de cercle, de triangle, il y a la résultante de toutes les dimensions qui peut donner soit un carré, soit un cercle, soit un triangle. En fin de compte la logique utilisé dit qu'il y a qu'une seule forme et selon les valeurs que nous plaçons dans les différentes dimensions, cette forme nous apparait comme un cercle, comme un trapèze ...
Le fichier à ouvrir pour dessiner les formes se nomme adresse.css
Nous donnons un nom différent à chaque forme de manière à pouvoir l'appeler plus facilement. Le nommage en css s'écrit en plaçant un point devant le nom et en plaçant des acolades à l'extrémité des dimensions définies. Chacune des dimensions définies est séparée par un point-virgule. - -Les principales dimensions sont, la position, la largeur, la hauteur, la couleur, l'opacité, les coefficients d'ouvertures. Je recommande de consulter la documentation sur w3c
- -Une fois les différentes formes utiles dessinées, nous ouvrons, avec notre éditeur de texte, le fichier PianoBaul.html pour appeler les différentes formes dans la page. Nous appelons une forme avec le terme class= dans une balise. Si deux formes occupent le même espace, c'est la dernière forme appelée qui s'affichera dessus, nous pouvons mixer des formes avec l'opacité, voir avec un peu de pratique créer des dégradés, ou des actions de mouvements.
- -Les notes de musique de l'instrument sont identifiées par un nom. En plaçant ce nom dans une balise, l'action est délimitée par la balise. En exemple (div id="b7v" class="place7") indique que la brique acoustique b7v est jouée quand nous cliquons sur le dessin généré par place7
- -Le nombre de briques acoustiques possible est illimité, mais la gestion de celui-ci impose de modifier plusieurs fichiers.
Comme nous l'avons vu dans la méthode simplifiée, les briques acoustiques se crées dans le fichier adn1.js. Dans adn1.js, nous avons deux parties, l'une qui indique les 75 valeurs pour chaque forme indicée de m, et une qui lance la génération de chaque brique acoustique. Dans le fichier téléchargé, nous ne générons que 36 briques acoustiques, bien que l'instrument possède 47 touches possibles. Pour corriger, il faut en premier avoir les 47 briques acoustique (47 m indicé) et ensuite remplacer les valeurs dans les boucles génératrice du for , soit le 48 à la place de 37 et 47 la place de la valeur 36.
Méthode professionnelle
Pour des raisons pratiques, l'instrument de musique est généré sous forme d'extension firefox, les exemples que j'ai créé se nomment PianoBaul. Piano car j'ai en premier dessiné un piano et Baul pour Bibliothèque Acoustique Universelle Linux car la base des sonorités de l'instrument de musique est générée avec le format audio abadie.adn
Comme tout ce qui concerne le langage multidirectionnel ici, il n'y a que de l'entendement, pas d'algèbre, pas d'imitation, même pour le dessin la même base peut devenir un cercle, un rectangle ou un coeur, tout est question de dimension et équilibres de dimensions
La page d'accueil de l'extension PianoBaul est à télécharger ici PianoBaul.html et son répertoire à télécharger ici : PianoBaul
Pour créer son propre instrument de musique sous forme d'extension, il faut reprendre le début du tutoriel précédent pour créer son propre manifest.json qui va ouvrir sa propre page PianoBaul.html qui pourra même être nommée autrement.
1- Nous trouvons dans la page PianoBaul.html un fichier d'entête qui indique que c'est du HTML, et qu'il faut afficher l'instrument de musique sur la page complète.
2- Comme indiqué dans l'image ci-dessus nous indiquons aussi l'adresse d'un fichier javascript, et aussi l'adresse d'un fichier css qui va nous permettre de créer l'instrument de musique. Nous dessinons en css car cette pratique est adaptée au langage multidirectionnel, cette pratique est adaptée à l'entendement. Nous retrouvons avec le css, une partie effet visuel, qu'utilisaient les hommes préhistorique quand ils faisaient tourner un os autour de son centre.
3- Ensuite nous donnons des identités (id= ) à des emplacements (class=). Les emplacements sont déterminés par des dessins en css, et les identités vont permettre au javascrit de créer des événements (comme jouer un son) quand nous allons soit survoler, soit cliquer au doigt ou au clavier ou ...
4- En fin de fichier nous indiquons les emplacements des différents fichiers javascrit utiles. Il est tout à fait possible de les regrouper en un seul fichier ou de les insérer dans le code HTML, mais comme j'ai prévu que chacun puisse créer son propre instrument de musique, j'ai préféré les séparer afin que chacun puisse les modifier plus facilement.
5- Les fichiers ajoutés sont :
adresse.js : qui sert à pister un événement sur un emplacement adresse.js avec
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('b1v').addEventListener("click", function() {
touche1Press();
});
ou encore à pister les touches claviers en permettant que le même son puisse se chevaucher (lu plusieurs fois avant que la première lecture est fini) avec
case "a":
mua1 = mua1 + 1;
if(mua1>3){
mua1 =0;
}
multitouchea(mua1);
break;
Ce fichier est principalement composé d'adressage pour indiquer quand le son doit être joué et quel son doit être joué. La technique qui permet de jouer plusieurs fois le même son rapidement est de créer plusieurs noms de fichiers contenant le même son
adresse.css : qui sert à dessiner adresse.css
Nous utilisons le css pour dessiner, j'ai créé depuis plusieurs années des tutoriels des techniques, en exemple derrière ce lien : https://www.letime.net/alpha/5.html
adn1.js : adn1.js
qui sert de brique acoustique. Le concept est de générer une forme acoustique de base au format audio abadie.adn, ensuite de créer des tableaux de variations d'une partie de cette brique en fonction des touches, de l'instrument de musique, appelées.
adapt1.js : adapt1.js
Ce fichier ne sert qu'à créer une entête pour que le fichier audio soit compatible avec les lecteurs audio d'aujourd'hui. Explications, les pratiques du moment veulent qu'en début de fichier, nous écrivons ce que contient le fichier, quel lecteur utiliser, le nom du fichier, ... Ce n'est pas seulement l'extension qui indique quel outil utiliser pour lire le fichier, c'est surtout ces données placées en début de fichier.
adapt.js : adapt.js
Ce fichier est une table contenant tous les résultats possibles, ceux-ci sont utilisés en fonction de la durée qui est au maximum 128 en jouant sur la symétrie et un nombre de point clefs basés sur un octet. Les résultats sont donnés sur 2 octets et comme c'est de la modélisation, la qualité est largement supérieur aux capacités acoustiques de l'oreille humaine. Nous utilisons cette technique d’imitation, car si les ordinateur sont d’excellents imitateurs, par contre, ils ne savent pas compter rapidement sans faire d'erreurs.
joa.js : joa.js
Ce fichier sert à lire le contenue de la brique acoustique, pour générer la forme acoustique. Il faut bien comprendre dans le concept qu'ici pour les sons, comme pour les vidéos, nous n'utilisons pas d'algèbre, pas de fréquence, pas d'onde. Nous utilisons des formes qui mettent plusieurs dimensions en équilibre. C'est du langage multidirectionnel, comme l'utilisaient les hommes préhistoriques ou plus proche de nous les celtes, en encore plus proche de nous la convention de 1789 qui a posé les bases de notre République.
act1.js: act1.js qui sert à transformer le format audio abadie.joa en format audio compatible avec la technologie audio actuelle
back1.js back1.js
Ce fichier sert à déterminer combien de sons va contenir l'instrument de musique, ici dans l'exemple il y a 36 sons de manière à avoir les 26 lettres du clavier plus les 10 touches du clavier numérique, soit 36. Mais rien empêche de modifier pour se créer un pad tactile contenant beaucoup plus de son, voir même des briques acoustiques composées de plusieurs briques acoustiques.
Dans l'exemple pour 36 sons cela s'écrit :
document.addEventListener("DOMContentLoaded", function(event) {
var pour = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10,
11, 12, 13, 14, 15, 16, 17, 18, 19, 20,
21, 22, 23, 24, 25, 26, 27, 28, 29, 30,
31, 32, 33, 34, 35, 36];
for(var pour1= 0; pour1 < 36; pour1++)
{
lance(pour[pour1]);
}
});