-
Notifications
You must be signed in to change notification settings - Fork 11
/
Copy pathindex.html
38 lines (35 loc) · 2.69 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Recording Audio With the MediaStream Recorder API - addpipe.com</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Latest compiled and minified Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1>Recording audio with the MediaStream Recorder API</h1>
<p><small>Made by the <a href="https://addpipe.com" target="_blank">Pipe Video Recording Platform</a></small></p>
<p>This demo below shows you <strong>how to record audio directly in the browser</strong> using native browser APIs. The <a href="https://w3c.github.io/mediacapture-record/" target="_blank">MediaStream Recorder API</a> makes media recording in the browser very easy. It allows capturing chunks of (audio) data from a microphone media stream as blobs, which can later be concatenated in a single audio file. The file can then be saved locally or uploaded/POSTed to the web server. <span style="text-decoration: underline;">Recorded audio files contain Opus audio and have the .webm extension</span>.</p>
<p>At the moment the MediaStream Recorder API is only supported by Chrome, Firefox, Opera and Edge 79 (Chromium). Please comment on <a target="_blank" href="https://bugs.webkit.org/show_bug.cgi?id=85851">this Safari/WebKit feature request</a> to request Safari support.</p>
<div style="max-width: 28em;">
<div id="controls">
<button id="recordButton">Record</button>
<button id="pauseButton" disabled>Pause</button>
<button id="stopButton" disabled>Stop</button>
</div>
<div id="formats"></div>
<p><strong>Recordings:</strong></p>
<ol id="recordingsList"></ol>
</div>
<h2>Resources</h2>
<ul>
<li>Code for this demo on GitHub: <a href="https://github.com/addpipe/media-recorder-api-audio-demo" target="_blank">https://github.com/addpipe/media-recorder-api-audio-demo</a></li>
<li>Our blog post on the topic: <a href="https://blog.addpipe.com/recording-audio-in-the-browser-using-pure-html5-and-minimal-javascript/" target="_blank">https://blog.addpipe.com/recording-audio-in-the-browser-using-pure-html5-and-minimal-javascript/</a></li>
<li>We've also built a <a href="https://addpipe.com/media-recorder-api-demo/" target="_blank">video recording demo</a></li>
</ul>
<!-- inserting these scripts at the end to be able to use all the elements in the DOM -->
<script src="js/app.js"></script>
</body>
</html>