mirror of
https://github.com/Tonejs/Tone.js
synced 2024-11-16 08:38:00 +00:00
88 lines
No EOL
2.2 KiB
HTML
88 lines
No EOL
2.2 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>PLAYER</title>
|
|
|
|
<meta name="viewport" content="width=device-width, initial-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="../../Notone.js/build/Notone.GUI.js"></script>
|
|
<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>
|
|
<div id="Content">
|
|
<div id="Title">Grains</div>
|
|
<div id="Explanation">
|
|
Click on the dragger to play a grain from the Tone.Player. A grain is a short, looped
|
|
piece of audio. When the loop becomes very small, it takes on another pitch value. Drag
|
|
the circle to the bottom to hear this. The x-axis controls the starting position of the loop,
|
|
and the y-axis controls the grain size.
|
|
</div>
|
|
<div id="DragContainer"></div>
|
|
</div>
|
|
<script type="text/javascript">
|
|
//muted until you click
|
|
Tone.Master.volume.value = -Infinity;
|
|
|
|
//the player
|
|
var player = new Tone.Player({
|
|
"url" : "./audio/casio/A1.mp3",
|
|
"loop" : true,
|
|
"loopStart" : 0.201,
|
|
"loopEnd" : 0.211,
|
|
"autostart" : true
|
|
}).toMaster();
|
|
</script>
|
|
|
|
<script id="GUI" type="text/javascript">
|
|
$(function(){
|
|
Notone.config({
|
|
"search" : false,
|
|
"expandInDrawer" : true,
|
|
"hideDrawer" : Interface.isMobile,
|
|
"drawer" : true,
|
|
"container" : "body"
|
|
});
|
|
|
|
var playerGUI = Notone.add(player, "player", ["loopStart", "loopEnd"]);
|
|
|
|
new Interface.Dragger({
|
|
gui: playerGUI,
|
|
x : {
|
|
param : "loopStart",
|
|
min : 0.1,
|
|
max : 1,
|
|
},
|
|
y : {
|
|
min : 0.003,
|
|
max : 0.5,
|
|
exp : 4,
|
|
value : player.loopEnd - player.loopStart,
|
|
drag : function(y){
|
|
//loopStart
|
|
playerGUI.set({
|
|
"loopStart" : player.loopStart,
|
|
"loopEnd" : player.loopStart + y,
|
|
});
|
|
}
|
|
},
|
|
start : function(){
|
|
Tone.Master.volume.rampTo(0, 0.05);
|
|
},
|
|
end : function(){
|
|
Tone.Master.volume.rampTo(-Infinity, 0.05);
|
|
}
|
|
});
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |