Mirrors/Tone.js
2
0
Fork 0
mirror of https://github.com/Tonejs/Tone.js synced 2025-01-14 12:53:59 +00:00
Code Issues Projects Releases Packages Wiki Activity

granular synthesis example

Browse source 
[skip ci]
This commit is contained in:
Yotam Mann 2016-07-05 20:33:16 -04:00
parent dbc428a197
commit 7dbae675fd
1 changed files with 103 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

103
examples/grainPlayer.html Normal file
View file

@ -0,0 +1,103 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>GRAINPLAYER</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<link rel="icon" type="image/png" sizes="174x174" href="./style/favicon.png">
<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/StartAudioContext.js"></script>
<script type="text/javascript" src="./scripts/Interface.js"></script>
<script type="text/javascript" src="./scripts/Logo.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">Granular Synthesis</div>
<div id="Explanation">
<a href="http://tonejs.org/docs/#GrainPlayer">Tone.GrainPlayer</a> uses
<a href="https://en.wikipedia.org/wiki/Granular_synthesis">granular synthesis</a>
to enable you to adjust pitch and playback rate independently. The grainSize is the
amount of time each small chunk of audio is played for and the overlap is the
amount of crossfading transition time between successive grains.
</div>
<div id="Sliders"></div>
</div>
<script type="text/javascript">
//the player
var player = new Tone.GrainPlayer({
"url" : "./audio/FWDL.mp3",
"loop" : true,
"grainSize" : 0.1,
"overlap" : 0.05,
}).toMaster();
</script>
<script id="GUI" type="text/javascript">
$(function(){
new Interface.Loader();
new Interface.Button({
text : "Start",
activeText : "Stop",
type : "toggle",
start : function(){
player.start();
},
end : function(){
player.stop();
}
});
new Interface.Slider({
param : "playbackRate",
name : "playbackRate",
parent : $("#Sliders"),
tone : player,
min : 0.5,
max : 2,
});
new Interface.Slider({
param : "detune",
name : "detune",
parent : $("#Sliders"),
tone : player,
min : -1200,
max : 1200,
});
new Interface.Slider({
param : "grainSize",
name : "grainSize",
parent : $("#Sliders"),
tone : player,
min : 0.01,
max : 0.2,
});
new Interface.Slider({
param : "overlap",
name : "overlap",
parent : $("#Sliders"),
tone : player,
min : 0,
max : 0.2,
});
});
</script>
</body>
</html>