Est-ce que vous avez déjà rêvé de composer de la musique comme on code un programme ? Genre, écrire une boucle for et qu'elle génère un beat au lieu d'afficher des nombres dans la console ?

Hé bien, c'est exactement ce que propose Dittytoy . Et le truc de fou, c'est que ça tourne directement dans votre navigateur. Une simple URL et hop, vous voilà compositeur.

Vous allez sur le site, vous tapez du code JavaScript dans un éditeur, vous cliquez sur "Compile", et votre navigateur se transformera alors en synthétiseur. La plateforme utilise la Web Audio API pour générer le son en temps réel, ce qui donne des possibilités assez dingues côté créativité sonore.

Dittytoy repose sur 4 briques de base. D'abord les synthés qui génèrent le son brut via des fonctions mathématiques (sinus, carrée, triangle...). Ensuite les boucles qui répètent des patterns avec des commandes play() et sleep(). Puis les enveloppes pour contrôler l'attaque et le decay des notes. Et enfin les filtres pour sculpter le son avec des passe-bas, passe-haut et compagnie.

La syntaxe est inspirée de Sonic Pi , le fameux outil de programmation musicale utilisé dans les écoles pour apprendre le code aux gamins. Si vous avez déjà joué avec, vous serez en terrain connu. Sinon, la documentation est plutôt bien foutue avec des exemples qui fonctionnent direct.

Niveau fonctionnalités, y'a également de quoi faire. Plus de 70 gammes intégrées (majeure, mineure, pentatonique...), 50 types d'accords, et même un système d'entrées qui permet de créer des sliders pour tweaker les paramètres en temps réel. Vous pouvez aussi exporter vos créations en MP3, ce qui est quand même pratique pour les partager.

Perso, ce qui me plaît dans ce genre d'outils, c'est qu'ils démocratisent la création musicale pour les gens qui ont le cerveau câblé "code" plutôt que "solfège". Vous savez, ceux qui comprennent mieux un Math.sin(phase * 2 * Math.PI) qu'une portée avec des croches dessus.

Et puis y'a un côté hypnotique à voir son code se transformer en musique surtout avec leur visualiseur.

C'est un peu comme le Chipophone , mais version navigateur et sans avoir à recycler un vieil orgue.

Le créateur, Reinder Nijhoff, a même sorti un package npm pour les développeurs qui voudraient intégrer le moteur dans leurs propres projets.

C'est gratuit, le package npm est sous licence MIT, et les créations partagées sur la plateforme sont sous CC BY-NC-SA par défaut. De quoi vous la jouer compositeur de chiptune entre deux commits.

Bon, évidemment ça ne remplacera pas Ableton pour produire un album. Mais pour s'amuser, apprendre les bases de la synthèse sonore, ou juste épater vos collègues à la pause café en générant un beat avec 10 lignes de code, ça fait largement le taf.

Source

Dessiner des schémas en ASCII art, c’est un peu le sport national des devs qui documentent leur code dans des fichiers texte. Sauf que jusqu’ici, soit on se tapait ça à la main caractère par caractère, soit on passait par des outils en ligne qui demandent de se créer un compte et gardent vos diagrammes sur leurs serveurs. Heureusement, Cascii règle le problème puisqu’il s’agit d’un éditeur graphique complet qui tient dans un seul fichier HTML !

Et comme Cascii est écrit en JavaScript pur, y’a aucune dépendance, aucun framework, aucun npm install…etc. Vous téléchargez juste le fichier HTML, vous l’ouvrez dans votre navigateur, et c’est parti mon kiki.

Et pour l’installer, une commande suffit :

curl https://cascii.app -o cascii.html && open cascii.html

Ahaha ouais c’est la commande curl la plus nulle de l’histoire des commandes curl mais ça vous montre que je n’abuse pas.

Côté fonctionnalités, on a donc tout ce qu’il faut pour dessiner des diagrammes propres. Des lignes libres, des lignes en escalier, des carrés, des cercles, des losanges, du texte, des tableaux. Un système de calques permet d’organiser les éléments et de les grouper. Le plus malin, je trouve, c’est les “jointures intelligentes” qui connectent automatiquement les formes entre elles… parce que dessiner des flèches qui arrivent pile au bon endroit à la main, c’est l’enfer. Même comme ça, je suis pas doué, cela dit…

Ne le jugez pas…

L’éditeur propose plusieurs charsets tels que ASCII classique ou Unicode pour ceux qui veulent des lignes plus jolies et il y a 3 styles de lignes (pointillées, solides fines, solides épaisses) ainsi que des flèches directionnelles. Côté thèmes, du sombre, du clair, ou un mode “console” pour les nostalgiques du terminal.

La sauvegarde se fait automatiquement dans le stockage local du navigateur, donc même si vous fermez l’onglet par erreur, votre travail n’est pas perdu et pour partager ou archiver, il y a un export en Base64 qui permet de tout récupérer plus tard. Si vous utilisez la version hébergée sur cascii.app, vous pouvez aussi générer des liens courts pour partager vos créations.

Le projet est sous licence Apache 2.0 et le code source est dispo sur GitHub et pour les raccourcis clavier, c’est du classique : Ctrl+Z pour annuler, Ctrl+C/V pour copier-coller, Ctrl+G pour grouper des éléments, Shift+Click pour la multi-sélection. L’historique est illimité donc vous pouvez revenir en arrière autant que vous voulez.

Voilà, si vous documentez du code, dessinez des architectures système ou avez juste besoin de faire un petit schéma rapide sans sortir l’artillerie lourde, Cascii fera le job !