6

Всем хамончика! Ничего не искал пока по этому поводу, но стало интересно: возможно ли на JavaScript (чистом, без библиотек и говнофреймворков) изменять частотный диапазон аудио файла? Эдакий аналог эквалайзера. Задавать ширину диапазона начиная от частоты (low pass, high pass, low shelf, high shelf и bell частотные диапазоны) и уровень громкости этого диапазона?

2
  • Вам надо рыть в сторону Web Audio API, есть статья с примерами, правда на английском css-tricks Commented 13 апр. 2018 в 11:54
  • @SergeyGlazirin Интересная штука. Попробую, спасибо!
    – Eugen Eray
    Commented 13 апр. 2018 в 12:13

2 ответа 2

7

Частотный фильтр для эквалайзера можно создать без библиотек, фреймворков и даже без Web Audio API. В основе может лежать алгоритм на примере алгоритма Paul Kellett. В данном случае аудиофайл выбирается на компьютере. Можно задавать частоту выделения и степень резонанса. WebAudioAPI тут используется только для того, чтобы получить исходные семплы выбранного файла, без этого никуда не деться.

Минусы этого примера - успешно обрабатываются в основном маленькие файлы, большие требуют длительного декодирования семплов и тогда может подвиснуть браузер. Обработка происходит не в реальном времени. Код работает пока только со стереоаудиофайлами.

var samples = [[], []]; // массив, в котором будут семплы обработанного аудио
var f = 0.15; // частота выделения (в пределах от 0 до 1) в данном случае около двух килогерц.
var q = 0.95; // степень резонанса (в пределах от 0 до 1)
var volume = 5000; // громкость. нужно подбирать, учитывая подъём выделенной частоты
var titlestring = decodeURIComponent(escape(window.atob("UklGRgAAAABXQVZFZm10IBAAAAABAAIARMKsAAAQwrECAAQAEABkYXRh")));
var title = [];
for(i = 0; i < titlestring.length; i++)title[i] = titlestring.charCodeAt(i);
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var source = audioCtx.createBufferSource();
myfile.onchange = function(){
	var reader = new FileReader();
	reader.readAsArrayBuffer(this.files[0]);
	reader.onload = function(e){
		audioCtx.decodeAudioData(e.target.result, function(buffer){
			var data_L = buffer.getChannelData(0); // получаем исходные семплы
			var data_R = buffer.getChannelData(1); // аудиофайла с помощью Web Audio API
			var buf0 = buf1 = buf2 = buf3 = 0;
			for(i=0; i < data_L.length; i++){
				var fb = q + q / (1.0 - f);
				buf0 += f * (data_L[i] * volume - buf0 + fb * (buf0 - buf1));
				buf1 += f * (buf0 - buf1);
				buf2 += f * (data_R[i] * volume - buf2 + fb * (buf2 - buf3));
				buf3 += f * (buf2 - buf3);
				samples[0][i] = buf1; // получаем уже обработанные семплы
				samples[1][i] = buf3; // аудиофайла без Web Audio API
			}
			var outfile = new Int16Array(title.length / 2 + samples[0].length * 2);
			for(i=0; i < title.length; i += 2)outfile[i / 2] = title[i] + title[i + 1] * 256;
			for(i=0; i < samples[0].length * 2; i++){
				outfile[i * 2 + 44] = samples[0][i];
				outfile[i * 2 + 45] = samples[1][i];
			}
			audio.src = URL.createObjectURL(new Blob([outfile]));
			audio.play(); // играем и наслаждаемся
			audio.currentTime = 0;
		});
	}
}
<audio id=audio controls></audio><br><br>
<input id=myfile type=file>

1
  • Метод тру хардкорщика.
    – Eugen Eray
    Commented 16 апр. 2018 в 14:50
2

А теперь о том, как эти упомянутые эффекты измененя частотного диапазона аудиофайла можно сделать с помощь Web Audio API:

<html><body><center><br />
<audio
	id = audio
	src = "sound.mp3"
	crossorigin = "anonymous"
	onplaying = "if(firststart == true) myfilter()"
	controls>
</audio><br /><br />
Частота выделения: <input type=range onchange="filter.frequency.value = 50 + 70 * this.value" /><br /><br />
Степень резонанса: <input type=range onchange="filter.frequency.Q = this.value / 500" /><br /><br />
 Выберите эффект: 
 <select id=myselect onchange="if(firststart == false) filter.type = this.value">
	<option>lowpass</option> <!--Выделение частоты и отсечение верхней области остальных частот-->
	<option>highpass</option> <!--Выделение частоты и отсечение нижней области остальных частот-->
	<option>lowshelf</option>
	<option>highshelf</option>
	<option>bandpass</option> <!--Выделение частоты и отсечение верхней и нижней областей остальных частот-->
	<option>notch</option> <!--Эффект противоположный выделению частоты - наоборот, завал уровня определённой частоты-->
</select>
<script>
var firststart = true,
audio = document.getElementById('audio');
function myfilter() {
	firststart = false;
	var context = new AudioContext(),
	source = context.createMediaElementSource(audio); // 
	filter = context.createBiquadFilter();
	filter.type = document.getElementById("myselect").value;
	filter.frequency.value = 1000; // изначальная частота выделения
	filter.frequency.Q = 1; // степень резонанса
	source.connect(filter); // соединяем источник со входом фильтра
	filter.connect(context.destination); // соединяем выход фильтра с колоннками
}
</script>

Обратите внимние, что в теге аудио есть атрибут crossorigin = "anonymous", это позволяет свободно подключать в качестве источника аудио (src) не только аудиофайл, но и аудиопоток радиостанции.

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.