initial commit

1 files changed, 404 insertions, 0 deletions

diff --git a/files/ru/web/guide/audio_and_video_manipulation/index.html b/files/ru/web/guide/audio_and_video_manipulation/index.html
new file mode 100644
index 0000000000..0fc7587321
--- /dev/null
+++ b/files/ru/web/guide/audio_and_video_manipulation/index.html
@@ -0,0 +1,404 @@
+---
+title: Обработка аудио и видео
+slug: Web/Guide/Audio_and_video_manipulation
+tags:
+  - Видео
+  - Медиа
+  - Обучение
+  - Примеры
+  - Рекомендации
+  - аудио
+translation_of: Web/Guide/Audio_and_video_manipulation
+---
+<div class="summary">
+<p>Веб-технологии примечательны тем, что они позволяют использовать различные инструменты в совокупности. Например, можно проводить манипуляции над имеющимися в браузере аудио и видео потоками с помощью {{htmlelement("canvas")}}, <a href="/en-US/docs/Web/WebGL">WebGL</a> или <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>: напрямую изменять аудио и видео, т.е. добавлять эффекты к аудио (реверберацию, компрессор), или к видео (фильтры ч/б, сепия и т.д.). В этой статье рассказывается о том, как это сделать.</p>
+</div>
+
+<div class="note">
+<p><strong>Далее</strong> ещё в процессе перевода.</p>
+</div>
+
+<h2 id="Обработка_видео">Обработка видео</h2>
+
+<p>Иногда удобно перенимать индивидуально размеры кадра в пикселях с каждого конкретного видео.</p>
+
+<h3 id="Видео_и_холст_canvas">Видео и холст (canvas)</h3>
+
+<p>Элемент "холст" ({{htmlelement("canvas")}}) — представляет поверхность (область) для рисования графикой на веб-странице. Это очень мощный инструмент, поэтому он может использоваться совместно с видео.</p>
+
+<p>Обычно это происходит следующим образом:</p>
+
+<ol>
+ <li>Write a frame from the {{htmlelement("video")}} element to an intermediary {{htmlelement("canvas")}} element.</li>
+ <li>Read the data from the intermediary <code>&lt;canvas&gt;</code> element and manipulate it.</li>
+ <li>Write the manipulated data to your "display" <code>&lt;canvas&gt;</code>.</li>
+ <li>Pause and repeat.</li>
+</ol>
+
+<p>For example, let's process a video to display it in greyscale. In this case, we'll show both the source video and the output greyscale frames. Ordinarily, if you were implementing a "play video in greyscale" feature, you'd probably add <code>display: none</code> to the style for the <code>&lt;video&gt;</code> element, to keep the source video from being drawn to the screen while showing only the canvas showing the altered frames.</p>
+
+<h4 id="HTML">HTML</h4>
+
+<p>We can set up our video player and <code>&lt;canvas&gt;</code> element like this:</p>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+
+&lt;canvas id="my-canvas" width="480" height="270"&gt;&lt;/canvas&gt;</pre>
+
+<h4 id="JavaScript">JavaScript</h4>
+
+<p>This code handles altering the frames.</p>
+
+<pre class="brush: js notranslate">var processor = {
+  timerCallback: function() {
+    if (this.video.paused || this.video.ended) {
+      return;
+    }
+    this.computeFrame();
+    var self = this;
+    setTimeout(function () {
+      self.timerCallback();
+    }, 16); // roughly 60 frames per second
+  },
+
+  doLoad: function() {
+    this.video = document.getElementById("my-video");
+    this.c1 = document.getElementById("my-canvas");
+    this.ctx1 = this.c1.getContext("2d");
+    var self = this;
+
+    this.video.addEventListener("play", function() {
+      self.width = self.video.width;
+      self.height = self.video.height;
+      self.timerCallback();
+    }, false);
+  },
+
+  computeFrame: function() {
+    this.ctx1.drawImage(this.video, 0, 0, this.width, this.height);
+    var frame = this.ctx1.getImageData(0, 0, this.width, this.height);
+    var l = frame.data.length / 4;
+
+    for (var i = 0; i &lt; l; i++) {
+      var grey = (frame.data[i * 4 + 0] + frame.data[i * 4 + 1] + frame.data[i * 4 + 2]) / 3;
+
+      frame.data[i * 4 + 0] = grey;
+      frame.data[i * 4 + 1] = grey;
+      frame.data[i * 4 + 2] = grey;
+    }
+    this.ctx1.putImageData(frame, 0, 0);
+
+    return;
+  }
+};  </pre>
+
+<p>Когда страница загрузилась осуществите вызов:</p>
+
+<pre class="brush: js notranslate">processor.doLoad()</pre>
+
+<h4 id="Результат">Результат</h4>
+
+<p>{{EmbedLiveSample("Video_and_canvas", '100%', 580)}}</p>
+
+<p>This is a pretty simple example showing how to manipulate video frames using a canvas. For efficiency, you should consider using {{domxref("Window.requestAnimationFrame", "requestAnimationFrame()")}} instead of <code>setTimeout()</code> when running on browsers that support it.</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Due to potential security issues if your video is on a different domain than your code, you'll need to enable <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS (Cross Origin Resource Sharing)</a> on your video server.</p>
+</div>
+
+<h3 id="Видео_и_WebGL">Видео и WebGL</h3>
+
+<p><a href="/en-US/docs/Web/WebGL">WebGL</a> is a powerful API that uses canvas to draw hardware-accelerated 3D or 2D scenes. You can combine WebGL and the {{htmlelement("video")}} element to create video textures, which means you can put video inside 3D scenes.</p>
+
+<p>{{EmbedGHLiveSample('webgl-examples/tutorial/sample8/index.html', 670, 510) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: You can find the <a href="https://github.com/mdn/webgl-examples/tree/gh-pages/tutorial/sample8">source code of this demo on GitHub</a> (<a href="https://mdn.github.io/webgl-examples/tutorial/sample8/">see it live</a> also).</p>
+</div>
+
+<h3 id="Скорость_воспроизведения">Скорость воспроизведения</h3>
+
+<p>We can also adjust the rate that audio and video plays at using an attribute of the {{htmlelement("audio")}} and {{htmlelement("video")}} element called {{domxref("HTMLMediaElement.playbackRate", "playbackRate")}}. <code>playbackRate</code> is a number that represents a multiple to be applied to the rate of playback, for example 0.5 represents half speed while 2 represents double speed.</p>
+
+<p>Note that the <code>playbackRate</code> property works with both <code>&lt;audio&gt;</code> and <code>&lt;video&gt;</code>, but in both cases, it changes the playback speed but <em>not</em> the pitch. To<span style=""> manipulate the audio's pitch you need to use the Web Audio API. See the {{domxref("AudioBufferSourceNode.playbackRate")}} property.</span></p>
+
+<h4 id="HTML_2">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls
+       src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v"&gt;
+&lt;/video&gt;</pre>
+
+<h4 id="JavaScript_2">JavaScript</h4>
+
+<pre class="brush: js notranslate">var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code" name="Playable_code">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+var myVideo = document.getElementById('my-video');
+myVideo.playbackRate = 2;&lt;/textarea&gt;
+</pre>
+
+<pre class="brush: js notranslate">var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setPlaybackRate() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setPlaybackRate();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setPlaybackRate);
+window.addEventListener('load', setPlaybackRate);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: Попробуйте запустить <a href="http://jsbin.com/qomuvefu/2/edit">этот пример</a>.</p>
+</div>
+
+<h2 id="Обработка_аудио">Обработка аудио</h2>
+
+<p><code>playbackRate</code> aside, to manipulate audio you'll typically use the <a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a>.</p>
+
+<h3 id="Выбор_источника_аудио">Выбор источника аудио</h3>
+
+<p>The Web Audio API can receive audio from a variety of sources, then process it and send it back out to an {{domxref("AudioDestinationNode")}} representing the output device to which the sound is sent after processing.</p>
+
+<table class="standard-table">
+ <thead>
+  <tr>
+   <th scope="col">If the audio source is...</th>
+   <th scope="col">Use this Web Audio node type</th>
+  </tr>
+ </thead>
+ <tbody>
+  <tr>
+   <td>An audio track from an HTML {{HTMLElement("audio")}} or {{HTMLElement("video")}} element</td>
+   <td>{{domxref("MediaElementAudioSourceNode")}}</td>
+  </tr>
+  <tr>
+   <td>A plain raw audio data buffer in memory</td>
+   <td>{{domxref("AudioBufferSourceNode")}}</td>
+  </tr>
+  <tr>
+   <td>An oscillator generating a sine wave or other computed waveform</td>
+   <td>{{domxref("OscillatorNode")}}</td>
+  </tr>
+  <tr>
+   <td>An audio track from <a href="/en-US/docs/Web/API/WebRTC_API">WebRTC</a> (such as the microphone input you can get using {{domxref("MediaDevices.getUserMedia", "getUserMedia()")}}.</td>
+   <td>{{domxref("MediaStreamAudioSourceNode")}}</td>
+  </tr>
+ </tbody>
+</table>
+
+<h3 id="Аудио_фильтры">Аудио фильтры</h3>
+
+<p>The Web Audio API has a lot of different filter/effects that can be applied to audio using the {{domxref("BiquadFilterNode")}}, for example.</p>
+
+<h4 id="HTML_3">HTML</h4>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls
+       src="myvideo.mp4" type="video/mp4"&gt;
+&lt;/video&gt;</pre>
+
+<h4 id="JavaScript_3">JavaScript</h4>
+
+<pre class="brush: js notranslate">var context = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+// Configure filter
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;</pre>
+
+<div class="hidden">
+<h6 id="Playable_code_2" name="Playable_code_2">Playable code</h6>
+
+<pre class="brush: html notranslate">&lt;video id="my-video" controls="true" width="480" height="270" crossorigin="anonymous"&gt;
+  &lt;source src="http://jplayer.org/video/webm/Big_Buck_Bunny_Trailer.webm" type="video/webm"&gt;
+  &lt;source src="http://jplayer.org/video/m4v/Big_Buck_Bunny_Trailer.m4v" type="video/mp4"&gt;
+&lt;/video&gt;
+&lt;div class="playable-buttons"&gt;
+  &lt;input id="edit" type="button" value="Edit" /&gt;
+  &lt;input id="reset" type="button" value="Reset" /&gt;
+&lt;/div&gt;
+&lt;textarea id="code" class="playable-code"&gt;
+filter.type = "lowshelf";
+filter.frequency.value = 1000;
+filter.gain.value = 25;&lt;/textarea&gt;</pre>
+
+<pre class="brush: js notranslate">var context     = new AudioContext(),
+    audioSource = context.createMediaElementSource(document.getElementById("my-video")),
+    filter      = context.createBiquadFilter();
+audioSource.connect(filter);
+filter.connect(context.destination);
+
+var textarea = document.getElementById('code');
+var reset = document.getElementById('reset');
+var edit = document.getElementById('edit');
+var code = textarea.value;
+
+function setFilter() {
+  eval(textarea.value);
+}
+
+reset.addEventListener('click', function() {
+  textarea.value = code;
+  setFilter();
+});
+
+edit.addEventListener('click', function() {
+  textarea.focus();
+})
+
+textarea.addEventListener('input', setFilter);
+window.addEventListener('load', setFilter);
+</pre>
+</div>
+
+<p>{{ EmbedLiveSample('Playable_code_2', 700, 425) }}</p>
+
+<div class="note">
+<p><strong>Примечание</strong>: unless you have <a href="/en-US/docs/Web/HTTP/Access_control_CORS">CORS</a> enabled, to avoid security issues your video should be on the same domain as your code.</p>
+</div>
+
+<h4 id="Типичные_для_аудио_фильтры">Типичные для аудио фильтры</h4>
+
+<p>These are some of the common types of audio filter you can apply:</p>
+
+<ul>
+ <li>Low Pass: Allows frequencies below the cutoff frequency to pass through and attenuates frequencies above the cutoff.</li>
+ <li>High Pass: Allows frequencies above the cutoff frequency to pass through and attenuates frequencies below the cutoff.</li>
+ <li>Band Pass: Allows a range of frequencies to pass through and attenuates the frequencies below and above this frequency range.</li>
+ <li>Low Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the lower frequencies.</li>
+ <li>High Shelf: Allows all frequencies through, but adds a boost (or attenuation) to the higher frequencies.</li>
+ <li>Peaking: Allows all frequencies through, but adds a boost (or attenuation) to a range of frequencies.</li>
+ <li>Notch: Allows all frequencies through, except for a set of frequencies.</li>
+ <li>Allpass: Allows all frequencies through, but changes the phase relationship between the various frequencies.</li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: Более подробно смотрите здесь: {{domxref("BiquadFilterNode")}}</p>
+</div>
+
+<h3 id="Convolutions_and_impulses">Convolutions and impulses</h3>
+
+<p>It's also possible to apply impulse responses to audio using the {{domxref("ConvolverNode")}}. An <strong>impulse response</strong> is the sound created after a brief impulse of sound (like a hand clap). An impulse response will signify the environment in which the impulse was created (for example, an echo created by clapping your hands in a tunnel).</p>
+
+<h4 id="Пример">Пример</h4>
+
+<pre class="brush: js notranslate">var convolver = context.createConvolver();
+convolver.buffer = this.impulseResponseBuffer;
+// Connect the graph.
+source.connect(convolver);
+convolver.connect(context.destination);
+</pre>
+
+<p>See this <a href="https://codepen.io/a2sheppy/pen/JjPgVYL">Codepen</a> for an applied (but very, very silly; like, little kids will giggle kind of silly) example.</p>
+
+<h3 id="Spatial_audio">Spatial audio</h3>
+
+<p>We can also position audio using a <strong>panner node</strong>. A panner node—{{domxref("PannerNode")}}—lets us define a source cone as well as positional and directional elements, all in 3D space as defined using 3D cartesian coordinates.</p>
+
+<h4 id="Пример_2">Пример</h4>
+
+<pre class="brush: js notranslate">var panner = context.createPanner();
+panner.coneOuterGain = 0.2;
+panner.coneOuterAngle = 120;
+panner.coneInnerAngle = 0;
+
+panner.connect(context.destination);
+source.connect(panner);
+source.start(0);
+
+// Position the listener at the origin.
+context.listener.setPosition(0, 0, 0);</pre>
+
+<div class="note">
+<p><strong>Примечание</strong>: You can find an <a href="https://github.com/mdn/webaudio-examples/tree/master/panner-node">example on our GitHub repo</a>sitory (<a href="https://mdn.github.io/webaudio-examples/panner-node/">see it live</a> also).</p>
+</div>
+
+<h2 id="Кодеки_JavaScript">Кодеки JavaScript</h2>
+
+<p>It's also possible to manipulate audio at a low level using JavaScript. This can be useful should you want to create audio codecs.</p>
+
+<p>Libraries currently exist for the following formats :</p>
+
+<ul>
+ <li>AAC: <a href="https://github.com/audiocogs/aac.js">AAC.js</a></li>
+ <li>ALAC: <a href="https://github.com/audiocogs/alac.js">alac.js</a></li>
+ <li>FLAC: <a href="https://github.com/audiocogs/flac.js">flac.js</a></li>
+ <li>MP3: <a href="https://github.com/audiocogs/mp3.js">mp3.js</a></li>
+ <li>Opus: <a href="https://github.com/audiocogs/opus.js">Opus.js</a></li>
+ <li>Vorbis: <a href="https://github.com/audiocogs/vorbis.js">vorbis.js</a></li>
+</ul>
+
+<div class="note">
+<p><strong>Примечание</strong>: At Audiocogs, you can <a href="http://audiocogs.org/codecs/">Try out a few demos</a>; Audiocogs also provides a framework, <a href="http://audiocogs.org/codecs/">Aurora.js</a>, which is intended to help you author your own codecs in JavaScript.</p>
+</div>
+
+<h2 id="Примеры">Примеры</h2>
+
+<ul>
+ <li><a href="https://github.com/mdn/">Various Web Audio API (and other) examples</a></li>
+ <li><a href="https://github.com/chrisdavidmills/threejs-video-cube">THREE.js Video Cube example</a></li>
+ <li><a href="http://chromium.googlecode.com/svn/trunk/samples/audio/convolution-effects.html">Convolution Effects in Real-Time</a></li>
+</ul>
+
+<h2 id="См._также">См. также</h2>
+
+<h3 id="Tutorials">Tutorials</h3>
+
+<ul>
+ <li><a href="/en-US/docs/Web/HTML/Manipulating_video_using_canvas">Manipulating Video Using Canvas</a></li>
+ <li><a href="/en-US/Apps/Build/Manipulating_media/HTML5_playbackRate_explained">HTML5 playbackRate explained</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Web_audio_spatialisation_basics">Web audio spatialisation basics</a></li>
+ <li><a href="/en-US/docs/Web/WebGL/Animating_textures_in_WebGL#Using_the_video_frames_as_a_texture">Using Video frames as a WebGL Texture</a> (You can also the <a href="http://threejs.org">THREE.js</a> WebGL library (and others) to <a href="http://stemkoski.github.io/Three.js/Video.html">achieve this effect</a>)</li>
+ <li><a href="/en-US/docs/Web/WebGL/Animating_textures_in_WebGL">Animating Textures in WebGL</a></li>
+ <li><a href="http://www.html5rocks.com/en/tutorials/webaudio/games/#toc-room">Developing Game Audio with the Web Audio API (Room effects and filters)</a></li>
+</ul>
+
+<h3 id="Reference">Reference</h3>
+
+<ul>
+ <li>The {{htmlelement("audio")}} and {{htmlelement("video")}} elements</li>
+ <li>The {{domxref("HTMLMediaElement")}} API</li>
+ <li>The {{htmlelement("canvas")}} element</li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API">Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/AudioContext">AudioContext</a></li>
+ <li>More info on <a href="/en-US/docs/Web/API/AudioContext.createPanner">Spatial Audio</a></li>
+ <li><a href="/en-US/docs/Web/Media">Web media technologies</a></li>
+</ul>
+
+<div>{{QuickLinksWithSubpages("/en-US/docs/Web/Apps/Fundamentals/")}}</div>
+
+<div></div>