DokuWiki javascript:electronic-music-tools

javascript:electronic-music-tools:1.2_what_you_will_need_to_take_this_course

Anonymous (anonymous@undisclosed.example.com) — 2017-07-20T00:14:34+00:00

<- 1.3 Learning outcomes -> Nécéssaire pour suivre le cours : * un ordinateur permettant de jouer du son * des hauts-parleurs plutôt qu'un casque, certains sont pouvant être très forts ! * un navigateur à jour : chrome, firefox ou safari

javascript:electronic-music-tools:1.3_learning_outcomes

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T21:39:24+00:00

<- 1.2 What you will need to take this course1.4 Sound synthesis introduction -> À la fin de ce cours vous serez capables de : * expliquer ce que fait un synthétiseur * comprendre le terme “graphe de synthèse sonore” et générateur d'unité (unit generator) * implémenter des graphes de synthèse basiques en utilisant l'

javascript:electronic-music-tools:1.4_sound_synthesis_introduction

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T21:41:33+00:00

<- 1.3 Learning outcomes1.6 Synthesizer playlist -> synthèse sonore Pour notre cours, on considèrera que générer du son : aussi bien électroniquement qu'en utilisant un ordinateur. Des liens sur l'histoire des synthétiseurs sonores. Dès le 18ème siècle, on utilisait de l'électricité et de l'électronique pour générer du son (en utilisant de l'électromagnétisme pour faire vibrer des instruments et générer de la musique électroaccoustique).

javascript:electronic-music-tools:1.6_synthesizer_playlist

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T21:53:20+00:00

<- 1.4 Sound synthesis introduction1.10 Our first synth -> [Morton Subotnick, Butterfly No. 2, 1973]()

javascript:electronic-music-tools:1.10_our_first_synth

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T21:58:05+00:00

<- 1.6 Synthesizer playlist1.12 Mouse controlled synth -> // on créé une référence au contexte audio selon ce qui est disponible (si window.AudioContext n'est pas disponible on essaye avec webkitAudioContext) var contexte_audio = window.AudioContext || window.webkitAudioContext; // on créé un contexte qui nous permet de nous connecter au sysème audio de l'ordinateur, et de lui envoyer du son var contexte = new contexte_audio(); // on créé un …

javascript:electronic-music-tools:1.12_mouse_controlled_synth

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:01:08+00:00

<- 1.10 Our first synth1.14 Keyboard controlled synth -> var contexte_audio = window.AudioContext || window.webkitAudioContext; var contexte = new contexte_audio(); var oscillateur = contexte.createOscillator(); oscillateur.connect( contexte.destination ); oscillateur.start(); var min = 200; var max = 2000; // on écoute les mouvement souris dans la fenêtre document.body.addEventListener('mousemove', changer_frequence_oscillateur, false); …

javascript:electronic-music-tools:1.14_keyboard_controlled_synth

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:03:24+00:00

<- 1.12 Mouse controlled synth1.16 Modulation with an oscillator -> var contexte_audio = window.AudioContext || window.webkitAudioContext; // correspondances touche/note var notes = { a: 261.63, // C4 z: 293.66, // D4 e: 329.63, // E4 r: 349.23, // F4 t: 392.00, // G4 y: 440.00, // A4 u: 493.88, // B4 q: 523.25, // C5 s: 587.33, // D5 d: 659.25, // E5 f: 698.46, // F5 g: 783.99, // G5 h: 880…

javascript:electronic-music-tools:1.16_modulation_with_an_oscillator

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:05:25+00:00

<- 1.14 Keyboard controlled synth1.18 Using envelopes -> ```javascript var contexte_audio = window.AudioContext || window.webkitAudioContext; var contexte = new contexte_audio(); var oscillateur = contexte.createOscillator(); // LFO : Low frequency Oscillator var lfo = contexte.createOscillator(); // amplificateur LFO var amplificateur_lfo = contexte.createGain(); amplificateur_lfo.gain.value = 200; oscillateur.frequency.value = 300; lfo…

javascript:electronic-music-tools:1.18_using_envelopes

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:08:21+00:00

<- 1.16 Modulation with an oscillator1.20 Fiddling with the filter -> var contexte_audio = window.AudioContext || window.webkitAudioContext; var contexte = new contexte_audio(); document.body.addEventListener('keydown', jouer_note, false); function jouer_note () { /**/ // créer un oscillateur var oscillateur = contexte.createOscillator(); // on pourrait changer le type d'oscillateur : //oscillateur.type = 'triangle'; //oscillat…

javascript:electronic-music-tools:1.20_fiddling_with_the_filter

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:10:48+00:00

<- 1.18 Using envelopes1.23 Programming exercise -> var contexte_audio = window.AudioContext || window.webkitAudioContext; var notes = { a: 261.63, // C4 z: 293.66, // D4 e: 329.63, // E4 r: 349.23, // F4 t: 392.00, // G4 y: 440.00, // A4 u: 493.88, // B4 q: 523.25, // C5 s: 587.33, // D5 d: 659.25, // E5 f: 698.46, // F5 g: 783.99, // G5 h: 880.00, // A5 j: 987.77, // B5 }; var context…

javascript:electronic-music-tools:1.23_programming_exercise

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:13:24+00:00

<- 1.20 Fiddling with the filter2.1 Learning outcomes -> index.html : exercice.js : function jouer_note ( contexte, frequence, enveloppe ) { /* joue une note donnée ContextAudio, Number, Object -> Void */ var instant = contexte.currentTime; var oscillateur = …

javascript:electronic-music-tools:2.1_learning_outcomes

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:15:19+00:00

<- 1.23 Programming exercise2.2 User interfaces introduction -> À la fin de ce cours vous serez capables de : * comprendre le besoin d'une interface utilisateur. * décrire des exemples d'interfaces utilisateur pour les instruments de musique numériques. * construire des interfaces utilisateurs avec des composants préexistants.

javascript:electronic-music-tools:2.2_user_interfaces_introduction

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:17:25+00:00

<- 2.1 Learning outcomes2.3 Find an interesting musical interface -> * présentation de l'interface traditionnel des dispositifs de synthèse audio : surtout des molettes * autre possibilité : accéléromètres sur un mobile

javascript:electronic-music-tools:2.3_find_an_interesting_musical_interface

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:18:22+00:00

<- 2.2 User interfaces introduction2.4 Intro to NexusUI -> # Find an interesting musical interface Dans cette phase de discussion, vous devriez try and find an interesting musical or other user interface en utilisant soit les liens fournis avec la vidéo, ou de votre propre expérience avec des interfaces utilisateurs. Voici quelques liens de la *lecture* :

javascript:electronic-music-tools:2.4_intro_to_nexusui

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:19:45+00:00

<- 2.3 Find an interesting musical interface2.6 Slider controlled oscillator -> insertion de nexusUI : nexusosc.com

javascript:electronic-music-tools:2.6_slider_controlled_oscillator

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:35:02+00:00

<- 2.4 Intro to NexusUI2.9 Piano controller -> html

Il faut faire gaffe sur l'id du slider, car la lib le reprend tel quel en javascript, et slider--1 n'est pas un nom de variable possible en js. javascript var contexte_audio = window.AudioContext || window.webkitAudioContext; var contexte = new contexte_audio(); var oscillateur = contexte.createOscillator(); oscillateur.…

javascript:electronic-music-tools:2.9_piano_controller

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:35:19+00:00

<- 2.6 Slider controlled oscillator2.11 Tilt sensor control -> html

javascript var slider_1; var clavier; var contexte_audio = window.AudioContext || window.webkitAudioContext; var contexte = new contexte_audio(); var oscillateur = contexte.createOscillator(); oscillateur.connect( contexte.destination ); oscillateur.star…

javascript:electronic-music-tools:2.11_tilt_sensor_control

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:37:06+00:00

<- 2.9 Piano controller2.14 Programming exercise -> html

javascript var tilt; var contexte_audio = window.AudioContext || window.webkitAudioContext; var contexte = new contexte_audio(); var oscillateur = contexte.createOscillator(); oscillateur.connect( contexte.destination ); // setup code nx.…

javascript:electronic-music-tools:2.14_programming_exercise

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:40:13+00:00

<- 2.11 Tilt sensor control3.1 Learning outcomes ->

Programming tasks

Add another canvas …

javascript:electronic-music-tools:3.1_learning_outcomes

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:41:26+00:00

<- 2.14 Programming exercise3.2 Drum machine introduction -> À la fin de cette semaine, vous serez capables de : * décrire la fonctionnalité de l'interface utiliseur d'une boîte à rythme * charger et jouer des samples en utilisant l'API web audio * sélectionner des sons appropriés pour une boîte à rythme

javascript:electronic-music-tools:3.2_drum_machine_introduction

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:42:40+00:00

<- 3.1 Learning outcomes3.3 Interesting drum machine tracks -> Les boîtes à rythmes peuvent être retarcées au XVIè siècle avec une machine de sonnage de cloche appelée carillon et toujours utilisée aujourd'hui. Il s'agissait d'un cylindre rotatif avec des excroissances venant frapper des éléments externes et entraînant la frappe des cloches.

javascript:electronic-music-tools:3.3_interesting_drum_machine_tracks

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:45:17+00:00

<- 3.2 Drum machine introduction3.4 Load and play a sample -> Circuit Breaker - Trac-X (1992) (Richie Hawtin) : Newcleus - Computer Age ( Push The Button ) ( Sunnyview Records ) (1984) : Emmanuel Top - Acid Phase :

javascript:electronic-music-tools:3.4_load_and_play_a_sample

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:49:20+00:00

<- 3.3 Interesting drum machine tracks3.6 Playing samples with a clock -> [load and play a sample code]() [une collection de samples de batterie gratuits par Alex McLean]() javascript var contexte_audio = window.AudioContext || window.webkitAudioContext; var contexte = new contexte_audio(); var instruments = {}; function charger_un_sample ( url, n…

javascript:electronic-music-tools:3.6_playing_samples_with_a_clock

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:53:24+00:00

<- 3.4 Load and play a sample3.8 Super precise timing -> [lien]() Première manière, mais timing pas très bon, meilleure façon par la suite. javascript function Samples_set ( contexte ) { /* Set de samples permettant de charger simplement des samples et de les jouer */ this.contexte = contexte; this.samples_set = {}; } Samples_set.prototype.charger = function ( nom, url ) { /* Charge l…

javascript:electronic-music-tools:3.8_super_precise_timing

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:54:41+00:00

<- 3.6 Playing samples with a clock3.10 Multiple sounds -> [drum machine with good timing code]() javascript function Samples_set ( contexte ) { /* Set de samples permettant de charger simplement des samples et de les jouer */ this.contexte = contexte; this.samples_set = {}; } Samples_set.prototype.charger = function ( nom, url ) { /* Charge le sample et l'ajoute au set String, Strin…

javascript:electronic-music-tools:3.10_multiple_sounds

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T23:09:39+00:00

<- 3.8 Super precise timing3.12 Drum machine UI -> [code]() javascript function Samples_set ( contexte ) { /* Set de samples permettant de charger simplement des samples et de les jouer */ this.contexte = contexte; this.samples_set = {}; } Samples_set.prototype.charger = function ( nom, url ) { /* Charge le sample et l'ajoute au set String, String -> Void */ // on créé une référen…

javascript:electronic-music-tools:3.12_drum_machine_ui

Anonymous (anonymous@undisclosed.example.com) — 2017-07-19T22:59:59+00:00

<- 3.10 Multiple sounds3.14 Visual step display -> [code]() html

javascript function Samples_set ( contexte ) { /* Set de samples permettant de charger simplement des samples et de les jouer */ this.contexte = c…

javascript:electronic-music-tools:3.14_visual_step_display

Anonymous (anonymous@undisclosed.example.com) — 2017-07-20T00:10:27+00:00

<- 3.12 Drum machine UI3.17 Final drum machine code - standards compliant version -> [code]() html

javascript function Samples_set ( contexte ) { /* Set de samples permettant de charger simplement des samples et d…

javascript:electronic-music-tools:3.17_final_drum_machine_code_-_standards_compliant_version

Anonymous (anonymous@undisclosed.example.com) — 2017-07-20T00:12:26+00:00

<- 3.14 Visual step display3.18 Programming exercise -> [code]()

javascript:electronic-music-tools:3.18_programming_exercise

Anonymous (anonymous@undisclosed.example.com) — 2017-07-20T00:10:50+00:00

<- 3.17 Final drum machine code - standards compliant version4.1 Algorithmic music learning outcomes -> note : bugue si mis en pause je crois (va vouloir rattraper toutes les notes non jouées entre le moment mis en pause et la reprise) exercice.html exercice : drum machine