Как создать очень простое панорамирование влево/вправо с равной мощностью с помощью createPanner();

Я просматриваю спецификацию API веб-аудио, и узел панорамирования использует три значения для создания трехмерного спектра звука. Мне было интересно, нужно ли программисту для создания базового 2D-паннера «равной мощности» делать шаблонное программирование для масштабирования ... или я слишком много думаю, и есть более простой способ сделать это.

ИЗМЕНИТЬ

Теперь вводится узел стереопаннера.


javascript web-audio-api
person William    schedule 17.01.2013    source источник
comment
Да, новый метод createStereoPanner прекрасно работает. Установите панорамирование левого и правого динамика, используя свойство pan.value узла панорамирования. Используйте любые значения от -1 (полная панорама к левому динамику) до 1 (полная панорама к правому динамику).   -  person d13    schedule 01.04.2015

Ответы (3)


arrow_upward
7
arrow_downward

Я все еще могу получить эффект панорамирования, изменив только первый аргумент на setPosition() и оставив остальные аргументы равными нулю.

<!DOCTYPE html>
<html>
<head>
<script>
var c = new webkitAudioContext();
var s = c.createBufferSource();
var g = c.createGainNode();
var p = c.createPanner();
s.connect(g);
g.connect(p);   
p.connect(c.destination);

function play(e) {
  var fr = new FileReader();
  var file = document.getElementById("file").files[0];
  fr.onload = function(e) {
    c.decodeAudioData(e.target.result, 
      function (buf) {
        s.buffer = buf;
        g.gain.value = 0.5;
        s.noteOn(0)
      },
      function () {
        console.error('decodeAudioData failed.');
      }
    );
  };
  fr.readAsArrayBuffer(file);
}

function pan(range) {
  var x = Math.sin(range.value * (Math.PI / 180));
  p.setPosition(x, 0, 0);
}
</script>
</head>
<body>
  Choose your MP3 file:<br>
  <input type="file" id="file" name="file" /><br>
  <input type="submit" id="go" onclick="play()" value="Play" /><br>
  L<input type="range" min="-45" max="45" value="0" onchange="pan(this);">R
</body>
</html>

Но чтобы получить естественный эффект панорамирования, необходимо указать и третий аргумент.

function pan(range) {
  var xDeg = parseInt(range.value);
  var zDeg = xDeg + 90;
  if (zDeg > 90) {
    zDeg = 180 - zDeg;
  }
  var x = Math.sin(xDeg * (Math.PI / 180));
  var z = Math.sin(zDeg * (Math.PI / 180));
  p.setPosition(x, 0, z);
}
person kuu    schedule 19.01.2013
comment
Короче говоря, вы говорите, что да, вам нужно добавить шаблонное программирование, о котором я упоминал. Если это так, я попробую ваш код и проголосую через несколько дней, если никто не ответит. Спасибо за всю эту работу. Я не ожидал этого. - person William; 20.01.2013
comment
Если вы назовете приведенный выше код шаблонным, ответ — да. Я не знаю другого более простого способа, извините... - person kuu; 20.01.2013

arrow_upward
9
arrow_downward

вот еще более простой (менее шаблонный?) способ добиться 2D-панорамирования:

(полный код здесь)

<input type="range" name="pan" id="pan" min="-1" max="1" step="any" />
<script>
var panner = context.createPanner();
panner.panningModel = 'equalpower';

function pan(event) {
    var x = this.valueAsNumber,
        y = 0,
        z = 1 - Math.abs(x);
    panner.setPosition(x,y,z);
}

document.getElementById('pan').addEventListener(pan);
</script>
person code_monk    schedule 31.12.2013
comment
Просто обратите внимание, что для panningModel должно быть установлено значение equalpower: panner.panningModel = "equalpower"; - person d13; 23.02.2014
comment
технически требуется некоторый триггер, но это поможет. Мой код создает треугольник вокруг слушателя при панорамировании. Полукруг — это то, что нужно создать, чтобы источник всегда находился на расстоянии 1 (1 единица расстояния). Однако в реальном мире разницу было бы очень трудно услышать. - person code_monk; 26.02.2014

arrow_upward
1
arrow_downward

Узел панорамирования по умолчанию использует «HRTF» (Функция передачи, связанная с головой), которая представляет собой механизм стереофонической свертки и предназначена для трехмерного звука.

Чтобы иметь базовые функции панорамирования и меньшее использование ресурсов, вам необходимо установить для атрибута panningModel значение «equalpower».

var panner = context.createPanner();
panner.panningModel = "equalpower";
panner.setPosition(1,0,0);

Дополнительные сведения см. в документации. Детали.

person zya    schedule 19.01.2014
comment
Это создаст только жесткое панорамирование влево/вправо, если только значение z не будет установлено пропорционально в соответствии с решением sean9999: 'panner.setPosition(x, 0, 1-Math.abs(x));' - person d13; 23.02.2014