How to direct sound in p5.js - Binaural sound

Question

I' m try trying to direct the sound, how to direct the sound where the circle is? Taking into account that the circle will have to change position (I would like to replace the opposite sound with a binaural sound, and I don't know if there is an easier way to do it) The code only works on mobile. thanks in andavance.

https://editor.p5js.org/matteomuiafrate1999/sketches/P7XX_n-RS?fbclid=IwAR1D3dGhW_zvqlRuU-_kTAP-mzrg9urKv1bSXu9Qd72WA-Swu6lVHtCwoU8

Answer 1

It's not entirely clear what you are asking, but if you want to adjust how much of a particular sound comes from which channel (Right vs Left) based on spacial arrangement you can use a Panner3D .

 let osc, pan; let playing = false; let direction = 0; function setup() { createCanvas(windowWidth, windowHeight); angleMode(DEGREES); osc = new p5.Oscillator('sine'); osc.freq(261.625565); osc.disconnect(); pan = new p5.Panner3D(); pan.process(osc); pan.setFalloff(Math.min(width, height) / 2, 1); // By default the sound source will be omni-directional pan.panner.coneInnerAngle = 60; pan.panner.coneOuterAngle = 360; // You can also adjust how quite the sound outside the // outer code is with coneOuterGain which defaults to 0 } function doubleClicked() { if (!playing) { playing = true; osc.start(); osc.amp(0.3, 0.1); } else { playing = false; osc.amp(0, 0.1); } } function mouseMoved() { if (pan) { pan.set(mouseX - width / 2, 0, mouseY - height / 2, 0.1); } } function mouseDragged() { mouseMoved(); } function draw() { background(100); circle(width / 2, height / 2, 20); arc(mouseX, mouseY, 40, 40, direction - 20, direction + 20); if (mouseIsPressed) { direction = (direction + 3) % 360; pan.orient(cos(direction), 0, sin(direction), 0.1); } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script>