当前位置：首页 > 编程日记 > 正文

如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音

编程日记 2024-08-10 23:40:00

by _haochuan

通过_haochuan

如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音 (How you can hear both “Yanny” and “Laurel” using the Web Audio API)

Recently an audio clip asking listeners whether they hear the word “Yanny” or “Laurel” has been completely puzzling the world and pitting friend against friend in the online debate.

最近，一个音频片段询问听众是否听到“ Yanny”或“ Laurel”一词，这已经使整个世界迷惑不解，在网上辩论中让朋友与朋友对立。

The clip and the “Yanny or Laurel” poll were posted on Instagram, Reddit, and other sites by high school students who said that it had been recorded from a vocabulary website playing through the speakers on a computer. Now hundreds of thousands of people are engaged in a debate over what they hear. It’s been driving people crazy and leading to passionate defenses on both side.

该剪辑和“ Yanny or Laurel”民意测验由高中生在Instagram，Reddit和其他网站上发布，他们说这是从词汇网站上录制的，是通过计算机上的扬声器播放的。现在，成千上万的人正在就他们所听到的进行辩论。它使人们发疯，并导致双方都充满激情。

However, the magic behind this debate is quite simple. Different ears have different sensitive frequency zones for the same audio clip. Also, different speakers have different responses to different audio frequencies.

但是，这场辩论背后的魔术很简单。 对于相同的音频剪辑，不同的耳朵具有不同的敏感频率区域。 同样，不同的扬声器对不同的音频频率有不同的响应。

This tutorial will go through the details about how to use the Web Audio API and simple JavaScript to create to tool that will help you hear both “Yanny” and “Laurel.” Then you’ll be able to win any of those debates. :)

本教程将详细介绍如何使用Web Audio API和简单JavaScript创建工具，以帮助您听到“ Yanny” 和 “ Laurel”。然后，您将可以赢得所有这些辩论。 :)

If you just want to try the tool, it is live HERE. Just open your browser, play the audio, and try to find the sweet spots for “Yanny” and “Laurel” while moving the frequency slider.

如果您只想尝试使用该工具，请点击这里。只需打开浏览器，播放音频，然后在移动频率滑块的同时尝试找到“ Yanny”和“ Laurel”的最佳位置。

这个怎么运作 (How it works)

Let’s talk about the key part first. In order to hear the different word, you need to somehow increase the volume for a specific frequency range which depends on your ears. Luckily the Web Audio API already has something ready for us: BiquadFilterNode.

让我们先谈谈关键部分。为了听到不同的单词，您需要以某种方式针对特定频率范围增加音量，具体取决于您的耳朵。幸运的是，Web Audio API已经为我们准备了一些东西： BiquadFilterNode 。

There are different types of BiquadFilterNode you can use. For this case, we will just go with the bandpass filter.

您可以使用不同类型的BiquadFilterNode 。对于这种情况，我们将只使用bandpass滤波器。

A bandpass filter is an electronic device or circuit that allows signals between two specific frequencies to pass, but that discriminates against signals at other frequencies. (source)
带通滤波器是一种电子设备或电路，它允许两个特定频率之间的信号通过，但与其他频率的信号有所区别。 ( 来源 )

And for a bandpass filter, most of the time we just need to define the center frequency value we want to boost or cut, instead of the start and the end of the frequency range. We use a Q value to control the width of the frequency range. The larger the Q is, the narrower the frequency range will be. Check out Wikipedia for more details.

对于带通滤波器，大多数情况下，我们只需要定义要提高或降低的中心频率值即可，而不是定义频率范围的起点和终点。我们使用Q值来控制频率范围的宽度。 Q越大，频率范围将越窄。查阅Wikipedia了解更多详细信息。

That’s all the knowledge we need to know at this point. Now, let’s write the code.

这就是我们现在需要知道的所有知识。现在，让我们编写代码。

网络音频API初始化 (Web Audio API Initialization)

const AudioContext = window.AudioContext || window.webkitAudioContext;

const audioContext = new AudioContext();

创建音频节点以及设置和信号链 (Create Audio Nodes along with setup and signal chain)

// 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文件 (Sample HTML file)

<!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="yanny-laurel.wav" controls loop></audio>    <hr>    <input type="range" min="20" max="10000" value="20" step="1" class="slider" id="freqSlider">  </div>  <script src='script.js'></script></body></html>

