6

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

2
  • Вам надо рыть в сторону Web Audio API, есть статья с примерами, правда на английском css-tricks 13 апр 2018 в 11:54
  • @SergeyGlazirin Интересная штука. Попробую, спасибо!
    – Eugen Eray
    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
    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) не только аудиофайл, но и аудиопоток радиостанции.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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