﻿﻿{"id":1995,"date":"2026-01-05T13:04:18","date_gmt":"2026-01-05T12:04:18","guid":{"rendered":"https:\/\/elearningsamba.com\/index.php\/dittytoy-transforme-votre-navigateur-en-studio-de-musique-qui-se-code\/"},"modified":"2026-01-05T13:04:18","modified_gmt":"2026-01-05T12:04:18","slug":"dittytoy-transforme-votre-navigateur-en-studio-de-musique-qui-se-code","status":"publish","type":"page","link":"https:\/\/elearningsamba.com\/index.php\/dittytoy-transforme-votre-navigateur-en-studio-de-musique-qui-se-code\/","title":{"rendered":"Dittytoy transforme votre navigateur en studio de musique qui se code"},"content":{"rendered":"<p>Est-ce que vous avez d\u00e9j\u00e0 r\u00eav\u00e9 de composer de la musique comme on code un programme ? Genre, \u00e9crire une boucle <code>for<\/code> et qu&#8217;elle g\u00e9n\u00e8re un beat au lieu d&#8217;afficher des nombres dans la console ?<\/p>\n<p>H\u00e9 bien, c&#8217;est exactement ce que propose <strong><br \/>\n<a href=\"https:\/\/dittytoy.net\/\">Dittytoy<\/a><br \/>\n<\/strong>. Et le truc de fou, c&#8217;est que \u00e7a tourne directement dans votre navigateur. Une simple URL et hop, vous voil\u00e0 compositeur.<\/p>\n<p>Vous allez sur le site, vous tapez du code JavaScript dans un \u00e9diteur, vous cliquez sur &#8220;Compile&#8221;, et votre navigateur se transformera alors en synth\u00e9tiseur. La plateforme utilise la Web Audio API pour g\u00e9n\u00e9rer le son en temps r\u00e9el, ce qui donne des possibilit\u00e9s assez dingues c\u00f4t\u00e9 cr\u00e9ativit\u00e9 sonore.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/dittytoy-live-coding-musique-navigateur\/dittytoy-live-coding-musique-navigateur-2.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Dittytoy repose sur 4 briques de base. D&#8217;abord les <strong>synth\u00e9s<\/strong> qui g\u00e9n\u00e8rent le son brut via des fonctions math\u00e9matiques (sinus, carr\u00e9e, triangle&#8230;). Ensuite les <strong>boucles<\/strong> qui r\u00e9p\u00e8tent des patterns avec des commandes <code>play()<\/code> et <code>sleep()<\/code>. Puis les <strong>enveloppes<\/strong> pour contr\u00f4ler l&#8217;attaque et le decay des notes. Et enfin les <strong>filtres<\/strong> pour sculpter le son avec des passe-bas, passe-haut et compagnie.<\/p>\n<p>La syntaxe est inspir\u00e9e de<br \/>\n<a href=\"https:\/\/korben.info\/coder-musique-sonic-pi.html\">Sonic Pi<\/a><br \/>\n, le fameux outil de programmation musicale utilis\u00e9 dans les \u00e9coles pour apprendre le code aux gamins. Si vous avez d\u00e9j\u00e0 jou\u00e9 avec, vous serez en terrain connu. Sinon, la documentation est plut\u00f4t bien foutue avec des exemples qui fonctionnent direct.<\/p>\n<p>\n<img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/dittytoy-live-coding-musique-navigateur\/dittytoy-live-coding-musique-navigateur-3.png\" alt=\"\" loading=\"lazy\">\n<\/p>\n<p>Niveau fonctionnalit\u00e9s, y&#8217;a \u00e9galement de quoi faire. Plus de 70 gammes int\u00e9gr\u00e9es (majeure, mineure, pentatonique&#8230;), 50 types d&#8217;accords, et m\u00eame un syst\u00e8me d&#8217;entr\u00e9es qui permet de cr\u00e9er des sliders pour tweaker les param\u00e8tres en temps r\u00e9el. Vous pouvez aussi exporter vos cr\u00e9ations en MP3, ce qui est quand m\u00eame pratique pour les partager.<\/p>\n<p>Perso, ce qui me pla\u00eet dans ce genre d&#8217;outils, c&#8217;est qu&#8217;ils d\u00e9mocratisent la cr\u00e9ation musicale pour les gens qui ont le cerveau c\u00e2bl\u00e9 &#8220;code&#8221; plut\u00f4t que &#8220;solf\u00e8ge&#8221;. Vous savez, ceux qui comprennent mieux un <code>Math.sin(phase * 2 * Math.PI)<\/code> qu&#8217;une port\u00e9e avec des croches dessus.<\/p>\n<p>Et puis y&#8217;a un c\u00f4t\u00e9 hypnotique \u00e0 voir son code se transformer en musique surtout<br \/>\n<a href=\"https:\/\/dittytoy.net\/ditty\/55bd6ffb2e\">avec leur visualiseur.<\/a>\n<\/p>\n<p><img decoding=\"async\" src=\"https:\/\/korben.info\/cdn-cgi\/image\/width=1200,fit=scale-down,quality=90,f=avif\/dittytoy-live-coding-musique-navigateur\/dittytoy-live-coding-musique-navigateur-1.jpeg\" alt=\"\" loading=\"lazy\"><\/p>\n<p>C&#8217;est un peu comme<br \/>\n<a href=\"https:\/\/korben.info\/le-chipophone.html\">le Chipophone<\/a><br \/>\n, mais version navigateur et sans avoir \u00e0 recycler un vieil orgue.<\/p>\n<p>Le cr\u00e9ateur, Reinder Nijhoff, a m\u00eame sorti un package npm pour les d\u00e9veloppeurs qui voudraient int\u00e9grer le moteur dans leurs propres projets.<\/p>\n<p>C&#8217;est gratuit, le package npm est sous licence MIT, et les cr\u00e9ations partag\u00e9es sur la plateforme sont sous CC BY-NC-SA par d\u00e9faut. De quoi vous la jouer compositeur de chiptune entre deux commits.<\/p>\n<p>Bon, \u00e9videmment \u00e7a ne remplacera pas Ableton pour produire un album. Mais pour s&#8217;amuser, apprendre les bases de la synth\u00e8se sonore, ou juste \u00e9pater vos coll\u00e8gues \u00e0 la pause caf\u00e9 en g\u00e9n\u00e9rant un beat avec 10 lignes de code, \u00e7a fait largement le taf.<\/p>\n<p>\n<a href=\"https:\/\/dittytoy.net\/\">Source<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Est-ce que vous avez d\u00e9j\u00e0 r\u00eav\u00e9 de composer de la musique comme on code un programme ? Genre, \u00e9crire une boucle for et qu&#8217;elle g\u00e9n\u00e8re un beat au lieu d&#8217;afficher des nombres dans la console ? H\u00e9 bien, c&#8217;est exactement ce que propose Dittytoy . Et le truc de fou, c&#8217;est que \u00e7a tourne directement dans votre navigateur. Une simple URL et hop, vous voil\u00e0 compositeur. Vous allez sur le site, vous tapez du code JavaScript dans un \u00e9diteur, vous cliquez sur &#8220;Compile&#8221;, et votre navigateur se transformera alors en synth\u00e9tiseur. La plateforme utilise la Web Audio API pour g\u00e9n\u00e9rer le son en temps r\u00e9el, ce qui donne des possibilit\u00e9s assez dingues c\u00f4t\u00e9 cr\u00e9ativit\u00e9 sonore. Dittytoy repose sur 4 briques de base. D&#8217;abord les synth\u00e9s qui g\u00e9n\u00e8rent le son brut via des fonctions math\u00e9matiques (sinus, carr\u00e9e, triangle&#8230;). Ensuite les boucles qui r\u00e9p\u00e8tent des patterns avec des commandes play() et sleep(). Puis les enveloppes pour contr\u00f4ler l&#8217;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\u00e9e de Sonic Pi , le fameux outil de programmation musicale utilis\u00e9 dans les \u00e9coles pour apprendre le code aux gamins. Si vous avez d\u00e9j\u00e0 jou\u00e9 avec, vous serez en terrain connu. Sinon, la documentation est plut\u00f4t bien foutue avec des exemples qui fonctionnent direct. Niveau fonctionnalit\u00e9s, y&#8217;a \u00e9galement de quoi faire. Plus de 70 gammes int\u00e9gr\u00e9es (majeure, mineure, pentatonique&#8230;), 50 types d&#8217;accords, et m\u00eame un syst\u00e8me d&#8217;entr\u00e9es qui permet de cr\u00e9er des sliders pour tweaker les param\u00e8tres en temps r\u00e9el. Vous pouvez aussi exporter vos cr\u00e9ations en MP3, ce qui est quand m\u00eame pratique pour les partager. Perso, ce qui me pla\u00eet dans ce genre d&#8217;outils, c&#8217;est qu&#8217;ils d\u00e9mocratisent la cr\u00e9ation musicale pour les gens qui ont le cerveau c\u00e2bl\u00e9 &#8220;code&#8221; plut\u00f4t que &#8220;solf\u00e8ge&#8221;. Vous savez, ceux qui comprennent mieux un Math.sin(phase * 2 * Math.PI) qu&#8217;une port\u00e9e avec des croches dessus. Et puis y&#8217;a un c\u00f4t\u00e9 hypnotique \u00e0 voir son code se transformer en musique surtout avec leur visualiseur. C&#8217;est un peu comme le Chipophone , mais version navigateur et sans avoir \u00e0 recycler un vieil orgue. Le cr\u00e9ateur, Reinder Nijhoff, a m\u00eame sorti un package npm pour les d\u00e9veloppeurs qui voudraient int\u00e9grer le moteur dans leurs propres projets. C&#8217;est gratuit, le package npm est sous licence MIT, et les cr\u00e9ations partag\u00e9es sur la plateforme sont sous CC BY-NC-SA par d\u00e9faut. De quoi vous la jouer compositeur de chiptune entre deux commits. Bon, \u00e9videmment \u00e7a ne remplacera pas Ableton pour produire un album. Mais pour s&#8217;amuser, apprendre les bases de la synth\u00e8se sonore, ou juste \u00e9pater vos coll\u00e8gues \u00e0 la pause caf\u00e9 en g\u00e9n\u00e9rant un beat avec 10 lignes de code, \u00e7a fait largement le taf. Source<\/p>\n","protected":false},"author":1,"featured_media":1996,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"give_campaign_id":0,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"_kadence_starter_templates_imported_post":false,"footnotes":""},"class_list":["post-1995","page","type-page","status-publish","has-post-thumbnail","hentry"],"campaignId":"","_links":{"self":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1995","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/comments?post=1995"}],"version-history":[{"count":0,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/pages\/1995\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media\/1996"}],"wp:attachment":[{"href":"https:\/\/elearningsamba.com\/index.php\/wp-json\/wp\/v2\/media?parent=1995"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}