Автор оригинала: FreeCodeCamp Community Member.
_haochuan
Недавно аудио-клип, спрашивающий слушателей, слышит ли они слово «Яння» или «Лорел», было полностью озадачено миром и прикусит друг против друга в интернет-дискуссии.
Клип и опрос «Янди или Лорел» были опубликованы в Instagram, Reddit и другие сайты старшеклассников, которые сказали, что он был записан с веб-каталогового веб-сайта, играя через динамики на компьютере. Сейчас сотни тысяч людей занимаются дебатами над тем, что они слышит. Его сумасшедшие люди ведут к страстным защитам на обеих сторонах.
Однако магия за этими дебатами довольно проста. Различные уши имеют разные чувствительные зоны частоты для одного и того же аудио клипа. Кроме того, разные докладчики имеют разные ответы на разные аудио частоты.
Этот учебник пройдет подробности о том, как использовать веб-аудио API и простой JavaScript для создания инструмента, который поможет вам услышать как «Янди» и “Лорел”. Тогда вы сможете выиграть любой из этих дебатов.:)
Если вы просто хотите попробовать инструмент, он живет Здесь Отказ Просто откройте свой браузер, воспроизведите аудио и попытайтесь найти сладкие пятна для «Янни» и «Лорел», перемещая частоту слайдер.
Как это работает
Давайте сначала поговорим о ключевой части. Чтобы услышать другое слово, вам необходимо как-то увеличить громкость для определенного частотного диапазона, который зависит от ваших ушей. К счастью, веб-аудио API уже есть что-то готовое для нас: Biquadfilternode Отказ
Есть разные виды Biquadfilternode ты можешь использовать. Для этого мы просто пойдем с Bandpass фильтр.
И для полосового фильтра, в большинстве случаев нам просто нужно определить ценное значение центрального частоты, которое мы хотим повысить или вырезать, вместо начала и конца частотного диапазона. Мы используем Q Значение для управления шириной частотного диапазона. Чем больше Q Есть, более узкий частотный диапазон будет. Проверьте Википедию Больше подробностей.
Это все знания, которые нам нужно знать на этом этапе. Теперь напишу код.
Инициализация веб-аудио API
const AudioContext = window.AudioContext || window.webkitAudioContext;
const audioContext = new AudioContext();
Создание аудио узлов вместе с настройкой и цепочкой сигнала
// the audio tag in HTML, where holds the original audio clipconst audioTag = document.getElementById('audioTag');// create audio source in web audio apiconst sourceNode =
audioContext.createMediaElementSource(audioTag);
const filterNode = audioContext.createBiquadFilter();
filterNode.type = 'bandpass'; // bandpass filterfilterNode.frequency.value = 1000 // set the center frequency
// set the gain to the frequency rangefilterNode.gain.value = 100;
// set Q value, 5 will make a fair band width for this casefilterNode.Q.value = 5;
// connect nodessourceNode.connect(filterNode);filterNode.connect(gainNode);gainNode.connect(audioContext.destination);
Образец файла HTML
Yanny vs Laurel Web Audio API
Добавление частоты Slider UI
Чтобы облегчить настроить центральную частоту нашего полосового фильтра, мы должны добавить ползунок для управления значением.
Yanny vs Laurel Web Audio API
Frequency: 1000 Hz
<;/body>CreateMediaElementsource Bug в iOS Safari
Я нашел это CreateMediaElementsource не будет работать в iOS Safari и Chrome. Чтобы решить это, вы должны использовать CreateBuffersource Чтобы создать аудиоуфуфтон для хранения и воспроизведения звука вместо тега HTML Audio. Пожалуйста, смотрите код здесь Для более подробной информации.
Теперь вы сделали сами собой инструмент, чтобы вы могли услышать как «Яння», так и «Лорел». Просто откройте свой браузер, воспроизведите аудио и попытайтесь найти сладкое пятно, перемещая частоту слайдер.
Если вы хотите просто попробовать инструмент, он живет Здесь Отказ
Я пишу код для аудио и веб и играть на гитаре на YouTube. Если вы хотите увидеть больше материала от меня или узнать больше обо мне, вы всегда можете найти меня:
Веб-сайт: https://haochuan.io/
Github: https://github.com/haochuan.
Среда: https://medium.com/@haochuan.
YouTube: https://www.youtube.com/channel/ucnesazgvf_ntdaojrjmnw0g.