mirror of
https://github.com/Tonejs/Tone.js
synced 2024-12-27 03:53:07 +00:00
153 lines
2.9 KiB
HTML
153 lines
2.9 KiB
HTML
|
<!DOCTYPE html>
|
||
|
|
<html>
|
||
|
|
<head>
|
||
|
|
<meta charset="utf-8">
|
||
|
|
<title>Mixer</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 src="../build/Tone.js"></script>
|
||
|
|
<script src="./scripts/jquery.min.js"></script>
|
||
|
|
<script src="./scripts/draggabilly.js"></script>
|
||
|
|
<script src="./scripts/StartAudioContext.js"></script>
|
||
|
|
<script src="./scripts/Interface.js"></script>
|
||
|
|
<script src="https://tonejs.github.io/Logo/build/Logo.js"></script>
|
||
|
|
|
||
|
|
<link rel="stylesheet" type="text/css" href="./style/examples.css">
|
||
|
|
|
||
|
|
<script>
|
||
|
|
// jshint ignore: start
|
||
|
|
</script>
|
||
|
|
|
||
|
|
</head>
|
||
|
|
<body>
|
||
|
|
<style type="text/css">
|
||
|
|
img {
|
||
|
|
width: 300px!important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.y {
|
||
|
|
height: 200px!important;
|
||
|
|
margin-left: auto;
|
||
|
|
margin-right: auto;
|
||
|
|
}
|
||
|
|
|
||
|
|
#Sliders {
|
||
|
|
position: relative;
|
||
|
|
width: 100%;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Group {
|
||
|
|
width: calc(100%/3 - 6px);
|
||
|
|
margin-left: 3px;
|
||
|
|
height: 100%;
|
||
|
|
float: left;
|
||
|
|
}
|
||
|
|
|
||
|
|
@media (max-width: 500px) {
|
||
|
|
.Group {
|
||
|
|
width: calc(50% - 3px);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.Title {
|
||
|
|
width: 100%;
|
||
|
|
text-align: center;
|
||
|
|
text-transform: uppercase;
|
||
|
|
font-size: 1.5em;
|
||
|
|
margin-bottom: 10px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Group .Button {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.Button {
|
||
|
|
clear: both;
|
||
|
|
margin-top: 5px;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
<div id="Content">
|
||
|
|
<div id="Title">PanVol / Solo</div>
|
||
|
|
<div id="Explanation">
|
||
|
|
<a href="https://tonejs.github.io/docs/PanVol">Tone.PanVol</a> combines panning and volume control into one component. <a href="https://tonejs.github.io/docs/Solo">Tone.Solo</a> allows you to selectively solo the connected audio.
|
||
|
|
</div>
|
||
|
|
<div id="Sliders"></div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
|
||
|
|
|
||
|
|
function makeFader(track, name){
|
||
|
|
|
||
|
|
var player = new Tone.Player("./audio/loop/"+track+".[mp3|ogg]").sync().start(0);
|
||
|
|
player.loop = true;
|
||
|
|
var soloCtrl = new Tone.Solo();
|
||
|
|
var panVol = new Tone.PanVol();
|
||
|
|
player.chain(panVol, soloCtrl, Tone.Master);
|
||
|
|
|
||
|
|
var container = $("<div>", {
|
||
|
|
"class" : "Group"
|
||
|
|
}).appendTo('#Sliders');
|
||
|
|
|
||
|
|
$("<div>", {
|
||
|
|
"class" : "Title",
|
||
|
|
"text" : track
|
||
|
|
}).appendTo(container);
|
||
|
|
|
||
|
|
Interface.Slider({
|
||
|
|
param : "volume",
|
||
|
|
name : "volume",
|
||
|
|
parent : container,
|
||
|
|
tone : panVol,
|
||
|
|
axis : "y",
|
||
|
|
exp : 0.5,
|
||
|
|
max : 6,
|
||
|
|
min : -60,
|
||
|
|
});
|
||
|
|
|
||
|
|
Interface.Slider({
|
||
|
|
param : "pan",
|
||
|
|
name : "pan",
|
||
|
|
parent : container,
|
||
|
|
tone : panVol,
|
||
|
|
min : -1,
|
||
|
|
max : 1,
|
||
|
|
});
|
||
|
|
|
||
|
|
Interface.Button({
|
||
|
|
parent: container,
|
||
|
|
type : "toggle",
|
||
|
|
text : "solo",
|
||
|
|
activeText : "solo",
|
||
|
|
start : function(){
|
||
|
|
soloCtrl.solo = true;
|
||
|
|
},
|
||
|
|
end : function(){
|
||
|
|
soloCtrl.solo = false;
|
||
|
|
},
|
||
|
|
});
|
||
|
|
}
|
||
|
|
|
||
|
|
makeFader("bass");
|
||
|
|
makeFader("chords");
|
||
|
|
makeFader("drone");
|
||
|
|
|
||
|
|
Interface.Button({
|
||
|
|
type : "toggle",
|
||
|
|
text : "Start",
|
||
|
|
activeText : "Stop",
|
||
|
|
start : function(){
|
||
|
|
Tone.Transport.start()
|
||
|
|
},
|
||
|
|
end : function(){
|
||
|
|
Tone.Transport.stop()
|
||
|
|
},
|
||
|
|
});
|
||
|
|
|
||
|
|
</script>
|
||
|
|
</body>
|
||
|
|
</html>
|