Pan slider outputs different values on change event

[lazzarello]

The pan slider has a property Pan.value that outputs the value of the slider from -1 to 1. The Pan.on('change', function(v() {}) event outputs an object with {value, L, R} keys but Pan.L is undefined.

I was expecting the L and R keys to be defined so I could use them to multiply a volume slider's value to go to two channels. I suspect there is another algorithm to do this with the -1,1 range but the L/R was the most intuitive.

[pendragon-andyh]

Hi @lazzarello

I can't reproduce this. Can you share some code?

[lazzarello]

Here ya go. Open the console and click the button. The value of pan.L is undefined while it is defined within the slider's change event. I may not have articulated my point correctly above.

https://codepen.io/lazzarello/pen/XWdXBqe

My goal is to make a general purpose mixer channel with one volume slider and one pan slider. I'm thinking the volume output value will be something like vol.value * pan.L and vol.value * pan.R but I don't have much experience with how to implement panning so it's all guesswork.

[pendragon-andyh]

The Pan documentation only specifies L and R for the event-object passed to the change event. In your example, you are trying to access undefined properties by those names.

event-object != Pan object.

Options:

1. Maintain your own variables during your pan.on("change", (v) => { ...... }) handler.
2. Plug the value property's value into an instance of the Web Audio StereoPanner node.
3. Use the value property's value to calculate your own values (e.g. using something like this algorithm.

I would probably recommend option 2.

[lazzarello]

Thanks, this makes sense. I'm not sure how to use the values of L and R but I made my own simple panning algorithm.