<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>SimpleFM</title> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> <script type="text/javascript" src="../build/Tone.js"></script> <script type="text/javascript" src="./scripts/jquery.min.js"></script> <script type="text/javascript" src="./scripts/draggabilly.js"></script> <script type="text/javascript" src="./scripts/Interface.js"></script> <script type="text/javascript" src="./scripts/Logo.js"></script> <script type="text/javascript" src="./scripts/qwerty-hancock.js"></script> <link rel="stylesheet" type="text/css" href="./style/examples.css"> <script type="text/javascript"> // jshint ignore: start </script> </head> <body> <div id="Content"> <div id="Title">FMSynth</div> <div id="Explanation"> <a href="http://tonejs.org/docs/#SimpleFM">Tone.SimpleFM</a> is composed of two <a href="http://tonejs.org/docs/#SimpleSynth">Tone.SimpleSynths</a> where one Tone.SimpleSynth modulates the frequency of a second Tone.SimpleSynth. </div> </div> <script type="text/javascript"> var synth = new Tone.SimpleFM({ "modulationIndex" : 12.22, "carrier" : { "envelope" : { "attack" : 0.01, "decay" : 0.2 } }, "modulator" : { "oscillator" : { "type" : "square" }, "envelope" : { "attack" : 0.2, "decay" : 0.01 } } }).toMaster(); </script> <script type="text/javascript"> $(function(){ new Interface.Slider({ tone : synth, param : "modulationIndex", name : "mod index", max : 100 }); $("<div>", { "id" : "Keyboard" }).appendTo("#Content"); var keyboard = new QwertyHancock({ id: "Keyboard", width: $("#Content").width(), height: 150, octaves: Interface.isMobile ? 1.26 : 3, startNote: "C3", whiteKeyColour: "white", blackKeyColour: "#ECECEC", activeColour : "#FFFC0C" }); keyboard.keyDown = function (note) { synth.triggerAttack(note); }; keyboard.keyUp = function (note) { synth.triggerRelease(); }; }); </script> </body> </html>