2016-10-05 04:12:46 +00:00
<!DOCTYPE html>
< html >
< head >
2019-01-09 01:21:29 +00:00
< meta charset = "utf-8" >
< title > Panner3d< / title >
2016-10-05 04:12:46 +00:00
2019-01-09 01:21:29 +00:00
< meta name = "viewport" content = "width=device-width, initial-scale=1, maximum-scale=1" >
< link rel = "icon" type = "image/png" sizes = "174x174" href = "./favicon.png" >
2020-07-18 00:58:09 +00:00
< script src = "https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/2.4.3/webcomponents-bundle.js" > < / script >
2020-07-18 00:36:42 +00:00
< link href = "https://fonts.googleapis.com/css?family=Material+Icons&display=block" rel = "stylesheet" / >
2017-03-18 16:35:37 +00:00
< script src = "../build/Tone.js" > < / script >
2020-07-18 00:58:09 +00:00
< script src = "./js/tone-ui.js" > < / script >
< script src = "./js/components.js" > < / script >
2016-10-05 04:12:46 +00:00
< style type = "text/css" >
2019-01-09 01:21:29 +00:00
tone-play-toggle {
margin-bottom: 10px;
}
2016-10-05 04:12:46 +00:00
< / style >
2019-01-09 01:21:29 +00:00
< / head >
< body >
2020-07-18 00:36:42 +00:00
< tone-example label = "3D Panning" >
2019-01-09 01:21:29 +00:00
< tone-loader > < / tone-loader >
2020-07-18 00:36:42 +00:00
< div slot = "explanation" >
2016-10-05 04:12:46 +00:00
Tone.Panner3D and Tone.Listener work together to create 3D audio. Connect your synths and sources to Panner3D and then to the master output, anything you connect to the panner will be spatialized according the position of the panner relative to the position of the listener. This example synchronizes the position of the camera with Tone.Listener and the position of each of the spheres with a track.
2019-01-09 01:21:29 +00:00
< br > < br >
Note: the 3D panning effect is more effective with headphones.
2020-07-18 00:36:42 +00:00
< / div >
2016-10-05 04:12:46 +00:00
2020-07-18 00:36:42 +00:00
< div id = "content" >
2019-01-09 01:21:29 +00:00
< tone-play-toggle > < / tone-play-toggle >
2020-07-18 00:36:42 +00:00
< tone-slider
label="x"
id="xSlider"
min="-2"
max="2"
value="0"
>< / tone-slider >
< tone-slider
id="zSlider"
label="z"
min="-2"
max="2"
value="0"
>< / tone-slider >
< tone-slider
id="rotation"
label="rotation"
min="0"
max="6.28"
value="0"
units="rad"
>< / tone-slider >
< / div >
2019-01-09 01:21:29 +00:00
< / tone-example >
2016-10-05 04:12:46 +00:00
2019-01-09 01:21:29 +00:00
< script type = "text/javascript" >
2020-07-18 00:36:42 +00:00
function createPlayerPlusPanner(url, positionX, positionY, positionZ) {
const panner = new Tone.Panner3D({
panningModel: "HRTF",
positionX,
positionY,
positionZ,
}).toDestination();
const player = new Tone.Player({
url,
loop: true,
}).connect(panner).sync().start(0);
}
createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/taps_1c.mp3", 2, 0, 0);
createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/tinkle3.mp3", 0, 0, 2);
createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/tapping1.mp3", -2, 0, 2);
createPlayerPlusPanner("https://tonejs.github.io/audio/berklee/thump1.mp3", -2, 0, -2);
2017-03-26 19:29:53 +00:00
2020-07-19 00:20:19 +00:00
document.querySelector("tone-play-toggle").addEventListener("start", () => Tone.Transport.start());
document.querySelector("tone-play-toggle").addEventListener("stop", () => Tone.Transport.stop());
2020-07-18 00:36:42 +00:00
function setRotation(angle) {
Tone.Listener.forwardX.value = Math.sin(angle);
Tone.Listener.forwardY.value = 0;
Tone.Listener.forwardZ.value = -Math.cos(angle);
2017-03-26 19:29:53 +00:00
}
2020-07-19 18:40:20 +00:00
2020-07-19 00:20:19 +00:00
document.querySelector("#xSlider").addEventListener("input", (e) => Tone.Listener.positionX.value = parseFloat(e.target.value));
document.querySelector("#zSlider").addEventListener("input", (e) => Tone.Listener.positionY.value = parseFloat(e.target.value));
document.querySelector("#rotation").addEventListener("input", (e) => setRotation(parseFloat(e.target.value)));
2020-07-18 00:36:42 +00:00
2016-10-05 04:12:46 +00:00
< / script >
< / style >
< / body >
2017-03-18 16:35:37 +00:00
< / html >
