initial commit

6 files changed, 666 insertions, 0 deletions

diff --git a/files/zh-cn/web/api/mediarecorder/audiobitspersecond/index.html b/files/zh-cn/web/api/mediarecorder/audiobitspersecond/index.html
new file mode 100644
index 0000000000..5dafa0aff3
--- /dev/null
+++ b/files/zh-cn/web/api/mediarecorder/audiobitspersecond/index.html
@@ -0,0 +1,39 @@
+---
+title: MediaRecorder.audioBitsPerSecond
+slug: Web/API/MediaRecorder/audioBitsPerSecond
+translation_of: Web/API/MediaRecorder/audioBitsPerSecond
+---
+<p>{{SeeCompatTable}}{{APIRef("MediaStream Recording")}}</p>
+
+<p><span class="seoSummary"><strong><code>audioBitsPerSecond</code></strong>  {{domxref("MediaRecorder")}} 接口的只读属性. 它返回录制器所使用的音频编码码率.</span> 或许与构造函数中指定的比特率有些不同 (如果调用构造函数的时候有指定).</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var audioBitsPerSecond = MediaRecorder.audioBitsPerSecond</pre>
+
+<h3 id="值">值</h3>
+
+<p> {{jsxref("Number")}} (无符号长整型).</p>
+
+<h2 id="说明">说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Recording','#dom-mediarecorder-audiobitspersecond','audioBitsPerSecond')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder.audioBitsPerSecond")}}</p>
diff --git a/files/zh-cn/web/api/mediarecorder/index.html b/files/zh-cn/web/api/mediarecorder/index.html
new file mode 100644
index 0000000000..9f233604bc
--- /dev/null
+++ b/files/zh-cn/web/api/mediarecorder/index.html
@@ -0,0 +1,256 @@
+---
+title: MediaRecorder
+slug: Web/API/MediaRecorder
+translation_of: Web/API/MediaRecorder
+---
+<div>{{APIRef("Media Recorder API")}}</div>
+
+<p><strong><code>MediaRecorder</code></strong> 是 <a href="/en-US/docs/Web/API/MediaStream_Recording_API">MediaStream Recording API</a> 提供的用来进行媒体轻松录制的接口, 他需要通过调用 {{domxref("MediaRecorder.MediaRecorder", "MediaRecorder()")}} 构造方法进行实例化.</p>
+
+<h2 id="构造函数">构造函数</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.MediaRecorder()")}}</dt>
+ <dd>    创建一个新的<code>MediaRecorder</code>对象,对指定的{{domxref("MediaStream")}} 对象进行录制,支持的配置项包括设置容器的MIME 类型 (例如<code>"video/webm"</code> 或者 <code>"video/mp4"</code>)和音频及视频的码率或者二者同用一个码率</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="配置项">配置项</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.mimeType")}} {{readonlyInline}}</dt>
+ <dd>    返回 <code>MediaRecorder</code> 对象创建时选择器选择的录制容器的 MIME type</dd>
+ <dt>{{domxref("MediaRecorder.state")}} {{readonlyInline}}</dt>
+ <dd>    返回录制对象<code>MediaRecorder</code>  的当前状态(闲置中,录制中或者暂停 ) (<code>inactive</code>, <code>recording</code>, or <code>paused</code>.)</dd>
+ <dt>{{domxref("MediaRecorder.stream")}} {{readonlyInline}}</dt>
+ <dd>    返回录制器对象 <code>MediaRecorder </code>创建时构造函数传入的stream对象</dd>
+ <dd></dd>
+ <dt>{{domxref("MediaRecorder.ignoreMutedMedia")}}</dt>
+ <dd></dd>
+ <dd>    用以指定 <code>MediaRecorder</code>是否录制无声的输入源. 如果这个属性是false. 录制器对象<code>MediaRecorder</code>  会录制无声的音频或者黑屏的视频, 默认值是false</dd>
+ <dd></dd>
+ <dt>{{domxref("MediaRecorder.videoBitsPerSecond")}} {{readonlyInline}}</dt>
+ <dd>返回视频采用的编码比率. 它可能和构造函数的设置比率不同.  (if it was provided).</dd>
+ <dt>{{domxref("MediaRecorder.audioBitsPerSecond")}} {{readonlyInline}}</dt>
+ <dd>返回音频采用的编码比率,它可能和构造函数中设置的比率不同. (if it was provided).</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="方法">方法</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.canRecordMimeType()", "MediaRecorder.isTypeSupported()")}}</dt>
+ <dd>返回一个{{domxref("Boolean")}} 值,来表示设置的MIME type 是否被当前用户的设备支持.</dd>
+ <dt>{{domxref("MediaRecorder.pause()")}}</dt>
+ <dd>暂停媒体录制</dd>
+ <dt>{{domxref("MediaRecorder.requestData()")}}</dt>
+ <dd>请求一个从开始到当前接收到的,存储为{{domxref("Blob")}}类型的录制内容. (或者是返回从上一次调用<code>requestData()</code> 方法之后到现在的内容).  调用这个方法后,录制将会继续进行,但是会创建一个新的<code>Blob</code>对象</dd>
+ <dt>{{domxref("MediaRecorder.resume()")}}</dt>
+ <dd>继续录制之前被暂停的录制动作.</dd>
+ <dt>{{domxref("MediaRecorder.start()")}}</dt>
+ <dd>开始录制媒体,这个方法调用时可以通过给<code>timeslice</code>参数设置一个毫秒值,如果设置这个毫秒值,那么录制的媒体会按照你设置的值进行分割成一个个单独的区块, 而不是以默认的方式录制一个非常大的整块内容.</dd>
+ <dt>{{domxref("MediaRecorder.stop()")}}</dt>
+ <dd>停止录制. 同时触发{{event("dataavailable")}}事件,返回一个存储<code>Blob</code>内容的录制数据.之后不再记录</dd>
+ <dd></dd>
+</dl>
+
+<h2 id="静态方法">静态方法</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.isTypeSupported()")}}</dt>
+ <dd>静态方法，判断给定的MIME类型是否支持。返回{{domxref("Boolean")}}类型的值。</dd>
+ <dt></dt>
+</dl>
+
+<h2 id="事件处理">事件处理</h2>
+
+<dl>
+ <dt>{{domxref("MediaRecorder.ondataavailable")}}</dt>
+ <dd>调用它用来处理 {{event("dataavailable")}} 事件, 该事件可用于获取录制的媒体资源 (在事件的 <code>data</code> 属性中会提供一个可用的 {{domxref("Blob")}} 对象.)</dd>
+ <dt>{{domxref("MediaRecorder.onerror")}}</dt>
+ <dd>An {{domxref("EventHandler")}} called to handle the {{event("recordingerror")}} event, including reporting errors that arise with media recording. These are fatal errors that stop recording.</dd>
+ <dt>{{domxref("MediaRecorder.onpause")}}</dt>
+ <dd>用来处理 {{event("pause")}} 事件, 该事件在媒体暂停录制时触发（{{domxref("MediaRecorder.pause()")}}）.</dd>
+ <dt>{{domxref("MediaRecorder.onresume")}}</dt>
+ <dd>用来处理 {{event("resume")}} 事件, 该事件在暂停后回复录制视频时触发（{{domxref("MediaRecorder.resume()")}}）.</dd>
+ <dt>{{domxref("MediaRecorder.onstart")}}</dt>
+ <dd>用来处理 {{event("start")}} 事件, 该事件在媒体开始录制时触发（{{domxref("MediaRecorder.start()")}}）.</dd>
+ <dt>{{domxref("MediaRecorder.onstop")}}</dt>
+ <dd>用来处理 {{event("stop")}} 事件, 该事件会在媒体录制结束时、媒体流（{{domxref("MediaStream")}}）结束时、或者调用{{domxref("MediaRecorder.stop()")}} 方法后触发.</dd>
+</dl>
+
+<h2 id="事件">事件</h2>
+
+<p>Listen to these events using <code>addEventListener()</code> or by assigning an event listener to the <code>on<em>eventname</em></code> property of this interface.</p>
+
+<dl>
+ <dt><code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/error_event">error</a></code></dt>
+ <dd>Fired when an error occurs: for example because recording wasn't allowed or was attempted using an unsupported codec.<br>
+ Also available via the <code><a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/MediaRecorder/onerror">onerror</a></code> property.</dd>
+ <dt></dt>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<pre>if (navigator.mediaDevices) {
+  console.log('getUserMedia supported.');
+
+  var constraints = { audio: true };
+  var chunks = [];
+
+  navigator.mediaDevices.getUserMedia(constraints)
+  .then(function(stream) {
+
+    var mediaRecorder = new MediaRecorder(stream);
+
+    visualize(stream);
+
+    record.onclick = function() {
+      mediaRecorder.start();
+      console.log(mediaRecorder.state);
+      console.log("recorder started");
+      record.style.background = "red";
+      record.style.color = "black";
+    }
+
+    stop.onclick = function() {
+      mediaRecorder.stop();
+      console.log(mediaRecorder.state);
+      console.log("recorder stopped");
+      record.style.background = "";
+      record.style.color = "";
+    }
+
+    mediaRecorder.onstop = function(e) {
+      console.log("data available after MediaRecorder.stop() called.");
+
+      var clipName = prompt('Enter a name for your sound clip');
+
+      var clipContainer = document.createElement('article');
+      var clipLabel = document.createElement('p');
+      var audio = document.createElement('audio');
+      var deleteButton = document.createElement('button');
+
+      clipContainer.classList.add('clip');
+      audio.setAttribute('controls', '');
+      deleteButton.innerHTML = "Delete";
+      clipLabel.innerHTML = clipName;
+
+      clipContainer.appendChild(audio);
+      clipContainer.appendChild(clipLabel);
+      clipContainer.appendChild(deleteButton);
+      soundClips.appendChild(clipContainer);
+
+      audio.controls = true;
+      var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+      chunks = [];
+      var audioURL = URL.createObjectURL(blob);
+      audio.src = audioURL;
+      console.log("recorder stopped");
+
+      deleteButton.onclick = function(e) {
+        evtTgt = e.target;
+        evtTgt.parentNode.parentNode.removeChild(evtTgt.parentNode);
+      }
+    }
+
+    mediaRecorder.ondataavailable = function(e) {
+      chunks.push(e.data);
+    }
+  })
+  .catch(function(err) {
+    console.log('The following error occured: ' + err);
+  })
+}
+
+</pre>
+
+<div class="note">
+<p>This code sample is inspired by the Web Dictaphone demo. Some lines have been omitted for brevity; <a href="https://github.com/mdn/web-dictaphone/">refer to the source</a> for the complete code.</p>
+</div>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#MediaRecorderAPI")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+<p>{{CompatibilityTable}}</p>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>Feature</th>
+   <th>Android Webview</th>
+   <th>Chrome for Android</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Phone</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+  </tr>
+  <tr>
+   <td>Basic support</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatChrome(47.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>1.3<sup>[1]</sup></td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<ul>
+ <li>[1] The initial Firefox OS implementation only supported audio recording.</li>
+</ul>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Using the MediaRecorder API</a></li>
+ <li><a href="https://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API/Recording_a_media_element">Recording a media element</a></li>
+ <li><a href="https://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("navigator.mediaDevices.getUserMedia")}}</li>
+ <li><a href="https://www.fingerspell.org/">FingerSpell</a>: Sign Language Fingerspelling practice using MediaDevices and the MediaStream Recording API to create and download recordings, MediaRecorder API supported desktop browsers only (<a href="https://github.com/chrisjohndigital/CameraCaptureJS">source on GitHub</a>)</li>
+</ul>
diff --git a/files/zh-cn/web/api/mediarecorder/istypesupported/index.html b/files/zh-cn/web/api/mediarecorder/istypesupported/index.html
new file mode 100644
index 0000000000..5a3ea6858c
--- /dev/null
+++ b/files/zh-cn/web/api/mediarecorder/istypesupported/index.html
@@ -0,0 +1,126 @@
+---
+title: MediaRecorder.isTypeSupported
+slug: Web/API/MediaRecorder/isTypeSupported
+tags:
+  - API
+  - Audio
+  - Media
+  - Method
+  - Reference
+  - Video
+translation_of: Web/API/MediaRecorder/isTypeSupported
+---
+<p>{{APIRef("MediaStream Recording")}}</p>
+
+<p> <strong><code>MediaRecorder.isTypeSupported()</code></strong>方法会判断其 MIME 格式能否被客户端录制。</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var canRecord = <em>MediaRecorder</em>.<strong><code>isTypeSupported</code></strong>(<em>mimeType</em>)</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code>mimeType</code></dt>
+ <dd>需要检查的MIME 格式</dd>
+</dl>
+
+<h3 id="返回值">返回值</h3>
+
+<p>如果 {{domxref("MediaRecorder")}} 在浏览器上的具体实现能够支持指定MIME类型的 {{domxref("Blob")}} 对象就返回true. 如果没有足够的资源来支持录制和编码任务,最终录制依然会失败. 如果返回结果是false, 用户的浏览器就无法录制指定的格式.</p>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">var types = ["video/webm",
+             "audio/webm",
+             "video/webm\;codecs=vp8",
+             "video/webm\;codecs=daala",
+             "video/webm\;codecs=h264",
+             "audio/webm\;codecs=opus",
+             "video/mpeg"];
+
+for (var i in types) {
+  console.log( "Is " + types[i] + " supported? " + (MediaRecorder.isTypeSupported(types[i]) ? "Maybe!" : "Nope :("));
+}
+</pre>
+
+<h2 id="规格说明">规格说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">具体格式</th>
+   <th scope="col">状态</th>
+   <th scope="col">注释</th>
+  </tr>
+  <tr>
+   <td>{{SpecName('MediaStream Recording', '#dom-mediarecorder-istypesupported', 'isTypeSupported()')}}</td>
+   <td>{{Spec2('MediaStream Recording')}}</td>
+   <td>Initial definition.</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器的支持情况">浏览器的支持情况</h2>
+
+<div>{{CompatibilityTable}}</div>
+
+<div id="compat-desktop">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>名称</th>
+   <th>Chrome</th>
+   <th>Firefox (Gecko)</th>
+   <th>Internet Explorer</th>
+   <th>Opera</th>
+   <th>Safari (WebKit)</th>
+  </tr>
+  <tr>
+   <td>基本支持</td>
+   <td>ibenompatChrome(47.0)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<div id="compat-mobile">
+<table class="compat-table">
+ <tbody>
+  <tr>
+   <th>名称</th>
+   <th>Android</th>
+   <th>Android Webview</th>
+   <th>Firefox Mobile (Gecko)</th>
+   <th>Firefox OS</th>
+   <th>IE Mobile</th>
+   <th>Opera Mobile</th>
+   <th>Safari Mobile</th>
+   <th>Chrome for Android</th>
+  </tr>
+  <tr>
+   <td>基本支持</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatNo}}</td>
+   <td>{{CompatChrome(47)}}</td>
+   <td>{{CompatGeckoDesktop("25.0")}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatUnknown}}</td>
+   <td>{{CompatChrome(47.0)}}</td>
+  </tr>
+ </tbody>
+</table>
+</div>
+
+<h2 id="看过这个的用户还浏览了以下内容：">看过这个的用户还浏览了以下内容：</h2>
+
+<ul>
+ <li><a href="https://developer.mozilla.org/en-US/docs/Web/API/ServiceWorker_API/Using_Service_Workers">Using Service Workers</a></li>
+ <li>{{domxref("MediaStreamTrack")}}</li>
+ <li>{{domxref("MediaStream")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/mediarecorder/mediarecorder/index.html b/files/zh-cn/web/api/mediarecorder/mediarecorder/index.html
new file mode 100644
index 0000000000..6dd2991683
--- /dev/null
+++ b/files/zh-cn/web/api/mediarecorder/mediarecorder/index.html
@@ -0,0 +1,90 @@
+---
+title: MediaRecorder()
+slug: Web/API/MediaRecorder/MediaRecorder
+translation_of: Web/API/MediaRecorder/MediaRecorder
+---
+<div>{{APIRef("MediaStream Recording")}}</div>
+
+<p> <strong><code>MediaRecorder()</code></strong> 构造函数会创建一个对指定的 {{domxref("MediaStream")}} 进行录制的 {{domxref("MediaRecorder")}} 对象</p>
+
+<h2 id="语法">语法</h2>
+
+<pre class="syntaxbox">var <em>mediaRecorder</em> = new MediaRecorder(<em>stream</em>[, <em>options</em>]);</pre>
+
+<h3 id="参数">参数</h3>
+
+<dl>
+ <dt><code><strong>stream</strong></code></dt>
+ <dd>{{domxref("MediaStream")}} 将要录制的流. 它可以是来自于使用 {{domxref("MediaDevices.getUserMedia", "navigator.mediaDevices.getUserMedia()")}} 创建的流或者来自于 {{HTMLElement("audio")}}, {{HTMLElement("video")}} 以及 {{HTMLElement("canvas")}} DOM元素.</dd>
+ <dt>
+ <p><strong><code>options</code> </strong>{{optional_inline}}</p>
+ </dt>
+ <dd>
+ <p>一个字典对象,它可以包含下列属性:</p>
+
+ <ul>
+  <li><code>mimeType</code>: 为新构建的 <code>MediaRecorder</code> 指定录制容器的MIME类型. 在应用中通过调用 {{domxref("MediaRecorder.isTypeSupported()")}} 来检查浏览器是否支持此种<code>mimeType</code> .</li>
+  <li><code>audioBitsPerSecond</code>: 指定音频的比特率.</li>
+  <li><code>videoBitsPerSecond</code>: 指定视频的比特率.</li>
+  <li><code>bitsPerSecond</code>: 指定音频和视频的比特率. 此属性可以用来指定上面两个属性. 如果上面两个属性只有其中之一和此属性被指定, 则此属性可以用于设定另外一个属性.</li>
+ </ul>
+
+ <div class="note">
+ <p>如果视频和/或音频的比特率没有指定, 视频默认采用的比特率是2.5Mbps, 但音频的默认比特率并不固定, 音频的默认比特率根据采样率和轨道数自适应.</p>
+ </div>
+ </dd>
+</dl>
+
+<h2 id="例子">例子</h2>
+
+<p>此例展示了如果对指定的流创建一个音频比特率为128kbps,视频比特率为2.5Mbps的媒体录制器. 被录制的媒体数据会以MP4格式封装(因此你若获取这些媒体数据片段,并存放到磁盘上去,你就会得到一个mp4文件).</p>
+
+<pre class="brush: js">...
+<code class="language-html">
+
+if (navigator.mediaDevices.getUserMedia) {
+  var constraints = { audio: true, video: true };
+  var chunks = [];
+
+  </code>var onSuccess = function(stream) {
+    var options = {
+      audioBitsPerSecond : 128000,
+      videoBitsPerSecond : 2500000,
+      mimeType : 'video/mp4'
+    }
+    var mediaRecorder = new MediaRecorder(stream,options);
+    m = mediaRecorder;
+
+...</pre>
+
+<h2 id="说明">说明</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性">浏览器兼容性</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder.MediaRecorder")}}</p>
+
+<h2 id="更多信息">更多信息</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Using the MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.mediaDevices.getUserMedia()")}}</li>
+</ul>
diff --git a/files/zh-cn/web/api/mediarecorder/ondataavailable/index.html b/files/zh-cn/web/api/mediarecorder/ondataavailable/index.html
new file mode 100644
index 0000000000..0fd81b1a49
--- /dev/null
+++ b/files/zh-cn/web/api/mediarecorder/ondataavailable/index.html
@@ -0,0 +1,80 @@
+---
+title: MediaRecorder.ondataavailable
+slug: Web/API/MediaRecorder/ondataavailable
+translation_of: Web/API/MediaRecorder/ondataavailable
+---
+<p><font><font>{{APIRef("MediaStream Recording")}}</font></font></p>
+
+<p><strong><code>MediaRecorder.ondataavailable </code></strong><font><font>事件处理程序(</font></font>part of the <a href="/en-US/docs/Web/API/MediaStream_Recording_API"><font><font>MediaStream记录API</font></font></a><font><font>)处理{{</font></font>event("<font><font>dataavailable")}}事件，让您在响应运行代码{{domxref("</font></font>Blob<font><font>")}}数据被提供使用。</font></font></p>
+
+<p><code>dataavailable</code><font><font>当MediaRecorder将媒体数据传递到您的应用程序以供使用时，将触发</font><font>该</font><font>事件。</font><font>数据在包含数据的{{domxref("Blob")}}对象中提供。</font><font>这在四种情况下发生：</font></font></p>
+
+<ul>
+ <li><font><font>媒体流结束时，所有尚未传递到</font></font><code>ondataavailable</code><font><font>处理程序的</font><font>媒体数据都将在单个{{domxref("Blob")}}中传递。</font></font></li>
+ <li><font><font>当调用{{domxref("MediaRecorder.stop()")}}时，自记录开始或</font></font><code>dataavailable</code><font><font>事件</font><font>最后一次</font><font>发生</font><font>以来已捕获的所有媒体数据</font><font>都将传递到{{domxref("Blob")}}}中；</font><font>此后，捕获结束。</font></font></li>
+ <li><font><font>调用{{domxref("MediaRecorder.requestData()")}} </font></font><code>dataavailable</code><font><font>时，将传递</font><font>自记录开始或</font><font>事件</font><font>最后一次</font><font>发生</font><font>以来捕获的所有媒体数据</font><font>；</font><font>然后</font></font><code>Blob</code><font><font>创建</font><font>一个新文件</font><font>，并将媒体捕获继续到该blob中。</font></font></li>
+ <li><font><font>如果将</font></font><code>timeslice</code><font><font>属性传递到开始媒体捕获的{{domxref("MediaRecorder.start()")}}方法中，</font></font><code>dataavailable</code><font><font>则每</font></font><code>timeslice</code><font><font>毫秒</font><font>触发一次事件</font><font>。</font><font>这意味着每个Blob都有特定的持续时间（最后一个Blob除外，后者可能更短，因为它将是自上次事件以来剩下的所有东西）。</font><font>因此，如果该方法调用看起来像这样- </font></font><code>recorder.start(1000);</code><font><font>-的</font></font><code>dataavailable</code><font><font>事件将媒体捕捉的每一秒发生火灾后，我们的事件处理程序将被称为与媒体数据的BLOB每秒即坚持一个第二长。</font><font>您可以</font></font><code>timeslice</code><font><font>与{{domxref("MediaRecorder.stop()")}}}和{{domxref("MediaRecorder.requestData()")}}}一起使用，以产生多个相同长度的Blob，以及其他较短的Blob。</font></font></li>
+</ul>
+
+<div class="note">
+<p><font><font>包含媒体数据的{{domxref("Blob")}}在{{event("dataavailable")}}事件的</font></font><code>data</code><font><font>属性中</font><font>可用</font><font>。</font></font></p>
+</div>
+
+<h2 id="句法"><font><font>句法</font></font></h2>
+
+<pre class="notranslate"><em>MediaRecorder</em>.ondataavailable = function(event) { ... }
+<em>MediaRecorder</em>.addEventListener('dataavailable', function(event) { ... })</pre>
+
+<h2 id="例"><font><font>例</font></font></h2>
+
+<pre id="line1">...
+  var chunks = [];
+
+  mediaRecorder.onstop = function(e) {
+    console.log("data available after MediaRecorder.stop() called.");
+
+    var audio = document.createElement('audio');
+    audio.controls = true;
+    var blob = new Blob(chunks, { 'type' : 'audio/ogg; codecs=opus' });
+    var audioURL = window.URL.createObjectURL(blob);
+    audio.src = audioURL;
+    console.log("录像停止");
+  }
+
+  mediaRecorder.ondataavailable = function(e) {
+    chunks.push(e.data);
+  }
+
+...</pre>
+
+<h2 id="技术指标"><font><font>技术指标</font></font></h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col"><font><font>规范</font></font></th>
+   <th scope="col"><font><font>状态</font></font></th>
+   <th scope="col"><font><font>评论</font></font></th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#dom-mediarecorder-ondataavailable", "MediaRecorder.ondataavailable")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td><font><font>初始定义</font></font></td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="浏览器兼容性"><font><font>浏览器兼容性</font></font></h2>
+
+<div class="hidden"><font><font>此页面中的兼容性表是根据结构化数据生成的。</font><font>如果您想贡献数据，请查看</font></font><a href="https://github.com/mdn/browser-compat-data"><font><font>https://github.com/mdn/browser-compat-data</font></font></a><font><font>并向我们​​发送请求请求。</font></font></div>
+
+<p><font><font>{{Compat("api.MediaRecorder.ondataavailable")}}</font></font></p>
+
+<h2 id="也可以看看"><font><font>也可以看看</font></font></h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaStream_Recording_API"><font><font>使用MediaStream录制API</font></font></a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/"><font><font>Web</font></font></a><font><font> Dictaphone：</font></font><a href="https://twitter.com/chrisdavidmills"><font><font>Chris Mills提供的</font></font></a><font><font> MediaRecorder + getUserMedia + Web Audio API可视化演示(</font></font><font><font><a href="https://github.com/mdn/web-dictaphone/">在Github上提供</a>)</font></font><font><font>。</font></font></li>
+ <li><a href="http://simpl.info/mediarecorder/"><font><font>simpl.info MediaStream录制演示</font></font></a><font><font>，作者</font></font><a href="https://twitter.com/sw12"><font><font>Sam Dutton</font></font></a><font><font>。</font></font></li>
+ <li><font><font>{{domxref("Navigator.getUserMedia")}}</font></font></li>
+</ul>
diff --git a/files/zh-cn/web/api/mediarecorder/pause/index.html b/files/zh-cn/web/api/mediarecorder/pause/index.html
new file mode 100644
index 0000000000..703d032d10
--- /dev/null
+++ b/files/zh-cn/web/api/mediarecorder/pause/index.html
@@ -0,0 +1,75 @@
+---
+title: MediaRecorder.pause()
+slug: Web/API/MediaRecorder/pause
+translation_of: Web/API/MediaRecorder/pause
+---
+<div>{{APIRef("MediaStream Recording")}}</div>
+
+<p><span class="seoSummary">The <strong><code>Media.pause()</code></strong> method (part of the <a href="/en-US/docs/Web/API/MediaRecorder_API">MediaRecorder API</a>) is used to pause recording of media streams.</span></p>
+
+<p>When a <code>MediaRecorder</code> object’s <code>pause()</code>method is called, the browser queues a task that runs the below steps:</p>
+
+<ol>
+ <li>If {{domxref("MediaRecorder.state")}} is "inactive", raise a DOM <code>InvalidState</code> error and terminate these steps. If not, continue to the next step.</li>
+ <li>Set {{domxref("MediaRecorder.state")}} to "paused".</li>
+ <li>Stop gathering data into the current {{domxref("Blob")}}, but keep it available so that recording can be resumed later on.</li>
+ <li>Raise a {{event("pause")}} event.</li>
+</ol>
+
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="syntaxbox"><em>MediaRecorder</em>.pause()</pre>
+
+<h3 id="Return_value">Return value</h3>
+
+<p><code>undefined</code>.</p>
+
+<h3 id="Exceptions">Exceptions</h3>
+
+<dl>
+ <dt><code>InvalidStateError</code></dt>
+ <dd>The <code>MediaRecorder</code> is currently <code>"inactive"</code>; you can't pause recording if it's not active. If you call <code>pause()</code> while already paused, it silently does nothing.</dd>
+</dl>
+
+<h2 id="Example">Example</h2>
+
+<pre class="brush: js">...
+
+ pause.onclick = function() {
+     mediaRecorder.pause();
+     console.log("recording paused");
+ }
+
+...</pre>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+ <tbody>
+  <tr>
+   <th scope="col">Specification</th>
+   <th scope="col">Status</th>
+   <th scope="col">Comment</th>
+  </tr>
+  <tr>
+   <td>{{SpecName("MediaStream Recording", "#widl-MediaRecorder-pause-void", "MediaRecorder.pause()")}}</td>
+   <td>{{Spec2("MediaStream Recording")}}</td>
+   <td>Initial definition</td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Browser compatibility</h2>
+
+
+
+<p>{{Compat("api.MediaRecorder.pause")}}</p>
+
+<h2 id="See_also">See also</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Web/API/MediaRecorder_API/Using_the_MediaRecorder_API">Using the MediaRecorder API</a></li>
+ <li><a href="http://mdn.github.io/web-dictaphone/">Web Dictaphone</a>: MediaRecorder + getUserMedia + Web Audio API visualization demo, by <a href="https://twitter.com/chrisdavidmills">Chris Mills</a> (<a href="https://github.com/mdn/web-dictaphone/">source on Github</a>.)</li>
+ <li><a href="http://simpl.info/mediarecorder/">simpl.info MediaStream Recording demo</a>, by <a href="https://twitter.com/sw12">Sam Dutton</a>.</li>
+ <li>{{domxref("Navigator.getUserMedia")}}</li>
+</ul>