添加频率滑块UI (Adding frequency slider UI)

To make it easier to adjust the center frequency of our bandpass filter, we should add a slider to control the value.

为了更容易地调整带通滤波器的中心频率，我们应该添加一个滑块来控制该值。

<!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="yanny-laurel.wav" 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='script.js'></script><;/body></html>

iOS Safari中的createMediaElementSource错误 (createMediaElementSource bug in iOS Safari)

I found that createMediaElementSource won't work in iOS Safari and Chrome. To solve this, you have to use createBufferSource to create an AudioBufferNode to store and play the audio instead of the HTML audio tag.Please see the code here for more detail.

我发现createMediaElementSource在iOS Safari和Chrome中不起作用。要解决此问题，您必须使用createBufferSource创建一个AudioBufferNode来存储和播放音频，而不是HTML音频标签。有关更多详细信息，请参见此处的代码。

Now you made yourself a tool so you can hear both “Yanny” and “Laurel.” Just open your browser, play the audio, and try to find the sweet spot while moving the frequency slider.

现在，您已经成为工具，可以同时听到“ Yanny”和“ Laurel”的声音。只需打开浏览器，播放音频，然后尝试在移动频率滑块的同时找到最佳位置。

If you want to just try the tool, it is live HERE.

如果您只想尝试使用该工具，请点击这里。

I write code for audio and web, and play guitar on YouTube. If you want to see more stuff from me or know more about me, you can always find me on:

我编写音频和网络代码，并在YouTube上弹吉他。如果您想从我这里看到更多东西或对我有更多了解，可以随时在以下位置找到我：

Website:https://haochuan.io/

网址： https ： //haochuan.io/

GitHub:https://github.com/haochuan

GitHub： https : //github.com/haochuan

Medium:https://medium.com/@haochuan

媒介： https ： //medium.com/@haochuan

YouTube: https://www.youtube.com/channel/UCNESazgvF_NtDAOJrJMNw0g

YouTube： https ： //www.youtube.com/channel/UCNESazgvF_NtDAOJrJMNw0g

翻译自: https://www.freecodecamp.org/news/how-you-can-hear-both-yanny-and-laurel-using-the-web-audio-api-306051cfcede/

https://www.dkcj.cn/info/13714.html

如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音

如何使用Web Audio API听到“ Yanny”和“ Laurel”的声音 (How you can hear both “Yanny” and “Laurel” using the Web Audio API)

这个怎么运作 (How it works)

网络音频API初始化 (Web Audio API Initialization)

创建音频节点以及设置和信号链 (Create Audio Nodes along with setup and signal chain)

样本HTML文件 (Sample HTML file)

添加频率滑块UI (Adding frequency slider UI)

iOS Safari中的createMediaElementSource错误 (createMediaElementSource bug in iOS Safari)

相关文章：

SCARA——OpenGL入门学习一、二

[.NET] 《Effective C#》快速笔记 - C# 中的动态编程

阿里云https证书apache配置

vue css 应用变量_如何使用CSS Grid和CSS变量快速为应用创建原型

linux--memcache的安装和使用（转）

EF 调试跟踪生成的SQL语句

微信小程序图片自适应宽高比例显示解决方法

初创公司面试要问什么_聘请初创公司的产品设计师时要问的问题

Select Top在不同数据库中的使用

bat+sqlcmd 批量执行脚本

突破微信小程序五层层级限制的解决方案

react-dnd-dom_我如何使用react-dnd和react-flip-move构建React游戏

web应用程序和web网站_Web应用程序和移动应用程序的基本启动清单

javascript禁止修改对象

webpack入门之简单例子跑起来

微信小程序 scroll-view 根据内容的高度自适应

org.hibernate.hibernate.connection.release_mode

添加百度地图最简单的办法

微信小程序的数字有部分会自动加粗的解决方法

ux设计_从UX设计人员的角度来看Microsoft Build 2018

DFS template and summary

linux gcc安装

js中 let var const 的差异和使用场景

bulma.css_如何建立一个？具有Bulma CSS的特斯拉响应页面

hdu 5099 Comparison of Android versions 枚举题意

去除按钮的样式

移动应用程序和网页应用程序_您的移动应用程序运行缓慢的主要原因以及如何修复它...

邮箱验证功能原理语法属性

直接通过OptionalAttribute, DefaultParameterValueAttribute定义缺省参数

微信小程序学习做动画效果