Всем хамончика! Ничего не искал пока по этому поводу, но стало интересно: возможно ли на JavaScript (чистом, без библиотек и говнофреймворков) изменять частотный диапазон аудио файла? Эдакий аналог эквалайзера. Задавать ширину диапазона начиная от частоты (low pass, high pass, low shelf, high shelf и bell частотные диапазоны) и уровень громкости этого диапазона?
2 ответа
Частотный фильтр для эквалайзера можно создать без библиотек, фреймворков и даже без 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>
А теперь о том, как эти упомянутые эффекты измененя частотного диапазона аудиофайла можно сделать с помощь 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) не только аудиофайл, но и аудиопоток радиостанции.
Web Audio API
, есть статья с примерами, правда на английском css-tricks