From 980fe00a74a9ad013b945755415ace2e5429c3c2 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 27 Oct 2021 02:31:24 +0300 Subject: [RU] Remove notranslate (#2874) --- files/ru/web/api/web_audio_api/index.html | 2 +- .../visualizations_with_web_audio_api/index.html | 40 +++++++++++----------- 2 files changed, 21 insertions(+), 21 deletions(-) (limited to 'files/ru/web/api/web_audio_api') diff --git a/files/ru/web/api/web_audio_api/index.html b/files/ru/web/api/web_audio_api/index.html index c79d753428..39b8c5436e 100644 --- a/files/ru/web/api/web_audio_api/index.html +++ b/files/ru/web/api/web_audio_api/index.html @@ -204,7 +204,7 @@ translation_of: Web/API/Web_Audio_API

The Web Audio API lines are highlighted; if you want to find more out about what the different methods, etc. do, have a search around the reference pages.

-
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
+
var audioCtx = new (window.AudioContext || window.webkitAudioContext)(); // define audio context
 // Webkit/blink browsers need prefix, Safari won't work without window.
 
 var voiceSelect = document.getElementById("voice"); // select box for selecting voice effect options
diff --git a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
index 5e035e4eb5..bc81da1a4b 100644
--- a/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
+++ b/files/ru/web/api/web_audio_api/visualizations_with_web_audio_api/index.html
@@ -15,13 +15,13 @@ translation_of: Web/API/Web_Audio_API/Visualizations_with_Web_Audio_API
 
 
Чтобы извлечь данные из вашего источника звука, вам понадобится {{ domxref("AnalyserNode") }}, созданный при помощи метода {{ domxref("AudioContext.createAnalyser()") }}, например:

 
-
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
+
var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
 var analyser = audioCtx.createAnalyser();
 

 
 
Затем этот узел подключается к вашему источнику звука где-то между получением звука и его обработкой, например:

 
-
source = audioCtx.createMediaStreamSource(stream);
+
source = audioCtx.createMediaStreamSource(stream);
 source.connect(analyser);
 analyser.connect(distortion);
 distortion.connect(audioCtx.destination);

@@ -42,13 +42,13 @@ distortion.connect(audioCtx.destination);

 
 
Например, если параметр AnalyserNode.fftSize установлен на 2048, мы возвращаем значение {{ domxref("AnalyserNode.frequencyBinCount") }}, равное половине fft, затем вызываем Uint8Array() с frequencyBinCount в качестве длины — столько измерений мы произведём для данного размера fft.

 
-
analyser.fftSize = 2048;
+
analyser.fftSize = 2048;
 var bufferLength = analyser.frequencyBinCount;
 var dataArray = new Uint8Array(bufferLength);

 
 
Чтобы собрать данные и копировать их в массив, мы вызываем подходящий метод сбора данных, с массивом в качестве аргумента. Например:

 
-
analyser.getByteTimeDomainData(dataArray);

+
analyser.getByteTimeDomainData(dataArray);

 
 
Теперь в массиве хранятся данные, описывающие звук в данный момент времени, и мы можем визуализировать их любым удобным образом, например с помощью холста HTML5: {{ htmlelement("canvas") }}.

 
@@ -58,46 +58,46 @@ var dataArray = new Uint8Array(bufferLength);

 
 
Чтобы визуализировать осциллограф (спасибо Soledad Penadés за код в Voice-change-O-matic), мы сначала следуем шаблону, описанному в предыдущей секции, для создания буфера:

 
-
analyser.fftSize = 2048;
+
analyser.fftSize = 2048;
 var bufferLength = analyser.frequencyBinCount;
 var dataArray = new Uint8Array(bufferLength);

 
 
Затем, мы очищаем холст:

 
-
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

+
canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

 
 
И определяем функцию draw():

 
-
function draw() {

+
function draw() {

 
 
Здесь мы используем requestAnimationFrame() чтобы многократно вызывать эту функцию:

 
-
      drawVisual = requestAnimationFrame(draw);

+
      drawVisual = requestAnimationFrame(draw);

 
 
Затем мы копируем данные в наш массив:

 
-
      analyser.getByteTimeDomainData(dataArray);

+
      analyser.getByteTimeDomainData(dataArray);

 
 
Устанавливаем заливку холста

 
-
      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
+
      canvasCtx.fillStyle = 'rgb(200, 200, 200)';
       canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

 
 
Затем устанавливаем ширину линий и цвет волны, которую мы хотим нарисовать, и начинаем рисовать путь

 
-
      canvasCtx.lineWidth = 2;
+
      canvasCtx.lineWidth = 2;
       canvasCtx.strokeStyle = 'rgb(0, 0, 0)';
 
       canvasCtx.beginPath();

 
 
Мы определяем ширину каждого отрезка в линии, деля длину холста на длину массива (равную FrequencyBinCount), затем определяем переменную x, задающую позицию, в которую необходимо перенести каждый отрезок.

 
-
      var sliceWidth = WIDTH * 1.0 / bufferLength;
+
      var sliceWidth = WIDTH * 1.0 / bufferLength;
       var x = 0;

 
 
В цикле, мы задаём позицию небольшого отрезка волны для каждой точки в буфере на высоте, основанной на значении массива в этой точке, а затем перемещаем линию туда, где должен быть нарисован следующий отрезок:

 
-
      for(var i = 0; i < bufferLength; i++) {
+
      for(var i = 0; i < bufferLength; i++) {
 
         var v = dataArray[i] / 128.0;
         var y = v * HEIGHT/2;
@@ -113,13 +113,13 @@ var dataArray = new Uint8Array(bufferLength);

 
 
Наконец, мы заканчиваем линию в середине правой стороны холста и рисуем, используя установленные цвет и ширину линий:

 
-
      canvasCtx.lineTo(canvas.width, canvas.height/2);
+
      canvasCtx.lineTo(canvas.width, canvas.height/2);
       canvasCtx.stroke();
     };

 
 
В конце концов, мы вызываем функцию draw() , запускающую весь процесс:

 
-
    draw();

+
    draw();

 
 
Мы получаем изображение волны, обновляющееся несколько раз в секунду:

 
@@ -131,7 +131,7 @@ var dataArray = new Uint8Array(bufferLength);

 
 
Сначала мы снова создаём анализатор и массив для данных, затем очищаем холст при помощи clearRect(). Единственное отличие от того, что мы делали раньше - ы том, что мы можем установить намного меньший размер fft. Таким образом, каждый столбец в диаграмме будет выглядеть как столбец, а не как тонкая полоска.

 
-
    analyser.fftSize = 256;
+
    analyser.fftSize = 256;
     var bufferLength = analyser.frequencyBinCount;
     console.log(bufferLength);
     var dataArray = new Uint8Array(bufferLength);
@@ -140,7 +140,7 @@ var dataArray = new Uint8Array(bufferLength);

 
 
Затем мы запускаем функцию draw()  и задаём цикл при помощи requestAnimationFrame() таким образом, чтобы в каждом кадре анимации данные обновлялись.

 
-
    function draw() {
+
    function draw() {
       drawVisual = requestAnimationFrame(draw);
 
       analyser.getByteFrequencyData(dataArray);
@@ -152,7 +152,7 @@ var dataArray = new Uint8Array(bufferLength);

 
 
Мы также устанавливаем значение переменных barHeight и x , задающей то, где на холсте должен быть размещён каждый столбец.

 
-
      var barWidth = (WIDTH / bufferLength) * 2.5;
+
      var barWidth = (WIDTH / bufferLength) * 2.5;
       var barHeight;
       var x = 0;

 
@@ -160,7 +160,7 @@ var dataArray = new Uint8Array(bufferLength);

 
 
Одна переменная, требующая объяснения, - это вертикальный сдвиг, с которым мы рисуем каждый столбец: HEIGHT-barHeight/2. Это делается для того, чтобы столбцы начинались в нижней части холста, а не в верхней, как было бы, если бы вертикальное положение было установлена в 0 0. Поэтому мы каждый раз устанавливаем вертикальное положение в разность высоты холста и barHeight/2, чтобы столбцы начинались где-то между верхом и низом холста и заканчивались снизу.

 
-
      for(var i = 0; i < bufferLength; i++) {
+
      for(var i = 0; i < bufferLength; i++) {
         barHeight = dataArray[i]/2;
 
         canvasCtx.fillStyle = 'rgb(' + (barHeight+100) + ',50,50)';
@@ -172,7 +172,7 @@ var dataArray = new Uint8Array(bufferLength);

 
 
Снова, мы вызываем функцию draw() в конце кода, чтобы запустить процесс.

 
-
    draw();

+
    draw();

 
 
Этот код даёт нам следующий результат:

 
-- 
cgit v1.2.3-54-g00ecf