Изменить баланс влево/вправо при воспроизведении аудио в javascript

Я знаю, что все звуковые материалы html5 очень новые, но есть ли способ изменить баланс левого/правого звука?

Что-то вроде этого:

var snd = new Audio("test.mp3");
snd.balance = -1; // only left
snd.play();

javascript html html5-audio

Community 25.02.2011 источник

comment

Кажется, что баланс каналов вообще не поддерживается в теге html audio. - kirilloid 26.02.2011

Ответы (2)

arrow_upward
3
arrow_downward

С 2021 года это возможно с помощью API веб-аудио. . см. этот ответ для получения дополнительной информации.

Исходный ответ:

В настоящее время это не поддерживается.

Вы можете проверить спецификацию w3c на наличие поддерживаемых свойств и методов. Обратите внимание, что браузеры часто предоставляют больше/меньше или разные вещи. Но в данном случае: ни один браузер не поддерживает изменение баланса звука.

http://dev.w3.org/html5/spec/Overview.html#audio

oberhamsi 26.02.2011

arrow_upward
7
arrow_downward

Это возможно с помощью Audio Web API.

Элемент <audio> — это очень простой инструмент, который позволяет вам только воспроизводить/приостанавливать воспроизведение и изменять громкость. Если вам нужны более сложные операции, вам нужно будет использовать Audio Web API.

Работа Audio Web API заключается в построении графа/цепочки узлов, связанных вместе. С одной стороны, у вас есть источник звука, который может быть аудиофайлом или звуковыми волнами, созданными вами. С другой стороны, у вас есть место назначения звука (аудиоприемник), которое будет вашими компьютерными динамиками / наушниками. Посередине вы можете разместить столько узлов, сколько хотите, для управления звуком. Например, вы можете использовать GainNode для управления громкостью звука или SterioPannerNode для управления балансом левого и правого каналов.

API очень сложный, но просто управлять балансом влево/вправо очень просто:

Шаг 1 - Загрузите источник звука

Во-первых, давайте создадим элемент <audio>, чтобы мы могли загрузить звук. Вам не нужно использовать элемент <audio>, если вы загружаете аудио с помощью запроса XHR или генерируете звук во время выполнения.

<audio src="myCoolTrack.mp3"></audio>

Шаг 2. Аудиоконтекст

Давайте создадим AudioContext и загрузим звук из элемента в объект контекста.

// for legacy browsers
const AudioContext = window.AudioContext || window.webkitAudioContext;

const audioContext = new AudioContext();

// get the audio element
const audioElement = document.querySelector('audio');

// pass it into the audio context
const track = audioContext.createMediaElementSource(audioElement);

Шаг 3 Стерео узел

Давайте создадим StereoPannerNode, который будет управлять балансом

// default pan set to 0 - center
const stereoNode = new StereoPannerNode(audioContext, { pan: 0 });

// change the value of the balance by updating the pan value
stereoNode.pan.value = -1; // left
stereoNode.pan.value = 0; // center
stereoNode.pan.value = 1; // right

Заключительный этап

Соедините все узлы в единый граф/цепочку. С входным узлом (источником звука) и выходным узлом (динамик/наушники). Вы можете добавить больше узлов посередине для других манипуляций со звуком, таких как громкость, фильтрация и т. д.

track.connect(stereoNode).connect(audioContext.destination);

Дополнительное чтение

Полный API: API веб-аудио
Учебное пособие по созданию бумбокса с регуляторами громкости и стерео: Использование API веб-аудио.
Или вы видите рабочую демонстрацию здесь: DEMO.

Дополнительный пример

В этом ответе используется StereoPannerNode, который управляет балансом в одном AudioNode. Но если вы хотите разделить звук и управлять каждым каналом (левым/правым) отдельно, вам понадобятся ChannelSplitterNode и ChannelMergerNode. Полный пример их использования можно найти здесь: https://stackoverflow.com/a/63272648/2658683

Gil Epshtain 31.07.2020