Tone.js/examples/oscillator.html

74 lines
1.7 KiB
HTML
Raw Normal View History

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Oscillator</title>
2014-09-06 19:35:31 +00:00
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
2014-08-28 04:39:17 +00:00
<script type="text/javascript" src="../build/Tone.js"></script>
2015-06-26 05:23:05 +00:00
<script type="text/javascript" src="./scripts/jquery.min.js"></script>
2015-06-08 14:41:45 +00:00
<script type="text/javascript" src="../../Notone.js/build/Notone.GUI.js"></script>
2015-02-13 20:23:30 +00:00
<script type="text/javascript" src="./scripts/Interface.js"></script>
<link rel="stylesheet" type="text/css" href="./style/examples.css">
<script type="text/javascript">
// jshint ignore: start
</script>
</head>
<body>
2015-02-13 20:23:30 +00:00
<div id="Content">
2015-06-26 05:23:05 +00:00
<div id="Title">Oscillator</div>
2015-06-08 14:41:45 +00:00
<div id="Explanation">
Click and drag the dot to hear the oscillator. The x-axis controls the freqency of the oscillator and the y-axis controls the amplitude.
</div>
<div id="DragContainer"></div>
2015-02-13 20:23:30 +00:00
</div>
<script id="ToneCode" type="text/javascript">
2015-06-08 14:41:45 +00:00
var osc = new Tone.Oscillator({
"frequency" : 440,
"volume" : -10
}).toMaster();
2015-02-13 20:23:30 +00:00
</script>
<script id="GUI" type="text/javascript">
2015-06-08 14:41:45 +00:00
$(function(){
Notone.config({
"search" : false,
"expandInDrawer" : true,
"hideDrawer" : Interface.isMobile,
"drawer" : true,
"container" : "body"
});
var oscGUI = Notone.add(osc, "Oscillator");
2015-06-26 05:23:05 +00:00
new Interface.Dragger({
gui: oscGUI,
2015-06-08 14:41:45 +00:00
x : {
param : "frequency",
2015-06-26 05:23:05 +00:00
min : 40,
2015-06-08 14:41:45 +00:00
max : 2000,
exp : 2
},
y : {
param : "volume",
min : -40,
max : 0
},
start : function(){
osc.start();
Tone.Master.volume.rampTo(0, 0.05);
},
end : function(){
//so it doesn't click
Tone.Master.volume.rampTo(-Infinity, 0.05);
}
});
})
2014-08-28 04:39:17 +00:00
</script>
</body>
</html>