在现代浏览器中，我们可以使用JavaScript通过MediaRecorder API来轻松地录制音频和视频。这个API是WebRTC的一部分，它提供了一个简单的接口，使得我们能够直接在浏览器中进行音频和视频的采集、编码和录制。
前置知识
在学习如何使用MediaRecorder API之前，我们需要先掌握一些前置知识：
- 媒体流(MediaStream)：表示由一个或多个媒体轨道组成的实时流，例如摄像头和麦克风的音视频数据。
- 媒体轨道(MediaTrack)：表示媒体流中的一个轨道，例如音频轨道或视频轨道。
- 媒体设备(MediaDevices)：表示用户计算机上的媒体输入设备，例如摄像头、麦克风等。
MediaRecorder API
MediaRecorder API允许我们将一个或多个媒体轨道录制成一个Blob对象或MediaStream对象。它的使用非常简单：
-- -------------------- ---- -------
-- -----
------------------------------------- ------ ----- ------ ---- --
---------------------- -
-- -----------------
----- ------- - - --------- ------------ ----------- -
----- -------- - --- --------------------- --------
-- ----------------------
----- ------ - --
------------------------------------------ --------------- -
-----------------------
--
-- ----------------------
--------------------------------- ---------- -
----- ---- - --- ------------ - ----- ------------ --
-- -------------------------
----- --- - -------------------------
----------------
--
-- ----
----------------
-- --------
--------------------- -
---------------
-- ------
--
---------------------- -
--------------------
--上面的代码演示了如何录制包含音频和视频的媒体流，并将其保存为一个Blob对象。在这个例子中，我们使用了navigator.mediaDevices.getUserMedia()方法获取本地媒体流，然后创建了一个MediaRecorder对象来处理录制逻辑。
在MediaRecorder对象创建时，我们需要传入一个媒体流和一些可选参数。其中最重要的参数是mimeType，它指定了录制的媒体类型和编码方式。
当MediaRecorder开始录制后，它会不断地生成dataavailable事件，我们需要在该事件的回调函数中收集数据。最后，在stop事件被触发时，我们可以将所有数据拼接起来，生成一个Blob对象并将其转换为URL。
示例
下面是一个简单的示例，演示如何使用MediaRecorder API录制音频并播放。
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------------- --- ------------
-------
------
------- ----------------- ------------------
------- -------------- ------------------
------ ----------- -----------------
--------
----- --------- - ---------------------------------
----- ------- - -------------------------------
----- ------ - ---------------------------------
--- --------
--- ------ - --
----------------------------------- ---------- -
------------------------------------- ------ ---- --
---------------------- -
-------- - --- ---------------------
------------------------------------------ --------------- -
-----------------------
--
--------------------------------- ---------- -
----- ---- - --- ------------ - ----- ------------ --
----- --- - -------------------------
- ----------------------------------------------------------- --------
----------------------------------------------------------------------------------