waapanner

Panner behaviour.

HTML

<body>1. Choose your Source:
    <br>
    <input disabled="true" type="submit" id="playTone" onclick="playtone()" value="Play Tone (Mono)" />
    <input disabled="true" type="submit" id="playAmbience" onclick="playambience()" value="Play Ambience (Stereo)" />
    <br>
    <br>2. Choose PanningModelType:
    <br>
    <select id="modeltype" onchange="changemodel()">
        <option value="HRTF">HRTF</option>
        <option value="equalpower">equalpower</option>
    </select>
    <br>
    <br>2. Move the slider left and right.
    <br>
    <br>L
    <input type="range" min="-5" max="5" value="0" step="0.1" oninput="pan(this);">R
    <br>
    <output id="rangevalue">0</output>

JavaScript

window.AudioContext = window.AudioContext || window.webkitAudioContext
var c = new AudioContext();
var g = c.createGain();
var p = c.createPanner();
var s;
var toneBuffer;
var ambienceBuffer;

g.gain.value = 0.5;
p.panningModel = "HRTF";

g.connect(p);
p.connect(c.destination);

load('http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Beatles/07%20Revolver/The%20Beatles%20-%20Revolver%20-%2001%20Taxman.mp3', function (buffer) {
    //console.log('tone loaded');
    document.getElementById('playTone').disabled = false;
    toneBuffer = buffer;
});

load('http://hcmaslov.d-real.sci-nnov.ru/public/mp3/Beatles/07%20Revolver/The%20Beatles%20-%20Revolver%20-%2001%20Taxman.mp3', function (buffer) {
    //console.log('ambience loaded');
    document.getElementById('playAmbience').disabled = false;
    ambienceBuffer = buffer;
});

function playtone() {
    if (s) s.stop(0);
    changemodel();
    s = c.createBufferSource();
    s.loop = true;
    s.buffer = toneBuffer;
    s.connect(g);
    s.start(0)
}

function playambience() {
    if (s) s.stop(0);
    changemodel();
    s = c.createBufferSource();
    s.loop = true;
    s.buffer = ambienceBuffer;
    s.connect(g);
    s.start(0)
}

function load(url, successCallback) {
    var request = new XMLHttpRequest();
    request.open('GET', url, true);
    request.responseType = 'arraybuffer';
    request.onload = function () {
        c.decodeAudioData(request.response, successCallback,

        function () {
            console.error('decodeAudioData failed.');
        });
    };
    request.send();
}

function changemodel(){
    var t = document.getElementById("modeltype");
    p.panningModel = t.options[t.selectedIndex].value;
    console.log(t.options[t.selectedIndex].value);
}

function pan(range) {
    v = document.getElementById("rangevalue");
    rangevalue.value = range.value;
    console.log("setting position to :" + range.value + ",0,0");
    p.setPosition(range.value, 0, 0);
}