JavaScript:Библиотеки/p5.sound/Класс p5.PeakDetect: различия между версиями

Материал из Онлайн справочника
Перейти к навигацииПерейти к поиску
Нет описания правки
 
Нет описания правки
 
(не показана 1 промежуточная версия этого же участника)
Строка 4: Строка 4:
{{Myagkij-редактор}}
{{Myagkij-редактор}}


{{Черновик}}
 


= Класс p5.PeakDetect <ref>[https://p5js.org/reference/#/p5.PeakDetect p5js.org - p5.PeakDetect]</ref>=
= Класс p5.PeakDetect <ref>[https://p5js.org/reference/#/p5.PeakDetect p5js.org - p5.PeakDetect]</ref>=
Строка 24: Строка 24:
Чтобы использовать эту функцию, нужно подключить библиотеку p5.sound. Для этого в заголовок своего файла «index.html» впишите следующее:
Чтобы использовать эту функцию, нужно подключить библиотеку p5.sound. Для этого в заголовок своего файла «index.html» впишите следующее:


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
<script language="javascript" type="text/javascript" src="path/to/p5.sound.js"></script>
<script language="javascript" type="text/javascript" src="path/to/p5.sound.js"></script>
</syntaxhighlight>
</syntaxhighlight>
Строка 30: Строка 30:
==Синтаксис==
==Синтаксис==


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
new p5.PeakDetect([freq1], [freq2], [threshold], [framesPerPeak])  
new p5.PeakDetect([freq1], [freq2], [threshold], [framesPerPeak])  
</syntaxhighlight>
</syntaxhighlight>
Строка 36: Строка 36:
==Параметры==
==Параметры==


<syntaxhighlight lang="javascript" enclose="div">
<syntaxhighlight lang="javascript">
freq1 – нижняя граница частотного диапазона. По умолчанию – 20 Гц. Тип данных – number
freq1 – нижняя граница частотного диапазона. По умолчанию – 20 Гц. Тип данных – number
freq2 – верхняя граница частотного диапазона. По умолчанию – 20000 Гц. Тип данных – number
freq2 – верхняя граница частотного диапазона. По умолчанию – 20000 Гц. Тип данных – number
Строка 53: Строка 53:
===№1===
===№1===


<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS">
var cnv, soundFile, fft, peakDetect;
var cnv, soundFile, fft, peakDetect;
var ellipseWidth = 10;
var ellipseWidth = 10;
Строка 104: Строка 104:
===№2===
===№2===


<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS">


</syntaxhighlight>
</syntaxhighlight>
Строка 110: Строка 110:
===№3===
===№3===


<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS" enclose="div">
<syntaxhighlight lang="javascript" line="GESHI_NORMAL_LINE_NUMBERS|GESHI_FANCY_LINE_NUMBERS">


</syntaxhighlight>
</syntaxhighlight>

Текущая версия от 13:12, 18 июня 2023

Перевод: Максим Кузьмин
Проверка/Оформление/Редактирование: Мякишев Е.А.



Класс p5.PeakDetect [1]

Описание

Этот класс используется вместе с классом p5.FFT для поиска пиков в спектре частот (во всем спектре или в его части).

Чтобы использовать p5.PeakDetect, вызовите в блоке draw() функцию update() и задайте ей в качестве параметра объект p5.FFT.

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

Параметр threshold – это пороговое значение для определения пиков. Допустимые значения: от «0» до «1». Это логарифмическое значение, поэтому «0.1» – это половина громкости от «1.0».

В параметре framesPerPeak задается, как много циклов должно пройти перед тем, как может быть обнаружен новый пик. К примеру, если количество отсчетов равно «60», то ритм песни с 120 ударами в минуту можно рассчитать при помощи следующего уравнения: framesPerPeak = 60 / (estimatedBPM / 60 ).

Класс p5.PeakDetect основан на примере, созданном @b2renger. По этой ссылке можно почитать статью авторства Феликса Тернера, в которой объясняется, как определять ритм.

Чтобы использовать эту функцию, нужно подключить библиотеку p5.sound. Для этого в заголовок своего файла «index.html» впишите следующее:

<script language="javascript" type="text/javascript" src="path/to/p5.sound.js"></script>

Синтаксис

new p5.PeakDetect([freq1], [freq2], [threshold], [framesPerPeak])

Параметры

freq1  нижняя граница частотного диапазона. По умолчанию  20 Гц. Тип данных  number
freq2  верхняя граница частотного диапазона. По умолчанию  20000 Гц. Тип данных  number
threshold  пороговое значение для определения ритма. Значения варьируются от «0» до «1». Это логарифмические значения, поэтому «0.1»  это половина от громкости «1.0». Значение по умолчанию  «0.35». Тип данных  number
framesPerPeak  количество циклов до определения нового пика. Значение по умолчанию  «20». Тип данных  number

Методы

  • update() – вызывается в блоке draw(). В качестве параметра принимает объект p5.FFT. Перед вызовом функции update() нужно обязательно вызвать функцию analyze() класса p5.FFT, потому что она полагается на результаты выполненного ПБФ-анализа.
  • onPeak() – принимает два параметра: функцию, которая вызывается после обнаружения пика, и значение (опциональное), передаваемое функции при определении пика.


Пример

№1

var cnv, soundFile, fft, peakDetect;
var ellipseWidth = 10;

function setup() {
  background(0);
  noStroke();
  fill(255);
  textAlign(CENTER);

  soundFile = loadSound('assets/beat.mp3');

  // объекту p5.PeakDetect необходим объект p5.FFT:
  fft = new p5.FFT();
  peakDetect = new p5.PeakDetect();

}

function draw() {
  background(0);
  text('click to play/pause', width/2, height/2);
   //  'кликните, чтобы начать проигрывание или поставить на паузу'

  // объект «peakDetect» в качестве параметра
  // принимает результаты анализа, выполненного объектом «fft»:
  fft.analyze();
  peakDetect.update(fft);

  if ( peakDetect.isDetected ) {
    ellipseWidth = 50;
  } else {
    ellipseWidth *= 0.95;
  }

  ellipse(width/2, height/2, ellipseWidth, ellipseWidth);
}

// включение/выключение музыки при клике по холсту:
function mouseClicked() {
  if (mouseX > 0 && mouseX < width && mouseY > 0 && mouseY < height) {
    if (soundFile.isPlaying() ) {
      soundFile.stop();
    } else {
      soundFile.play();
    }
  }
}

№2

№3

См.также

Внешние ссылки