Как вы можете услышать Янни и Лаурел с помощью Web Audio API

1656612727 kak vy mozhete uslyshat yanni i laurel s pomoshhyu web

от _haochuan

TXfehU5MU1fr-qlKWl2qpd5FF9z5miezeaBm
https://www.highsnobiety.com/p/yanny-versus-laurel-audio-meme

Недавно аудиоклип с вопросом слушателей, слышат ли они слово Янни или Лорел, полностью озадачил мир и противопоставил друга в онлайн-дебатах.

Клип и опрос Янни или Лорел были опубликованы в Instagram, Reddit и других сайтах старшеклассниками, которые сказали, что они были записаны из словарного сайта, который воспроизводился через колонки на компьютере. Сейчас сотни тысяч людей ведут прения о том, что они слышат. Это сводило людей с ума и приводило к страстной защите с обеих сторон.

Однако магия этой дискуссии достаточно проста. Различные уши имеют разные чувствительные частотные зоны для одного аудиоклипа. Кроме того, разные динамики имеют разную реакцию на разные звуковые частоты.

В этом учебнике будет описано, как использовать API веб-аудио и простой JavaScript для создания инструмента, который поможет вам услышать оба «Янне» и «Лорел». Тогда вы сможете выиграть любой из этих дебатов. 🙂

Если вы просто хотите попробовать инструмент, он доступен ЗДЕСЬ. Просто откройте свой браузер, воспроизведите аудио и попробуйте найти лучшие места для Янни и Лаурел, перемещая ползунок частоты.

Как это работает

Сначала поговорим о ключевой части. Чтобы услышать другое слово, вам нужно увеличить громкость для определенного диапазона частот, который зависит от ваших ушей. К счастью, Web Audio API уже имеет что-то готовое для нас: BiquadFilterNode.

Существуют разные виды BiquadFilterNode вы можете использовать. Для этого случая мы просто уйдем с bandpass фильтр.

Полосовой фильтр – это электронное устройство или схема, позволяющая пропускать сигналы между двумя определенными частотами, но дискриминирует сигналы на других частотах. (источник)

А для полосового фильтра, большинство времени нам просто нужно определить значение центральной частоты, которое мы хотим повысить или снизить, вместо начала и конца диапазона частот. Мы используем a Q значение для управления шириной диапазона частот. Чем больше Q тем уже будет диапазон частот. Просмотрите Википедию для более подробной информации.

Это все знания, которые нам нужно знать сейчас. Теперь давайте напишем код.

Инициализация Web Audio 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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Yanny vs Laurel Web Audio API</title></head><body>  <div id="container">    <audio id='audioTag' crossorigin="anonymous" src=" controls loop></audio>    <hr>    <input type="range" min="20" max="10000" value="20" step="1" class="slider" id="freqSlider">  </div>  <script src="https://www.freecodecamp.org/news/how-you-can-hear-both-yanny-and-laurel-using-the-web-audio-api-306051cfcede/script.js"></script></body></html>

Добавление интерфейса ползунка частоты

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

<!DOCTYPE html><html lang="en"><head>  <meta charset="UTF-8">  <title>Yanny vs Laurel Web Audio API</title></head><body>  <div id="container">    <audio id='audioTag' src=" controls loop></audio>    <hr>    <input type="range" min="50" max="4000" value="1000" step="1" class="slider" id="freqSlider">    <br>    <p id="freqLabel" >Frequency: 1000 Hz</p>  </div>  <script>;    // add event listener for slider to change frequency value    slider.addEventListener('input', e => {
      filterNode.frequency.value = e.target.value;      label.innerHTML = `Frequency: ${e.target.value}Hz`;
    }, false);  <script src="https://www.freecodecamp.org/news/how-you-can-hear-both-yanny-and-laurel-using-the-web-audio-api-306051cfcede/script.js"></script><;/body></html>

Ошибка createMediaElementSource в iOS Safari

я нашел это createMediaElementSource не будет работать в iOS Safari и Chrome. Чтобы решить эту проблему, нужно воспользоваться createBufferSource чтобы создать AudioBufferNode для хранения и воспроизведения аудио вместо аудио тега HTML.
Пожалуйста, посмотрите код здесь для более подробной информации.

Теперь вы сделали себе инструмент, чтобы слышать и Янни, и Лорел. Просто откройте браузер, воспроизведите аудио и попробуйте найти лучшее место, перемещая ползунок частоты.

Если вы хотите просто попробовать инструмент, он доступен ЗДЕСЬ.

Я пишу код для аудио и Интернета и играю на гитаре на YouTube. Если вы хотите узнать больше обо мне или узнать больше обо мне, вы всегда можете найти меня на:

Веб-сайт:
https://haochuan.io/

GitHub:
https://github.com/haochuan

Средний:
https://medium.com/@haochuan

YouTube:

Добавить комментарий

Ваш адрес email не будет опубликован.