path: root/files/ru/web/guide/audio_and_video_manipulation/index.html

---
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">&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">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">processor.doLoad()</pre>

<h4 id="Результат">Результат</h4>

<p>{{EmbedLiveSample("Видео_и_холст_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">&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">var myVideo = document.getElementById('my-video');
myVideo.playbackRate = 2;</pre>

<div class="hidden">
<h6 id="Playable_code">Playable code</h6>

<pre class="brush: html">&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">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">&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">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">Playable code</h6>

<pre class="brush: html">&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">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">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">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>