{"id":3047,"date":"2016-01-01T00:40:07","date_gmt":"2015-12-31T23:40:07","guid":{"rendered":"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3047"},"modified":"2016-09-20T09:23:15","modified_gmt":"2016-09-20T08:23:15","slug":"p5-js-21-commencer-a-coder","status":"publish","type":"post","link":"https:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3047","title":{"rendered":"\/ p5.js \/ 21 \/ gestion du son \/ partie 1"},"content":{"rendered":"<p><!--more--><\/p>\n<h5>La librairie\u00a0<em>p5.sound<\/em>\u00a0permet \u00e0 <em>p5.js<\/em> d&#8217;utiliser les fonctionnalit\u00e9 audio, y compris l&#8217;entr\u00e9e audio, la lecture, l&#8217;analyse et la synth\u00e8se.<br \/>\nLes bases de la gestion des fichiers son se trouvent dans le chapitre :\u00a0<a href=\"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=2081\" target=\"_blank\">\/ p5.js \/ 11 \/ m\u00e9dia : charger des sons<\/a>.<\/h5>\n<h6>1 \/ Charger le son \/ Jouer le son \/ Stopper le son<\/h6>\n\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/son\/01-son\" width=\"780\" height=\"300\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre>var son;\r\n\r\nfunction setup() {\r\n son = loadSound('sons\/caisse.mp3');\r\n createCanvas(780, 300);\r\n background(236,36,94);\r\n cursor(HAND);\r\n}\r\n\r\nfunction mousePressed() {\r\n\r\n if (son.isPlaying() ) { \r\n son.stop();\r\n background(236,36,94);\r\n } else {\r\n son.play();\r\n background(255);\r\n }\r\n}<\/pre>\n<h6>2 \/ Charger le son dans preload() ainsi il est pr\u00eat \u00e0 \u00eatre jou\u00e9 dans le setup()<\/h6>\n\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/son\/02-son\" width=\"780\" height=\"300\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre>var son;\r\n\r\nfunction preload() {\r\n son = loadSound('sons\/bip.mp3');\r\n cursor(HAND);\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(780, 300);\r\n son.loop(); \/\/ son est pr\u00eat\r\n background(236,36,94);\r\n}\r\n\r\nfunction mousePressed() {\r\n if ( son.isPlaying() ) { \r\n son.pause(); \/\/ .play() rejoue \u00e0 partir de .pause() position\r\n background(36,236,94);\r\n } else {\r\n son.play();\r\n background(236,36,94);\r\n }\r\n}<\/pre>\n<h6>3 \/ Il n&#8217;y a pas 1 format support\u00e9 par tous les navigateurs. Le format\u00a0<em>mp3<\/em> est natif dans Firefox et Opera&#8230;<br \/>\nPour assurer la compatibilit\u00e9 il faut pr\u00e9voir plusieurs formats.\u00a0<em>Ogg<\/em> est un format open-source qui est une alternative \u00e0 <em>mp3<\/em>.<br \/>\nPour convertir en <em>oog,<\/em>\u00a0<a href=\"http:\/\/media.io\" target=\"_blank\">http:\/\/media.io<\/a><br \/>\nLe script d\u00e9finit les formats propos\u00e9s et la fonction\u00a0<em>loadsound()<\/em> utilise le premier format support\u00e9 par le navigateur<\/h6>\n<pre>var son;\r\nfunction preload() {\r\n soundFormats('ogg', 'mp3'); \r\n son = loadSound('sons\/siffle');\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(780, 300);\r\n cursor(HAND);\r\n son.play();\r\n background(236,36,94);\r\n}\r\n\r\nfunction mousePressed() {\r\n if ( son.isPlaying() ) { \r\n son.pause();\r\n background(36,236,94);\r\n } else {\r\n son.play(); \r\n background(236,36,94);\r\n }\r\n}<\/pre>\n<h6>4 \/ Changer le volume du son (d\u00e9placement de la souris en x \/ Changer la vitesse du son (d\u00e9placement de la souris en y<\/h6>\n\n<!-- iframe plugin v.5.1 wordpress.org\/plugins\/iframe\/ -->\n<iframe src=\"http:\/\/lyceelecorbusier.eu\/p5\/son\/05-son\" width=\"780\" height=\"300\" style=\"border: 1px solid #ddd;\" scrolling=\"yes\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<pre>var son;\r\n\r\nfunction preload() {\r\n \r\n son = loadSound('sons\/piano1.mp3');\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(780, 300);\r\n\r\n \/\/boucle le son\r\n son.loop();\r\n}\r\n\r\nfunction draw() {\r\n background(255);\r\n\r\n \/\/ Volume entre 0 &amp; 1\r\n var volume = map(mouseX, 100, width-100, 0, 1);\r\n volume = constrain(volume, 0, 1);\r\n son.amp(volume);\r\n\r\n \/\/ Vitesse entre 0.01 &amp; 4\r\n \/\/ Changer la vitesse =&gt; Change la hauteur\r\n var speed = map(mouseY, 100, height-100, 0, 4);\r\n speed = constrain(speed, 0.01, 4);\r\n son.rate(speed);\r\n\r\n \/\/ Dessine des cercles pour montrer ce qui se passe\r\n noStroke();\r\n fill(236,36,94);\r\n text(volume,mouseX,150);\r\n ellipse(mouseX, 100, 48, 48);\r\n noStroke();\r\n fill(36,236,94);\r\n ellipse(100, mouseY, 48, 48);\r\n text(speed,150,mouseY);\r\n}<\/pre>\n<h6>5 \/\u00a0\u00a0Il est possible de r\u00e9gler le panoramique st\u00e9r\u00e9o avec <em>son.pan()<\/em>, valeurs entre -1.0 (\u00e0 gauche) et 1.0 (\u00e0 droite). Par d\u00e9faut 0.0 (au centre)<\/h6>\n<pre>var son;\r\n\r\nfunction preload() {\r\n son = loadSound('sons\/piano3.mp3');\r\n}\r\n\r\nfunction setup() {\r\n createCanvas(780, 300); \r\n son.loop();\r\n}\r\n\r\nfunction draw() {\r\n background(255);\r\n var panning = map(mouseX, 0.0, width, -1.0, 1.0);\r\n panning = constrain(panning, -1.0, 1.0);\r\n son.pan(panning);\r\n noStroke();\r\n fill(236, 36,94);\r\n ellipse(mouseX, 100, 48, 48);\r\n}<\/pre>\n<h5><a href=\"http:\/\/www.lyceelecorbusier.eu\/p5js\/?p=3064\">Suite&#8230;<\/a><\/h5>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[2],"tags":[],"_links":{"self":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3047"}],"collection":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=3047"}],"version-history":[{"count":18,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3047\/revisions"}],"predecessor-version":[{"id":3073,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=\/wp\/v2\/posts\/3047\/revisions\/3073"}],"wp:attachment":[{"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3047"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3047"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.lyceelecorbusier.eu\/p5js\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3047"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}