├── .gitignore
├── webpack.config.js
├── package.json
├── demo
    ├── img
    │   └── github.svg
    ├── css
    │   └── styles.css
    └── index.html
├── LICENSE
├── readme.md
├── src
    └── audio-recorder.js
└── dist
    └── audio-recorder.js


/.gitignore:
--------------------------------------------------------------------------------
1 | .idea
2 | node_modules
3 | 
4 | 


--------------------------------------------------------------------------------
/webpack.config.js:
--------------------------------------------------------------------------------
 1 | const path = require('path');
 2 | 
 3 | module.exports = {
 4 |   mode: 'production',
 5 |   entry: {
 6 |     'audio-recorder': './src/audio-recorder.js'
 7 |   },
 8 |   output: {
 9 |     path: path.join(__dirname, 'dist'),
10 |     filename: '[name].js'
11 |   },
12 |   module: {
13 |     rules: []
14 |   }
15 | };
16 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "@dannymoerkerke/audio-recorder",
 3 |   "version": "1.1.1",
 4 |   "description": "Audio Recorder Web Component",
 5 |   "repository": {
 6 |     "type": "git",
 7 |     "url": "git+ssh://git@github.com:DannyMoerkerke/audio-recorder.git"
 8 |   },
 9 |   "publishConfig": {
10 |     "access": "public"
11 |   },
12 |   "main": "src/audio-recorder.js",
13 |   "files": [
14 |     "/src",
15 |     "dist"
16 |   ],
17 |   "author": "Danny Moerkerke <danny@dannymoerkerke.nl>",
18 |   "license": "MIT",
19 |   "homepage": "https://dannymoerkerke.github.io/audio-recorder/",
20 |   "scripts": {
21 |     "start": "ws -p 8080 --spa demo/index.html",
22 |     "webpack": "rm -rf dist && webpack"
23 |   },
24 |   "devDependencies": {
25 |     "gh-pages": "^3.1.0",
26 |     "local-web-server": "^2.6.1",
27 |     "webpack": "^5.4.0",
28 |     "webpack-cli": "^4.2.0"
29 |   }
30 | }
31 | 


--------------------------------------------------------------------------------
/demo/img/github.svg:
--------------------------------------------------------------------------------
1 | <svg width="32" height="32" viewBox="0 0 1024 1024" fill="none" xmlns="http://www.w3.org/2000/svg">
2 |     <path d="M8 0C3.58 0 0 3.58 0 8C0 11.54 2.29 14.53 5.47 15.59C5.87 15.66 6.02 15.42 6.02 15.21C6.02 15.02 6.01 14.39 6.01 13.72C4 14.09 3.48 13.23 3.32 12.78C3.23 12.55 2.84 11.84 2.5 11.65C2.22 11.5 1.82 11.13 2.49 11.12C3.12 11.11 3.57 11.7 3.72 11.94C4.44 13.15 5.59 12.81 6.05 12.6C6.12 12.08 6.33 11.73 6.56 11.53C4.78 11.33 2.92 10.64 2.92 7.58C2.92 6.71 3.23 5.99 3.74 5.43C3.66 5.23 3.38 4.41 3.82 3.31C3.82 3.31 4.49 3.1 6.02 4.13C6.66 3.95 7.34 3.86 8.02 3.86C8.7 3.86 9.38 3.95 10.02 4.13C11.55 3.09 12.22 3.31 12.22 3.31C12.66 4.41 12.38 5.23 12.3 5.43C12.81 5.99 13.12 6.7 13.12 7.58C13.12 10.65 11.25 11.33 9.47 11.53C9.76 11.78 10.01 12.26 10.01 13.01C10.01 14.08 10 14.94 10 15.21C10 15.42 10.15 15.67 10.55 15.59C13.71 14.53 16 11.53 16 8C16 3.58 12.42 0 8 0Z" transform="scale(64)" fill="#ffffff"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | This software is licensed under the MIT License.
 2 | 
 3 | Copyright (c) 2019 Danny Moerkerke and other contributors
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in
13 | all copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
21 | THE SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/readme.md:
--------------------------------------------------------------------------------
 1 | # audio-recorder
 2 | An audio recorder Web Component that records audio through the microphone of the user's device.
 3 | 
 4 | It provides a graphic frequency analyzer and waveform view of the recorded audio and uses the MediaDevices API, 
 5 | Web Audio API and the MediaRecorder API.
 6 | 
 7 | ## Installation
 8 | ```
 9 | npm i @dannymoerkerke/audio-recorder
10 | ```
11 | 
12 | ## Usage
13 | Add a `<script>` tag to your page:
14 | 
15 | ```css
16 | <script type="module" src="path/to/node_modules/@dannymoerkerke/src/audio-recorder.js"></script>
17 | ```
18 | 
19 | or import it:
20 | 
21 | ```javascript
22 | import './path/to/node_modules/@dannymoerkerke/src/audio-recorder.js';
23 | ```
24 | 
25 | You can also import the bundled version which is in `dist` for use with Webpack:
26 | 
27 | ```javascript
28 | import './path/to/node_modules/@dannymoerkerke/dist/audio-recorder.js';
29 | ```
30 | 
31 | and add the tag to your page:
32 | 
33 | ```html
34 | <audio-recorder></audio-recorder>
35 | ```
36 | 
37 | ### Attributes
38 | - `bars`: number of bars in frequency analyzer, default: 20
39 | - `view`: `frequencies` or `waveform`, default: `frequencies`
40 | 
41 | ### Styling
42 | - `--width`: width of the recorder, default: 600px
43 | - `--height`: height of the recorder, default: 300px
44 | - `--border`: border of the recorder, default: none
45 | - `--frequency-background-color`: background color of frequency analyzer, default: #ffffff
46 | - `--frequency-bars-color`: background color of frequency bars, default: #ff0000
47 | - `--waveform-background-color`: background color of waveform view, default: #ffffff
48 | - `--waveform-color`: color of waveform, default: #ff0000
49 | - `--waveform-progress-color`: color of waveform of part of file that has already played, default: #337ab7
50 | 
51 | In addition, mixins can be applied using the `::part` pseudo element.
52 | 
53 | Usage: 
54 | 
55 | ```css
56 | audio-recorder::part([selector]) {
57 | 
58 |    /** css rules **/
59 | 
60 | }
61 | 
62 | ```
63 | 
64 | Available selectors:
65 | 
66 | - `::part(button)`: styles the buttons except the volume buttons
67 | - `::part(volume-button)`: styles the volume buttons
68 | - `::part(slider)`: styles the volume slider
69 | - `::part(time)`: styles the elapsed and remaining time display
70 | 
71 | The buttons and slider are part of the `material-webcomponents` library ([https://dannymoerkerke.github.io/material-webcomponents/](https://dannymoerkerke.github.io/material-webcomponents/))
72 | 
73 | The Custom CSS properties exposed by these components can be used as part of the styling through `::part`.
74 | 
75 | For example, the `material-slider` component exposes the properties `--track-size`, `--track-color`, `--thumb-size` and 
76 | `--thumb-color`.
77 | 
78 | These can be used in combination with `::part` to style the volume slider:
79 | 
80 | ```css
81 | audio-recorder::part(slider) {
82 |   --track-color: #000000;
83 |   --track-size: 3px;
84 |   --thumb-color: #000000;
85 |   --thumb-size: 10px;
86 | }
87 | ```
88 | 
89 | ### Demo
90 | To run the demo, run `npm install` once and then `npm start` and view the demo on
91 | [http://localhost:8080/](http://localhost:8080/)
92 | 


--------------------------------------------------------------------------------
/demo/css/styles.css:
--------------------------------------------------------------------------------
  1 | html, body {
  2 |   min-height: 100%;
  3 |   height: 100%;
  4 |   margin: 0;
  5 |   font-family: Verdana;
  6 | }
  7 | 
  8 | main {
  9 |   min-height: 100%;
 10 |   display: flex;
 11 |   flex-direction: column;
 12 |   align-items: center;
 13 | }
 14 | header, footer {
 15 |   display: flex;
 16 |   align-items: center;
 17 |   justify-content: center;
 18 |   min-height: 70px;
 19 |   background-color: #337ab7;
 20 |   padding: 10px;
 21 |   color: #ffffff;
 22 | }
 23 | 
 24 | #content {
 25 |   flex-grow: 1;
 26 |   background-color: #ffffff;
 27 |   padding: 10px;
 28 |   width: 85%;
 29 | }
 30 | .logo {
 31 |   display: flex;
 32 |   align-items: center;
 33 |   width: 95%;
 34 |   font-size: 1.7em;
 35 | }
 36 | .logo i {
 37 |   font-size: 2em;
 38 |   margin-right: 5px;
 39 | }
 40 | #github {
 41 |   display: flex;
 42 |   margin-left: auto;
 43 | }
 44 | #github img {
 45 |   max-width: 80%;
 46 | }
 47 | @media screen and (min-width: 1025px) {
 48 |   #content {
 49 |     width: 70%;
 50 |   }
 51 |   .logo {
 52 |     width: 72%;
 53 |     font-size: 3.5em;
 54 |   }
 55 |   .logo i {
 56 |     font-size: 2.5em;
 57 |     margin-right: 20px;
 58 |   }
 59 |   #github img {
 60 |     max-width: 100%;
 61 |   }
 62 | }
 63 | nav {
 64 |   display: flex;
 65 |   justify-content: space-between;
 66 |   width: 85%;
 67 |   position: relative;
 68 | }
 69 | 
 70 | @media screen and (min-width: 1025px) {
 71 |   nav {
 72 |     display: block;
 73 |     width: 70%;
 74 |   }
 75 | }
 76 | nav ul {
 77 |   display: none;
 78 |   list-style-type: none;
 79 |   height: 100%;
 80 |   margin: 0;
 81 |   padding: 0;
 82 |   position: absolute;
 83 | }
 84 | 
 85 | @media screen and (min-width: 1024px) {
 86 |   nav ul {
 87 |     display: flex;
 88 |     position: static;
 89 |     align-items: center;
 90 |     justify-content: space-between;
 91 |     text-transform: uppercase;
 92 |   }
 93 | }
 94 | nav li {
 95 |   display: block;
 96 |   padding: 5px;
 97 |   background-color: #ffffff;
 98 | }
 99 | @media screen and (min-width: 1024px) {
100 |   nav li {
101 |     padding: 0;
102 |     background-color: transparent;
103 |   }
104 | }
105 | nav a,
106 | nav a:visited {
107 |   color: #000000;
108 |   display: inline-block;
109 |   text-decoration: none;
110 |   border-bottom-style: solid;
111 |   border-bottom-width: 2px;
112 |   border-bottom-color: transparent;
113 | }
114 | @media screen and (min-width: 1024px) {
115 |   nav a,
116 |   nav a:visited {
117 |     color: #ffffff;
118 |   }
119 | }
120 | h1 {
121 |   font-weight: normal;
122 |   font-size: 3em;
123 | }
124 | 
125 | h3 {
126 |   font-weight: normal;
127 |   font-size: 2em;
128 | }
129 | p {
130 |   font-size: 0.9rem;
131 |   line-height: 1.8rem;
132 | }
133 | pre {
134 |   word-break: break-word;
135 |   white-space: pre-wrap;
136 |   overflow-wrap: break-word;
137 |   background-color: #e5e5e5;
138 |   display: inline-block;
139 |   padding: 20px;
140 | }
141 | 
142 | code {
143 |   font-size: 1.1rem;
144 |   word-break: break-all;
145 | }
146 | img {
147 |   max-width: 100%;
148 |   height: auto;
149 | }
150 | audio-recorder {
151 |   width: 100%;
152 |   --border: 1px solid #cccccc;
153 |   --waveform-background-color: #cccccc;
154 | }
155 | 
156 | @media screen and (min-width: 1024px) {
157 |   audio-recorder {
158 |     width: 600px;
159 |   }
160 | }
161 | 
162 | audio-recorder::part(slider) {
163 |   --track-color: #000000;
164 |   --thumb-color: #000000;
165 |   width: 100%;
166 | }
167 | 
168 | #record-audio {
169 |   --font-color: #ff0000;
170 | }
171 | 
172 | .usage {
173 |   padding: 0;
174 | }
175 | 
176 | .usage li {
177 |   list-style-type: none;
178 |   display: flex;
179 |   align-items: center;
180 |   padding: 5px;
181 | }
182 | 
183 | .usage li button {
184 |   margin-right: 10px;
185 |   pointer-events: none;
186 |   border: none;
187 |   padding: 6px 8px;
188 | }
189 | 
190 | 


--------------------------------------------------------------------------------
/demo/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="UTF-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>audio-recorder</title>
  7 | 
  8 |     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  9 |     <link href="demo/css/styles.css" rel="stylesheet">
 10 |   </head>
 11 |   <body>
 12 |     <header>
 13 |       <section class="logo">
 14 |         <i class="material-icons" slot="left-icon">equalizer</i>
 15 |         &lt;audio-recorder&gt;
 16 | 
 17 |         <a href="https://github.com/DannyMoerkerke/audio-recorder" target="_blank" rel="noopener" id="github">
 18 |           <img src="demo/img/github.svg" />
 19 |         </a>
 20 |       </section>
 21 |     </header>
 22 |     <main>
 23 |       <section id="content">
 24 | 
 25 | 
 26 |         <h1>audio recorder</h1>
 27 | 
 28 |         <p>An audio recorder Web Component that records audio through the microphone of the user's device.</p>
 29 | 
 30 |         <p>It provides a graphic frequency analyzer and waveform view of the recorded audio and uses the MediaDevices
 31 |           API,
 32 |           Web Audio API and the MediaRecorder API.</p>
 33 | 
 34 |         <h3>Demo</h3>
 35 | 
 36 |         <audio-recorder bars="40"></audio-recorder>
 37 | 
 38 |         <p>To run the demo locally , run <code>npm install</code> once and then <code>npm start</code> and view the demo
 39 |           on
 40 |           <a href="http://localhost:8080/">http://localhost:8080/</a></p>
 41 | 
 42 | 
 43 |         <section>
 44 |           <h3>Usage</h3>
 45 |           <ul class="usage">
 46 |             <li>
 47 |               <button>
 48 |                 <i class="material-icons">mic</i>
 49 |               </button>
 50 |               Start capturing microphone
 51 |             </li>
 52 | 
 53 |             <li>
 54 |               <button>
 55 |                 <i class="material-icons">play_arrow</i>
 56 |               </button>
 57 |               Play the recorded audio
 58 |             </li>
 59 | 
 60 |             <li>
 61 |               <button>
 62 |                 <i class="material-icons">fiber_manual_record</i>
 63 |               </button>
 64 |               Start recording audio
 65 |             </li>
 66 | 
 67 |             <li>
 68 |               <button>
 69 |                 <i class="material-icons">save</i>
 70 |               </button>
 71 |               Save recorded audio
 72 |             </li>
 73 | 
 74 |             <li>
 75 |               <button>
 76 |                 <i class="material-icons">equalizer</i>
 77 |               </button>
 78 |               Show frequency analyzer
 79 |             </li>
 80 | 
 81 |             <li>
 82 |               <button>
 83 |                 <i class="material-icons">graphic_eq</i>
 84 |               </button>
 85 |               Show recorded audio as waveform
 86 |             </li>
 87 |           </ul>
 88 |         </section>
 89 | 
 90 | 
 91 |         <h3>Installation</h3>
 92 |         <pre>npm i @dannymoerkerke/audio-recorder</pre>
 93 | 
 94 |         <h3>Usage</h3>
 95 |         <p>Add a &lt;script&gt; tag to your page:</p>
 96 | 
 97 | 
 98 |         <pre>&lt;script type="module" src="path/to/node_modules/@dannymoerkerke/src/audio-recorder.js"&gt;&lt;/script&gt;</pre>
 99 | 
100 | 
101 |         <p>or import it:</p>
102 | 
103 |         <pre>import './path/to/node_modules/@dannymoerkerke/src/audio-recorder.js';</pre>
104 | 
105 |         <p>You can also import the bundled version which is in <code>dist</code> for use with Webpack:</p>
106 | 
107 |         <pre>import './path/to/node_modules/@dannymoerkerke/dist/audio-recorder.js';</pre>
108 | 
109 |         <p>and add the tag to your page:</p>
110 | 
111 |         <pre>&lt;audio-recorder&gt;&lt;/audio-recorder&gt;</pre>
112 | 
113 |         <h3>Attributes</h3>
114 |         <ul>
115 |           <li><code>bars</code>: number of bars in frequency analyzer, default: 20</li>
116 |           <li><code>view</code>: <code>frequencies </code> or <code> waveform</code>, default: <code>frequencies</code>
117 |           </li>
118 |         </ul>
119 | 
120 |         <h3>Styling</h3>
121 |         <ul>
122 |           <li><code>--width</code>: width of the recorder, default: 600px</li>
123 |           <li><code>--height</code>: height of the recorder, default: 300px</li>
124 |           <li><code>--border</code>: border of the recorder, default: none</li>
125 |           <li><code>--frequency-background-color</code>: background color of frequency analyzer, default: #ffffff</li>
126 |           <li><code>--frequency-bars-color</code>: background color of frequency bars, default: #ff0000</li>
127 |           <li><code>--waveform-background-color</code>: background color of waveform view, default: #ffffff</li>
128 |           <li><code>--waveform-color</code>: color of waveform, default: #ff0000</li>
129 |           <li><code>--waveform-progress-color</code>: color of waveform of part of file that has already played,
130 |             default: #337ab7
131 |           </li>
132 |         </ul>
133 | 
134 |         <p>In addition, mixins can be applied using the <code>::part</code> pseudo element.</p>
135 | 
136 |         <p>Usage:</p>
137 | 
138 | 
139 |         <pre>
140 | audio-recorder::part([selector]) {
141 | 
142 |   /** css rules **/
143 | 
144 | }
145 |         </pre>
146 | 
147 | 
148 |         <p>Available selectors:</p>
149 | 
150 |         <ul>
151 |           <li><code>::part(button)</code>: styles the buttons except the volume buttons</li>
152 |           <li><code>::part(volume-button)</code>: styles the volume buttons</li>
153 |           <li><code>::part(time)</code>: styles the elapsed and remaining time display</li>
154 |         </ul>
155 | 
156 |         <p>The Custom CSS properties exposed by these components can be used as part of the styling through
157 |           <code>::part</code>.</p>
158 | 
159 |         <p>For example, buttons can be styled like this:</p>
160 | 
161 |         <pre>
162 | audio-recorder::part(button) {
163 |   color: #000000;
164 |   padding: 8px;
165 | }
166 |         </pre>
167 | 
168 |         <h3>Events</h3>
169 |         <p>Audio recorder throws a <code>notallowed</code> event when permission to access the device's microphone is
170 |         denied:</p>
171 | 
172 |         <pre>
173 | const recorder = document.querySelector('audio-recorder');
174 | 
175 | recorder.addEventListener('notallowed' e => {
176 | 
177 |   // prompt user to change device settings to allow access to microphone
178 | 
179 | });
180 |         </pre>
181 |       </section>
182 |     </main>
183 | 
184 |     <footer></footer>
185 | 
186 |     <dialog id="mic-permission-dialog">
187 |       <h3>No access to media</h3>
188 |       <p>Your device does not have permission to access the microphone. Please enable this in your device's
189 |         settings.</p>
190 |       <div>
191 |         <button id="dialog-close">Close</button>
192 |       </div>
193 |     </dialog>
194 | 
195 |     <script type="module" src="src/audio-recorder.js"></script>
196 |     <script>
197 |       const recorder = document.querySelector('audio-recorder');
198 |       const micPermissionDialog = document.querySelector('#mic-permission-dialog');
199 |       const closeButton = document.querySelector('#dialog-close');
200 | 
201 |       recorder.addEventListener('notallowed', () => micPermissionDialog.showModal());
202 |       closeButton.addEventListener('click', () => micPermissionDialog.close());
203 |     </script>
204 |   </body>
205 | </html>
206 | 


--------------------------------------------------------------------------------
/src/audio-recorder.js:
--------------------------------------------------------------------------------
  1 | export class AudioRecorder extends HTMLElement {
  2 | 
  3 |   static get observedAttributes() {
  4 |     return ['view'];
  5 |   }
  6 | 
  7 |   constructor() {
  8 |     super();
  9 | 
 10 |     const shadowRoot = this.attachShadow({mode: 'open'});
 11 | 
 12 |     shadowRoot.innerHTML = `
 13 |       <style>
 14 |         :host {
 15 |           --width: 210px;
 16 |           --height: 300px;
 17 |           --border: none;
 18 |           --frequency-background-color: #ffffff;
 19 |           --frequency-bars-color: #ff0000;
 20 |           --waveform-background-color: #ffffff;
 21 |           --waveform-color: #ff0000;
 22 |           --waveform-progress-color: #337ab7;
 23 |           display: inline-flex;
 24 |           flex-direction: column;
 25 |           border: var(--border);
 26 |           box-sizing: content-box;
 27 |           min-width: 210px;
 28 |           width: var(--width);
 29 |           min-height: var(--height);
 30 |         }
 31 |         
 32 |         @font-face {
 33 |           font-family: 'Material Icons';
 34 |           font-style: normal;
 35 |           font-weight: 400;
 36 |           src: url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format('woff2');
 37 |         }
 38 |         
 39 |         .material-icons {
 40 |           font-family: 'Material Icons';
 41 |           font-weight: normal;
 42 |           font-style: normal;
 43 |           font-size: 24px;
 44 |           line-height: 1;
 45 |           letter-spacing: normal;
 46 |           text-transform: none;
 47 |           display: inline-block;
 48 |           white-space: nowrap;
 49 |           word-wrap: normal;
 50 |           direction: ltr;
 51 |           -webkit-font-feature-settings: 'liga';
 52 |           -webkit-font-smoothing: antialiased;
 53 |         }
 54 |         
 55 |         canvas {
 56 |           display: block;
 57 |         }
 58 |         
 59 |         #buttons {
 60 |           display: flex;
 61 |           flex-direction: row;
 62 |           gap: 2px;
 63 |         }
 64 |         
 65 |         button {
 66 |           border: none;
 67 |           padding: 6px 8px;
 68 |         }
 69 |         
 70 |         
 71 |         
 72 |         #controls {
 73 |           display: flex;
 74 |           flex-direction: row;
 75 |           flex-wrap: wrap;
 76 |           justify-content: space-between;
 77 |           align-items: center;
 78 |           padding: 5px 10px 5px 5px;
 79 |           max-width: 800px;
 80 |         }
 81 |         
 82 |         #time {
 83 |           display: flex;
 84 |           align-items: center;
 85 |           padding: 5px;
 86 |         }
 87 |         
 88 |         #volume-container {
 89 |           display: flex;
 90 |           align-items: center;
 91 |         }
 92 |         
 93 |         #container {
 94 |           width: 100%;
 95 |           height: 100%;
 96 |           display: flex;
 97 |           flex-direction: column;
 98 |           flex-grow: 1;
 99 |         }
100 |         
101 |         #audio-container {
102 |           position: relative;
103 |           flex-grow: 1;
104 |           pointer-events: none;
105 |         }
106 |         
107 |         :host([src]) #audio-container {
108 |           pointer-events: initial;
109 |         }
110 |         
111 |         #waveform-container,
112 |         #frequencies-container {
113 |           display: none;
114 |         }
115 |         
116 |         #waveform-container {
117 |           background-color: var(--waveform-background-color);
118 |         }
119 |         
120 |         #frequencies-container {
121 |           z-index: 1;
122 |           background-color: var(--frequency-background-color);
123 |         }
124 |         
125 |         :host([view="frequencies"]) #frequencies-container {
126 |           display: block;
127 |         }
128 |         
129 |         :host([view="frequencies"]) #frequencies-button {
130 |           opacity: .5;
131 |           cursor: not-allowed;
132 |           pointer-events: none;
133 |         }
134 |         
135 |         :host([view="frequencies"]) #audio-container {
136 |           pointer-events: none;
137 |         }
138 |         
139 |         :host([view="waveform"]) #waveform-container,
140 |         :host([view="waveform"]) #progress-container {
141 |           display: block;
142 |         }
143 |         
144 |         :host([view="waveform"]) #waveform-button {
145 |           opacity: .5;
146 |           cursor: not-allowed;
147 |           pointer-events: none;
148 |         }
149 |         
150 |         #progress-container {
151 |           display: none;
152 |           position: absolute;
153 |           top: 0;
154 |           left: 0;
155 |           overflow: hidden;
156 |           width: 0;
157 |           border-right-width: 1px;
158 |           border-right-style: solid;
159 |           border-right-color: var(--waveform-progress-color);
160 |         }
161 |         
162 |         audio {
163 |           display: none;
164 |         }
165 |         
166 |         #stop-capture-audio,
167 |         #stop-record-audio {
168 |           display: none;
169 |         }
170 |         
171 |         #stop-record-audio {
172 |           color: #ff0000;
173 |         }
174 |         
175 |         #record-audio {
176 |           color: #ff0000;
177 |           opacity: .5;
178 |           cursor: not-allowed;
179 |           pointer-events: none;
180 |         }
181 |         
182 |         #play,
183 |         #save-audio,
184 |         :host([src][state="capturing"]) #play,
185 |         :host([src][state="capturing"]) #save-audio {
186 |           opacity: .5;
187 |           cursor: not-allowed;
188 |           pointer-events: none;
189 |         }
190 |         
191 |         :host([src]) #play,
192 |         :host([src]) #save-audio {
193 |           opacity: 1;
194 |           cursor: pointer;
195 |           pointer-events: initial;
196 |         }
197 |         
198 |         #save-audio a {
199 |           color: #000000;
200 |           text-decoration: none;
201 |         }
202 |         #save-audio a i {
203 |           display: block;
204 |           width: 100%;
205 |           height: 100%;
206 |         }
207 |         
208 |         #pause {
209 |           display: none;
210 |         }
211 |         
212 |         :host([state="playing"]) #pause {
213 |           display: block;
214 |         }
215 |         
216 |         :host([state="playing"]) #play {
217 |           display: none;
218 |         }
219 |         
220 |         :host([state="playing"]) #capture-audio {
221 |           opacity: .5;
222 |           cursor: not-allowed;
223 |           pointer-events: none;
224 |         }
225 |         
226 |         :host([state="capturing"]) #stop-capture-audio,
227 |         :host([state="recording"]) #stop-capture-audio {
228 |           display: block;
229 |         }
230 |         :host([state="capturing"]) #capture-audio,
231 |         :host([state="recording"]) #capture-audio {
232 |           display: none;
233 |         }
234 |         
235 |         :host([state="capturing"]) #record-audio {
236 |           opacity: 1;
237 |           cursor: pointer;
238 |           pointer-events: initial;
239 |         }
240 |         
241 |         :host([state="recording"]) #stop-record-audio {
242 |           display: block;
243 |         }
244 |         :host([state="recording"]) #record-audio {
245 |           display: none;
246 |         }
247 |       </style>
248 |       
249 |       <audio id="input" controls></audio>
250 |       
251 |       <div id="container">
252 |         <div id="audio-container">
253 |           <div id="frequencies-container">
254 |             <canvas id="frequencies"></canvas>
255 |           </div>
256 |   
257 |           <div id="waveform-container">
258 |             <canvas id="waveform"></canvas>
259 |           </div>
260 |           
261 |           <div id="progress-container">
262 |             <canvas id="progress"></canvas>
263 |           </div>
264 |         </div>
265 |         
266 |         <div id="controls">
267 |           <div id="buttons">
268 |             <button id="capture-audio" part="button">
269 |               <i class="material-icons">mic</i>
270 |             </button>
271 |             
272 |             <button id="stop-capture-audio" part="button">
273 |               <i class="material-icons">mic_off</i>
274 |             </button>
275 |             
276 |             <button id="play" part="button">
277 |               <i class="material-icons">play_arrow</i>
278 |             </button>
279 |             
280 |             <button id="pause" part="button">
281 |               <i class="material-icons">pause</i>
282 |             </button>
283 |       
284 |             <button id="record-audio" part="button">
285 |               <i class="material-icons">fiber_manual_record</i>
286 |             </button>
287 |             
288 |             <button id="stop-record-audio" part="button">
289 |               <i class="material-icons">stop</i>
290 |             </button>
291 |             
292 |             <button id="save-audio" part="button">
293 |               <a id="save-audio-link" target="_blank">
294 |                 <i class="material-icons">save</i>
295 |               </a>
296 |             </button>
297 |             
298 |             <button id="frequencies-button" part="button">
299 |               <i class="material-icons">equalizer</i>
300 |             </button>
301 |             
302 |             <button id="waveform-button" part="button">
303 |               <i class="material-icons">graphic_eq</i>
304 |             </button>
305 |           </div>
306 |           
307 |           <div id="volume-container">
308 |             <button id="volume-min" part="volume-button">
309 |               <i class="material-icons">volume_off</i>
310 |             </button>
311 |             
312 |             <input type="range" id="volume" value="1" min="0" max="1" step="0.01" part="slider">
313 |             
314 |             <button id="volume-max" part="volume-button">
315 |               <i class="material-icons">volume_up</i>
316 |             </button>
317 |           </div>
318 |         
319 |           <div id="time" part="time">
320 |             <span id="elapsed-time"></span> / <span id="total-time"></span>
321 |           </div>
322 |         </div>
323 |       </div>
324 |     `;
325 | 
326 |     this.hours = 0;
327 |     this.minutes = 0;
328 |     this.seconds = 0;
329 |     this.secs = 0;
330 |     this.pauseTime = 0;
331 |     this.audioBuffers = [];
332 |     this.frequencies = false;
333 |     this.state = 'idle';
334 |     this.view = this.getAttribute('view') || 'frequencies';
335 |     this.bars = parseInt(this.getAttribute('bars') || 20, 10);
336 | 
337 |     this.mediaElementSource = null;
338 |     this.mediaStreamSource = null;
339 | 
340 |     this.nativeFileSystemSupported = 'showSaveFilePicker' in window;
341 |     this.maxChunkLength = 524000; //1024000 * 50;
342 |     this.canvas = this.shadowRoot.querySelector('#waveform');
343 |     this.canvasContext = this.canvas.getContext('2d');
344 |     this.progressCanvas = this.shadowRoot.querySelector('#progress');
345 |     this.progressCanvasContext = this.progressCanvas.getContext('2d');
346 |     this.audioContainer = this.shadowRoot.querySelector('#audio-container');
347 |     this.frequencyCanvas = this.shadowRoot.querySelector('#frequencies');
348 |     this.frequencyCanvasContext = this.frequencyCanvas.getContext('2d');
349 |     this.waveformContainer = this.shadowRoot.querySelector('#waveform-container');
350 |     this.progressContainer = this.shadowRoot.querySelector('#progress-container');
351 |     this.frequenciesContainer = this.shadowRoot.querySelector('#frequencies-container');
352 | 
353 |     this.playButton = this.shadowRoot.querySelector('#play');
354 |     this.pauseButton = this.shadowRoot.querySelector('#pause');
355 |     this.elapsedTime = this.shadowRoot.querySelector('#elapsed-time');
356 |     this.totalTime = this.shadowRoot.querySelector('#total-time');
357 |     this.volume = this.shadowRoot.querySelector('#volume');
358 |     this.volumeMinButton = this.shadowRoot.querySelector('#volume-min');
359 |     this.volumeMaxButton = this.shadowRoot.querySelector('#volume-max');
360 |     this.input = this.shadowRoot.querySelector('audio');
361 |     this.freqButton = this.shadowRoot.querySelector('#frequencies-button');
362 |     this.waveformButton = this.shadowRoot.querySelector('#waveform-button');
363 |     this.captureAudioButton = this.shadowRoot.querySelector('#capture-audio');
364 |     this.stopCaptureAudioButton = this.shadowRoot.querySelector('#stop-capture-audio');
365 |     this.recordAudioButton = this.shadowRoot.querySelector('#record-audio');
366 |     this.stopRecordAudioButton = this.shadowRoot.querySelector('#stop-record-audio');
367 |     this.saveAudioLink = this.shadowRoot.querySelector('#save-audio-link');
368 | 
369 |     if(this.nativeFileSystemSupported) {
370 |       this.saveAudioLink.addEventListener('click', async () => this.saveFile(this.recording));
371 |     }
372 |   }
373 | 
374 |   resizeCanvas({width, height}) {
375 |     this.canvas.width = 0;
376 |     this.canvas.height = 0;
377 | 
378 |     this.canvas.width = width;
379 |     this.canvas.height = height;
380 | 
381 |     this.progressCanvas.width = width;
382 |     this.progressCanvas.height = height;
383 | 
384 |     this.frequencyCanvas.width = width;
385 |     this.frequencyCanvas.height = height;
386 | 
387 |     this.canvasWidth = this.canvas.width;
388 |     this.canvasHeight = this.canvas.height;
389 | 
390 |     const mimeTypes = [
391 |       {
392 |         type: 'audio/mpeg',
393 |         ext: 'mp3'
394 |       },
395 |       {
396 |         type: 'audio/webm',
397 |         ext: 'webm',
398 |       },
399 |       {
400 |         type: 'audio/mp4',
401 |         ext: 'mp4'
402 |       }
403 |     ];
404 | 
405 |     const isSupportedMimeType = ({type}) => MediaRecorder.isTypeSupported(type);
406 |     const defaultMime = {type: 'audio/mpeg', ext: 'mp3'};
407 | 
408 |     this.mimeType = 'isTypeSupported' in MediaRecorder ? mimeTypes.find(isSupportedMimeType) : defaultMime;
409 |   }
410 | 
411 |   connectedCallback() {
412 |     const hostStyle = getComputedStyle(this.shadowRoot.host);
413 |     const waveformBackgroundColor = hostStyle.getPropertyValue('--waveform-background-color');
414 |     const waveformColor = hostStyle.getPropertyValue('--waveform-color');
415 |     const waveformProgressColor = hostStyle.getPropertyValue('--waveform-progress-color');
416 | 
417 |     this.canvases = [
418 |       {
419 |         element: this.canvas,
420 |         context: this.canvasContext,
421 |         fillStyle: waveformBackgroundColor,
422 |         strokeStyle: waveformColor
423 |       },
424 |       {
425 |         element: this.progressCanvas,
426 |         context: this.progressCanvasContext,
427 |         fillStyle: waveformBackgroundColor,
428 |         strokeStyle: waveformProgressColor
429 |       }
430 |     ];
431 | 
432 |     this.frequenciesBackgroundColor = hostStyle.getPropertyValue('--frequency-background-color');
433 |     this.frequenciesBarsColor = hostStyle.getPropertyValue('--frequency-bars-color');
434 | 
435 |     setTimeout(() => {
436 |       const {width, height} = this.audioContainer.getBoundingClientRect();
437 |       this.resizeCanvas({width, height});
438 | 
439 |       if('ResizeObserver' in window) {
440 |         let observerStarted = true;
441 | 
442 |         const observer = new ResizeObserver(entries => {
443 |           if(observerStarted) {
444 |             observerStarted = false;
445 |             return;
446 |           }
447 | 
448 |           entries.forEach(({contentRect}) => {
449 |             this.resizeCanvas(contentRect);
450 | 
451 |             if(this.view === 'waveform' && this.recording) {
452 |               this.renderWaveform(this.recording);
453 |             }
454 |             if(this.view === 'frequencies' && this.analyser) {
455 |               cancelAnimationFrame(this.frequencyAnimation);
456 |               this.renderFrequencyAnalyzer();
457 |             }
458 | 
459 |             observerStarted = true;
460 |             observer.observe(this.audioContainer);
461 |           });
462 |         });
463 | 
464 |         observer.observe(this.audioContainer);
465 |       }
466 |     });
467 | 
468 |     this.showTotalTime(0);
469 |     this.showElapsedTime(0);
470 | 
471 |     this.audioContainer.addEventListener('click', this.handleWaveformClick.bind(this));
472 |     this.playButton.addEventListener('click', this.playPause.bind(this));
473 |     this.pauseButton.addEventListener('click', this.playPause.bind(this));
474 |     this.volume.addEventListener('input', e => this.setVolume(e.target.value));
475 |     this.input.addEventListener('ended', this.stopAudio.bind(this));
476 |     this.freqButton.addEventListener('click', this.showFrequencyAnalyzer.bind(this));
477 |     this.waveformButton.addEventListener('click', this.showWaveform.bind(this));
478 |     this.captureAudioButton.addEventListener('click', this.captureAudio.bind(this));
479 |     this.stopCaptureAudioButton.addEventListener('click', this.stopCaptureAudio.bind(this));
480 |     this.recordAudioButton.addEventListener('click', this.recordAudio.bind(this));
481 |     this.stopRecordAudioButton.addEventListener('click', this.stopRecordAudio.bind(this));
482 |     this.volumeMinButton.addEventListener('click', e => {
483 |       this.setVolume(0);
484 |       this.volume.value = 0;
485 |     });
486 | 
487 |     this.volumeMaxButton.addEventListener('click', e => {
488 |       this.setVolume(1);
489 |       this.volume.value = 1;
490 |     });
491 | 
492 |     const init = () => {
493 |       this.isWebKit = 'webkitAudioContext' in window;
494 |       this.context = new (window.AudioContext || window.webkitAudioContext)();
495 |       this.output = this.context.destination;
496 |       this.gainNode = this.context.createGain();
497 |       this.analyser = this.context.createAnalyser();
498 |       this.analyser.fftSize = 256;
499 | 
500 |       document.removeEventListener('mousedown', init);
501 |     };
502 | 
503 |     document.addEventListener('mousedown', init);
504 |   }
505 | 
506 |   getMediaElementSource(input) {
507 |     if(!this.mediaElementSource) {
508 |       this.mediaElementSource = this.context.createMediaElementSource(input);
509 | 
510 |       this.mediaElementSource.connect(this.analyser);
511 |       this.mediaElementSource.connect(this.gainNode);
512 |     }
513 | 
514 |     return this.mediaElementSource;
515 |   }
516 | 
517 |   getMediaStreamSource(input) {
518 |     if(!this.mediaStreamSource) {
519 |       this.mediaStreamSource = this.context.createMediaStreamSource(input);
520 | 
521 |       this.mediaStreamSource.connect(this.analyser);
522 |       this.mediaStreamSource.connect(this.gainNode);
523 |     }
524 | 
525 |     return this.mediaStreamSource;
526 |   }
527 | 
528 |   async initializeAudio(input) {
529 |     this.curSource = input instanceof HTMLAudioElement ? this.getMediaElementSource(input) : this.getMediaStreamSource(input);
530 | 
531 |     this.curSource.connect(this.analyser);
532 |     this.curSource.connect(this.gainNode);
533 |     this.gainNode.connect(this.output);
534 |   }
535 | 
536 |   async openFile(file) {
537 |     await this.loadFile(file);
538 |     await this.initializeAudio(this.input);
539 |   }
540 | 
541 |   async loadFile(file) {
542 |     const reader = new FileReader();
543 | 
544 |     reader.onloadend = e => {
545 |       this.src = e.target.result;
546 | 
547 |       if(!this.nativeFileSystemSupported) {
548 |         this.saveAudioLink.download = `capture.${this.mimeType.ext}`;
549 |         this.saveAudioLink.href = e.target.result;
550 |       }
551 |     };
552 | 
553 |     reader.readAsDataURL(file);
554 | 
555 |     await this.renderWaveform(file);
556 |     await this.initializeAudio(this.input);
557 |     this.progressContainer.style.width = 0;
558 | 
559 |     this.view = 'waveform';
560 |   }
561 | 
562 |   async saveFile(file) {
563 |     const ext = `.${file.type.split('/').pop()}`;
564 |     const handle = await window.showSaveFilePicker({
565 |       types: [
566 |         {
567 |           description: 'Audio file',
568 |           accept: {
569 |             [file.type]: ext
570 |           }
571 |         }
572 |       ]
573 |     });
574 | 
575 |     const writable = await handle.createWritable();
576 |     await writable.write({type: 'write', data: file});
577 |     await writable.close();
578 |   }
579 | 
580 |   async captureAudio() {
581 |     try {
582 |       this.stream = await navigator.mediaDevices.getUserMedia({audio: true});
583 | 
584 |       this.currentVolume = this.volume.value;
585 |       this.setVolume(0);
586 |       this.volume.disabled = true;
587 | 
588 |       await this.initializeAudio(this.stream);
589 | 
590 |       this.renderFrequencyAnalyzer();
591 |       this.view = 'frequencies';
592 |       this.state = 'capturing';
593 |     }
594 |     catch(e) {
595 |       if(e.name === 'NotAllowedError') {
596 |         this.dispatchEvent(new CustomEvent('notallowed', {
597 |           detail: {message: `Access to the device's microphone is not allowed`}
598 |         }));
599 |       }
600 |     }
601 |   }
602 | 
603 |   stopCaptureAudio() {
604 |     if(this.stream) {
605 |       this.stream.getTracks().map(track => track.stop());
606 |       this.mediaStreamSource = null;
607 | 
608 |       cancelAnimationFrame(this.frequencyAnimation);
609 |       this.clearFrequenciesDisplay();
610 | 
611 |       this.state = 'idle';
612 | 
613 |       this.volume.disabled = false;
614 |       this.setVolume(this.currentVolume);
615 |     }
616 |   }
617 | 
618 |   recordAudio() {
619 |     const chunks = [];
620 | 
621 |     this.recorder = new MediaRecorder(this.stream);
622 | 
623 |     const options = {type: `${this.mimeType.type}`};
624 | 
625 |     this.recorder.start(250);
626 | 
627 |     this.state = 'recording';
628 | 
629 |     const handleStopRecording = async () => {
630 |       this.recording = new Blob(chunks, options);
631 | 
632 |       this.stopCaptureAudio();
633 |       await this.loadFile(this.recording);
634 |     };
635 | 
636 |     const processChunk = ({data}) => {
637 |       if(data !== undefined && data.size !== 0) {
638 |         chunks.push(data);
639 | 
640 |         const recording = new Blob(chunks, options);
641 |         this.renderWaveform(recording);
642 |       }
643 |     };
644 | 
645 |     this.recorder.addEventListener('dataavailable', processChunk);
646 |     this.recorder.addEventListener('stop', handleStopRecording);
647 |   }
648 | 
649 |   stopRecordAudio() {
650 |     this.recorder.stop();
651 |   }
652 | 
653 |   showFrequencyAnalyzer() {
654 |     this.view = 'frequencies';
655 |   }
656 | 
657 |   showWaveform() {
658 |     this.view = 'waveform';
659 |   }
660 | 
661 |   setVolume(value) {
662 |     this.gainNode.gain.setValueAtTime(value, this.context.currentTime);
663 |   }
664 | 
665 |   handleWaveformClick(e) {
666 |     if(this.curSource) {
667 |       this.state = 'idle';
668 |       this.input.pause();
669 | 
670 |       cancelAnimationFrame(this.timerId);
671 |     }
672 | 
673 |     this.progressContainer.style.width = `${e.offsetX}px`;
674 |     this.input.currentTime = (e.offsetX / this.canvasWidth) * this.duration;
675 |     this.showElapsedTime(this.input.currentTime);
676 |   }
677 | 
678 |   stringToArrayBuffer(byteString) {
679 |     return new Uint8Array(byteString.length).map((_, i) => byteString.codePointAt(i));
680 |   }
681 | 
682 |   getArrayBuffer(blob) {
683 |     const reader = new FileReader();
684 |     reader.readAsArrayBuffer(blob);
685 | 
686 |     return new Promise((resolve, reject) => {
687 |       reader.onerror = err => reject(err);
688 |       reader.onloadend = e => resolve(e.target.result);
689 |     });
690 |   }
691 | 
692 |   sliceAudio(buffer, start, end) {
693 |     const chunk = start + end === buffer.byteLength ? buffer : buffer.slice(start, end);
694 |     const blob = new Blob([new Uint8Array(chunk)]);
695 |     const reader = new FileReader();
696 | 
697 |     reader.readAsArrayBuffer(blob);
698 | 
699 |     return new Promise((resolve, reject) => {
700 |       reader.onloadend = e => {
701 |         const buffer = e.target.result;
702 | 
703 |         if(this.isWebKit) {
704 |           this.context.decodeAudioData(buffer, decodedBuffer => resolve(decodedBuffer), (err) => reject(err));
705 |         }
706 |         else {
707 |           this.context.decodeAudioData(buffer)
708 |           .then(decodedBuffer => resolve(decodedBuffer))
709 |           .catch((err) => reject(err));
710 |         }
711 |       };
712 |     });
713 |   }
714 | 
715 |   async getAudioBuffers(buffer) {
716 |     const bufferLength = buffer.byteLength;
717 |     const chunkLength = bufferLength > this.maxChunkLength ? this.maxChunkLength : bufferLength;
718 | 
719 |     let start = 0;
720 |     let end = start + chunkLength;
721 |     const self = this;
722 | 
723 |     const slice = (buffer, start, end) => {
724 |       async function* gen() {
725 |         while(start < bufferLength) {
726 |           const decodedBuffer = await self.sliceAudio(buffer, start, end);
727 |           yield decodedBuffer;
728 | 
729 |           start += chunkLength;
730 |           end = start + chunkLength > bufferLength ? bufferLength : start + chunkLength;
731 |         }
732 |       }
733 | 
734 |       return gen();
735 |     };
736 | 
737 |     const audioBuffers = [];
738 | 
739 |     for await (const decodedBuffer of slice(buffer, start, end)) {
740 |       audioBuffers.push(decodedBuffer);
741 |     }
742 | 
743 |     return audioBuffers;
744 |   }
745 | 
746 |   getNodesAfterOffset(nodes, offset) {
747 |     let duration = 0;
748 |     let skipped = 0;
749 | 
750 |     const remaining = nodes.filter(node => {
751 |       duration += node.buffer.duration;
752 |       skipped += duration < offset ? node.buffer.duration : 0;
753 | 
754 |       return duration > offset;
755 |     });
756 | 
757 |     return [remaining, offset - skipped];
758 |   }
759 | 
760 |   playPause() {
761 | 
762 |     const progress = () => {
763 |       const diff = (this.input.currentTime);
764 |       this.showElapsedTime(diff);
765 |       const progressWidth = ((diff / this.duration) * this.canvasWidth);
766 |       this.progressContainer.style.width = `${progressWidth}px`;
767 | 
768 |       this.timerId = requestAnimationFrame(progress);
769 |     };
770 | 
771 |     if(this.state === 'playing') {
772 |       this.state = 'idle';
773 | 
774 |       this.input.pause();
775 |       this.pauseTime = this.input.currentTime;
776 |       this.clearFrequenciesDisplay();
777 | 
778 |       cancelAnimationFrame(this.timerId);
779 |       cancelAnimationFrame(this.frequencyAnimation);
780 |     }
781 |     else {
782 |       this.state = 'playing';
783 |       this.input.play();
784 | 
785 |       this.renderFrequencyAnalyzer();
786 |       requestAnimationFrame(progress);
787 |     }
788 |   }
789 | 
790 |   stopAudio() {
791 |     this.state = 'idle';
792 |     this.clearFrequenciesDisplay();
793 | 
794 |     cancelAnimationFrame(this.timerId);
795 |     cancelAnimationFrame(this.frequencyAnimation);
796 | 
797 |     this.input.currentTime = 0;
798 |     this.progressContainer.style.width = 0;
799 |     this.showElapsedTime(0);
800 |   }
801 | 
802 |   formatTime(secs) {
803 |     const minute = 60;
804 |     const hour = 3600;
805 | 
806 |     const hrs = Math.floor(secs / hour);
807 |     const min = Math.floor((secs % hour) / minute);
808 |     const sec = Math.floor(secs) % minute;
809 | 
810 |     const hours = hrs < 10 ? `0${hrs}` : hrs;
811 |     const minutes = min < 10 ? `0${min}` : min;
812 |     const seconds = sec < 10 ? `0${sec}` : sec;
813 |     return hours !== '00' ? `${hours}:${minutes}:${seconds}` : `${minutes}:${seconds}`;
814 |   }
815 | 
816 |   showElapsedTime(secs) {
817 |     this.elapsedTime.innerHTML = this.formatTime(secs);
818 |   }
819 | 
820 |   showTotalTime(secs) {
821 |     this.totalTime.innerHTML = this.formatTime(secs);
822 |   }
823 | 
824 |   renderFrequencyAnalyzer() {
825 |     const bufferLength = this.analyser.frequencyBinCount;
826 |     const dataArray = new Float32Array(bufferLength);
827 |     const barWidth = (this.canvasWidth - (this.bars - 1)) / this.bars;
828 | 
829 |     this.frequencyCanvasContext.clearRect(0, 0, this.canvasWidth, this.canvasHeight);
830 | 
831 |     const draw = () => {
832 |       this.frequencyAnimation = requestAnimationFrame(draw);
833 |       this.analyser.getFloatFrequencyData(dataArray);
834 |       this.frequencyCanvasContext.fillStyle = this.frequenciesBackgroundColor;
835 |       this.frequencyCanvasContext.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
836 | 
837 |       let x = 0;
838 | 
839 |       for (let i = 0; i < bufferLength; i++) {
840 |         const barHeight = (dataArray[i] + 140) * 2;
841 | 
842 |         this.frequencyCanvasContext.fillStyle = this.frequenciesBarsColor;
843 |         this.frequencyCanvasContext.fillRect(x, this.canvasHeight - barHeight * 0.75, barWidth, barHeight * 0.75);
844 | 
845 |         x += barWidth + 1;
846 |       }
847 |     };
848 | 
849 |     draw();
850 |   }
851 | 
852 |   getWaveformData(buffers) {
853 |     const dataArrays = buffers.map(buffer => buffer.getChannelData(0));
854 |     const totalLength = dataArrays.reduce((total, data) => total + data.length, 0);
855 |     const channelData = new Float32Array(totalLength);
856 | 
857 |     let offset = 0;
858 | 
859 |     dataArrays.forEach(data => {
860 |       channelData.set(data, offset);
861 |       offset += data.length;
862 |     });
863 | 
864 |     return channelData;
865 |   }
866 | 
867 |   async renderWaveform(file) {
868 |     const buffer = await this.getArrayBuffer(file);
869 |     const audioBuffers = await this.getAudioBuffers(buffer);
870 | 
871 |     this.audioBuffers = audioBuffers;
872 |     this.duration = audioBuffers.reduce((total, buffer) => total + buffer.duration, 0);
873 | 
874 |     this.showTotalTime(this.duration);
875 | 
876 |     const channelData = this.getWaveformData(audioBuffers);
877 |     const drawLines = 2000;
878 |     const totallength = channelData.length;
879 |     const eachBlock = Math.floor(totallength / drawLines);
880 |     const lineGap = this.canvasWidth / drawLines;
881 | 
882 |     this.canvases.forEach(canvas => {
883 |       canvas.context.save();
884 |       canvas.context.fillStyle = canvas.fillStyle;
885 |       canvas.context.fillRect(0, 0, this.canvasWidth, this.canvasHeight);
886 |       canvas.context.strokeStyle = canvas.strokeStyle;
887 |       canvas.context.translate(0, this.canvasHeight / 2);
888 |       canvas.context.lineWidth = 1;
889 |       canvas.context.beginPath();
890 | 
891 |       for(let i = 0; i <= drawLines; i++) {
892 |         const audioBuffKey = Math.floor(eachBlock * i);
893 |         const x = i * lineGap;
894 |         const y = channelData[audioBuffKey] * this.canvasHeight * 0.8;
895 | 
896 |         canvas.context.moveTo(x, y);
897 |         canvas.context.lineTo(x, (y * -1));
898 |       }
899 | 
900 |       canvas.context.stroke();
901 |       canvas.context.restore();
902 |       canvas.context.strokeStyle = canvas.strokeStyle;
903 |       canvas.context.moveTo(0, this.canvasHeight / 2);
904 |       canvas.context.lineTo(this.canvasWidth, this.canvasHeight / 2);
905 |       canvas.context.stroke();
906 |       canvas.context.restore();
907 |     });
908 |   }
909 | 
910 |   get view() {
911 |     return this.getAttribute('view');
912 |   }
913 | 
914 |   set view(value) {
915 |     this.setAttribute('view', value);
916 |   }
917 | 
918 |   get state() {
919 |     return this.getAttribute('state');
920 |   }
921 | 
922 |   set state(value) {
923 |     this.setAttribute('state', value);
924 |   }
925 | 
926 |   get src() {
927 |     return this.getAttribute('src');
928 |   }
929 | 
930 |   set src(value) {
931 |     this.setAttribute('src', value);
932 |     this.input.src = value;
933 |   }
934 | 
935 |   clearWaveform() {
936 |     this.canvases.forEach(canvas => canvas.context.clearRect(0, 0, canvas.element.width, canvas.element.height));
937 |   }
938 | 
939 |   clearFrequenciesDisplay() {
940 |     this.frequencyCanvasContext.clearRect(0, 0, this.frequencyCanvas.width, this.frequencyCanvas.height);
941 |   }
942 | }
943 | 
944 | customElements.define('audio-recorder', AudioRecorder);
945 | 


--------------------------------------------------------------------------------
/dist/audio-recorder.js:
--------------------------------------------------------------------------------
1 | (()=>{"use strict";class t extends HTMLElement{static get observedAttributes(){return["label"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n            <style>\n                :host {\n                    --button-color: transparent;\n                    --button-color-hover: #e2e2e2;\n                    --font-color: #000000;\n                    --font-size: 1em;\n                    --icon-size: 24px;\n                    --button-padding: 0 8px 0 8px;\n                    --button-padding-circle: 8px;\n                    --border-radius: 2px;\n                    display: block;\n                    width: fit-content;\n                }\n                :host([raised]) {\n                  --button-color: #e2e2e2;\n                }\n                button {\n                    border: none;\n                    border-radius: var(--border-radius);\n                    min-height: 36px;\n                    padding: var(--button-padding);\n                    font-size: var(--font-size);\n                    color: var(--font-color);\n                    background-color: var(--button-color);\n                    cursor: pointer;\n                    outline: none;\n                    display: flex;\n                    align-items: center;\n                    justify-content: center;\n                    position: relative;\n                    overflow: hidden;\n                }\n                :host([label]) button {\n                    min-width: 88px;\n                }\n                button:hover {\n                    transition: background-color 0.3s ease-out;\n                    background-color: var(--button-color-hover);\n                }\n                :host([disabled]) button {\n                    opacity: 0.5;\n                    cursor: not-allowed;\n                }\n                :host([disabled]) button:hover {\n                    background-color: transparent;\n                }\n                :host([disabled]) button .ripple {\n                    display: none;\n                }\n                button.active .ripple {\n                    animation-name: ripple;\n                    animation-duration: 0.4s;\n                    animation-timing-function: ease-out;\n                    background-color: #808080;\n                    border-radius: 50%;\n                    position: absolute;\n                    top: 50%;\n                    left: 50%;\n                    transform: translate(-50%, -50%);\n                }\n                #label {\n                    display: inline-block;\n                    position: relative;\n                    margin-right: 8px;\n                    margin-left: 8px;\n                }\n                :host([circle]) button {\n                    border-radius: 50%;\n                    --button-padding: var(--button-padding-circle);\n                }\n                :host([raised]) button {\n                    background-color: var(--button-color);\n                    box-shadow: rgba(0, 0, 0, 0.12) 0px 1px 6px, rgba(0, 0, 0, 0.12) 0px 1px 4px;\n                }\n                :host([raised]) button[disabled]:hover {\n                    background-color: var(--button-color);\n                }\n                ::slotted([slot="left-icon"]) {\n                    float: left;\n                    font-size: var(--icon-size) !important;\n                }\n                ::slotted([slot="right-icon"]) {\n                    float: right;\n                    font-size: var(--icon-size) !important;\n                }\n                ::slotted([slot="file-input"]) {\n                  position: absolute;\n                  top: 0;\n                  left: 0;\n                  bottom: 0;\n                  right: 0;\n                  opacity: 0;\n                  z-index: 9;\n                }\n                \n                @keyframes ripple {\n                    from {\n                        width: 0;\n                        height: 0;\n                        opacity: 0.8;\n                    }\n                    to {\n                        width: 100px;\n                        height: 100px;\n                        opacity: 0.1;\n                    }                \n                }\n            </style>\n            \n            <button type="button">\n                <div class="ripple"></div>\n                <slot name="file-input"></slot>\n                <slot name="left-icon"></slot>\n                <span id="label"></span>\n                <slot name="right-icon"></slot>\n            </button>\n        ',this.button=this.shadowRoot.querySelector("button"),this.label=this.shadowRoot.querySelector("#label"),this.ripple=this.shadowRoot.querySelector(".ripple")}connectedCallback(){this.hasAttribute("label")?this.label.textContent=this.getAttribute("label"):this.label.style.display="none",this.button.addEventListener("click",(()=>{this.button.classList.add("active")})),this.ripple.addEventListener("animationend",(()=>{this.button.classList.remove("active")}))}attributeChangedCallback(t){"label"===t&&(this.hasAttribute("label")?this.label.textContent=this.getAttribute("label"):this.label.style.display="none")}get disabled(){return this.hasAttribute("disabled")}set disabled(t){this.button.disabled=t,t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}}customElements.get("material-button")||customElements.define("material-button",t);class e extends HTMLElement{static get observedAttributes(){return["value","disabled"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n            <style>\n                :host {\n                    display: block;\n                    --thumb-color: #cccccc;\n                    --thumb-color-light: #ffffff;\n                    --track-color: #cccccc;\n                    --thumb-size: 16px;\n                    --track-height: 4px;\n                    --margin: 5px;\n                }\n                :host([disabled]) input {\n                    opacity: 0.5;\n                }\n                input[type=range] {\n                    -webkit-appearance: none;\n                    background-color: transparent;\n                    margin: 0;\n                    width: 100%;\n                    z-index: 1;\n                    cursor: pointer;\n                }\n                input[type=range]:focus {\n                    outline: none;\n                    \n                }\n                input[type=range]::-webkit-slider-runnable-track {\n                    width: 100%;\n                    height: var(--track-height);\n                    cursor: pointer;\n                    background: var(--track-color);\n                    border-radius: 1.3px;\n                }\n    \n                input[type=range]::-moz-range-track {\n                    width: 100%;\n                    height: var(--track-height);\n                    cursor: pointer;\n                    background: var(--track-color);\n                    border-radius: 1.3px;\n                }\n                input[type=range]::-moz-focus-outer {\n                    border: 0;\n                }\n                input[type=range]::-ms-track {\n                    width: 100%;\n                    height: var(--track-height);\n                    cursor: pointer;\n                    background: transparent;\n                    border-color: transparent;\n                    border-width: 16px 0;\n                    color: transparent;\n                }\n    \n                input[type=range]::-webkit-slider-thumb {\n                    height: var(--thumb-size);\n                    width: var(--thumb-size);\n                    border-radius: 50%;\n                    background: var(--thumb-color);\n                    cursor: pointer;\n                    -webkit-appearance: none;\n                    margin-top: calc((var(--track-height) - var(--thumb-size) ) / 2);\n                    box-shadow: 0 0 0 0 transparent;\n                    transition: box-shadow 0.2s ease-in;\n                }\n                \n                input[type=range]:hover::-webkit-slider-thumb {\n                    box-shadow: 0 0 0 var(--thumb-size) var(--thumb-color-light);\n                }\n                input[type=range]:focus::-webkit-slider-thumb {\n                    box-shadow: 0 0 0 var(--thumb-size) var(--thumb-color-light);\n                }\n                \n    \n                input[type=range]::-moz-range-thumb {\n                    height: var(--thumb-size);\n                    width: var(--thumb-size);\n                    border: 0;\n                    border-radius: 50%;\n                    background: var(--thumb-color);\n                    cursor: pointer;\n                    margin-top: calc((var(--track-height) - var(--thumb-size) ) / 2);\n                    box-shadow: 0 0 0 0 transparent;\n                    transition: box-shadow 0.2s ease-in;\n                }\n                \n                input[type=range]:hover::-moz-range-thumb {\n                    box-shadow: 0 0 0 var(--thumb-size) var(--thumb-color-light);\n                }\n                input[type=range]:focus::-moz-range-thumb {\n                    box-shadow: 0 0 0 var(--thumb-size) var(--thumb-color-light);\n                }\n    \n                input[type=range]::-ms-thumb {\n                    height: 16px;\n                    width: 16px;\n                    border-radius: 50%;\n                    background: rgb(204, 204, 204);\n                    cursor: pointer;\n                    box-shadow: 0 0 0 0 rgba(204, 204, 204, 0.1);\n                    transition: box-shadow 0.2s ease-in;\n                }\n                \n                input[type=range]:hover::-ms-thumb {\n                    box-shadow: 0 0 0 16px rgba(204, 204, 204, 0.1);\n                }\n                input[type=range]:focus::-ms-thumb {\n                    box-shadow: 0 0 0 16px rgba(204, 204, 204, 0.1);\n                }\n                \n                input[type=range]::-ms-fill-lower {\n                    background: rgb(204, 204, 204);\n                    border: 0.2px solid #010101;\n                    border-radius: 2.6px;\n                }\n                input[type=range]::-ms-fill-upper {\n                    background: rgb(204, 204, 204);\n                    border: 0.2px solid #010101;\n                    border-radius: 2.6px;\n                }\n      \n                #container {\n                    margin: var(--margin);\n                    position: relative;\n                    display: flex;\n                }\n                #output {\n                    position: absolute;\n                }\n                #input-container {\n                  display: flex;\n                  cursor: pointer;\n                  width: 100%;\n                  height: var(--thumb-size);\n                }\n            </style>\n            \n            <div id="container">\n                <div id="input-container">\n                  <input type="range">\n                </div>\n                <output id="output"></output>\n            </div>\n        ',this.input=this.shadowRoot.querySelector("input[type=range]")}connectedCallback(){this.container=this.shadowRoot.querySelector("#container"),this.host=this.input.getRootNode().host,this.min=this.hasAttribute("min")?this.getAttribute("min"):1,this.input.min=this.min,this.max=this.hasAttribute("max")?this.getAttribute("max"):100,this.input.max=this.max,this.step=this.hasAttribute("step")?this.getAttribute("step"):1,this.input.step=this.step,this.input.value=this.hasAttribute("value")?this.getAttribute("value"):this.input.value,this.value=this.input.value,this.disabled=this.hasAttribute("disabled"),this.input.addEventListener("input",this.handleInput.bind(this));const t=/rgba\((\d{1,3}),\s?(\d{1,3}),\s?(\d{1,3}),\s?(\d|\d\.\d+)\)/,e=getComputedStyle(this.host),n=e.getPropertyValue("--thumb-color").trim()||e.getPropertyValue("--thumb-color").trim(),i=t.exec(n),o=/^#([A-Fa-f0-9]{3}){1,2}$/.test(n)?this.hexToRgbA(n):/rgb\((.+)\)/.test(n)?n.replace(/rgb\((.+)\)/,"rgba($1, 0.1)"):t.test(n)?`rgba(${i[1]}, ${i[2]}, ${i[3]}, 0.1)`:null;if(null===o)throw new Error("invalid color specified for --thumb color: "+n);this.host.style.setProperty("--thumb-color-light",o)}handleInput(t){this.value=t.target.value,this.dispatchEvent(new CustomEvent("change",{detail:{value:t.target.value}}))}hexToRgbA(t){let e=[...t.substring(1)];return 3===e.length&&(e=[e[0],e[0],e[1],e[1],e[2],e[2]]),e="0x"+e.join(""),`rgba(${[e>>16&255,e>>8&255,255&e].join(",")}, 0.1)`}set value(t){this.input.value=t,this.setAttribute("value",t)}get value(){return this.getAttribute("value")}set disabled(t){this.input.disabled=t,t?this.setAttribute("disabled",""):this.removeAttribute("disabled")}get disabled(){return this.hasAttribute("disabled")}attributeChangedCallback(t,e,n){"value"===t&&(this.input.value=n),"disabled"===t&&(this.input.disabled=this.hasAttribute("disabled"))}}customElements.get("material-slider")||customElements.define("material-slider",e);class n extends HTMLElement{static get observedAttributes(){return["view"]}constructor(){super(),this.attachShadow({mode:"open"}).innerHTML='\n      <style>\n        :host {\n          --width: 210px;\n          --height: 300px;\n          --border: none;\n          --frequency-background-color: #ffffff;\n          --frequency-bars-color: #ff0000;\n          --waveform-background-color: #ffffff;\n          --waveform-color: #ff0000;\n          --waveform-progress-color: #337ab7;\n          display: inline-flex;\n          flex-direction: column;\n          border: var(--border);\n          box-sizing: content-box;\n          min-width: 210px;\n          width: var(--width);\n          min-height: var(--height);\n        }\n        \n        @font-face {\n          font-family: \'Material Icons\';\n          font-style: normal;\n          font-weight: 400;\n          src: url(https://fonts.gstatic.com/s/materialicons/v128/flUhRq6tzZclQEJ-Vdg-IuiaDsNcIhQ8tQ.woff2) format(\'woff2\');\n        }\n        \n        .material-icons {\n          font-family: \'Material Icons\';\n          font-weight: normal;\n          font-style: normal;\n          font-size: 24px;\n          line-height: 1;\n          letter-spacing: normal;\n          text-transform: none;\n          display: inline-block;\n          white-space: nowrap;\n          word-wrap: normal;\n          direction: ltr;\n          -webkit-font-feature-settings: \'liga\';\n          -webkit-font-smoothing: antialiased;\n        }\n        \n        canvas {\n          display: block;\n        }\n        \n        material-slider {\n          --track-height: 1px;\n          --thumb-size: 12px;\n        }\n        \n        #volume-min,\n        #volume-max {\n          --button-color-hover: transparent;\n        }\n        \n        #buttons {\n          display: flex;\n          flex-direction: row;\n        }\n        \n        #controls {\n          display: flex;\n          flex-direction: row;\n          flex-wrap: wrap;\n          justify-content: space-between;\n          align-items: center;\n          padding: 5px 10px 5px 5px;\n          max-width: 800px;\n        }\n        \n        #time {\n          display: flex;\n          align-items: center;\n          padding: 5px;\n        }\n        \n        #volume-container {\n          display: flex;\n          align-items: center;\n        }\n        \n        #container {\n          width: 100%;\n          height: 100%;\n          display: flex;\n          flex-direction: column;\n          flex-grow: 1;\n        }\n        \n        #audio-container {\n          position: relative;\n          flex-grow: 1;\n          pointer-events: none;\n        }\n        \n        :host([src]) #audio-container {\n          pointer-events: initial;\n        }\n        \n        #waveform-container,\n        #frequencies-container {\n          display: none;\n        }\n        \n        #waveform-container {\n          background-color: var(--waveform-background-color);\n        }\n        \n        #frequencies-container {\n          z-index: 1;\n          background-color: var(--frequency-background-color);\n        }\n        \n        :host([view="frequencies"]) #frequencies-container {\n          display: block;\n        }\n        \n        :host([view="frequencies"]) #frequencies-button {\n          opacity: .5;\n          cursor: not-allowed;\n          pointer-events: none;\n        }\n        \n        :host([view="frequencies"]) #audio-container {\n          pointer-events: none;\n        }\n        \n        :host([view="waveform"]) #waveform-container,\n        :host([view="waveform"]) #progress-container {\n          display: block;\n        }\n        \n        :host([view="waveform"]) #waveform-button {\n          opacity: .5;\n          cursor: not-allowed;\n          pointer-events: none;\n        }\n        \n        #progress-container {\n          display: none;\n          position: absolute;\n          top: 0;\n          left: 0;\n          overflow: hidden;\n          width: 0;\n          border-right-width: 1px;\n          border-right-style: solid;\n          border-right-color: var(--waveform-progress-color);\n        }\n        \n        audio {\n          display: none;\n        }\n        \n        #stop-capture-audio,\n        #stop-record-audio {\n          display: none;\n        }\n        \n        #stop-record-audio {\n          --font-color: #ff0000;\n        }\n        \n        #record-audio {\n          --font-color: #ff0000;\n          opacity: .5;\n          cursor: not-allowed;\n          pointer-events: none;\n        }\n        \n        #play,\n        #save-audio,\n        :host([src][state="capturing"]) #play,\n        :host([src][state="capturing"]) #save-audio {\n          opacity: .5;\n          cursor: not-allowed;\n          pointer-events: none;\n        }\n        \n        :host([src]) #play,\n        :host([src]) #save-audio {\n          opacity: 1;\n          cursor: pointer;\n          pointer-events: initial;\n        }\n        \n        #save-audio a {\n          color: #000000;\n          text-decoration: none;\n        }\n        #save-audio a i {\n          display: block;\n          width: 100%;\n          height: 100%;\n        }\n        \n        #pause {\n          display: none;\n        }\n        \n        :host([state="playing"]) #pause {\n          display: block;\n        }\n        \n        :host([state="playing"]) #play {\n          display: none;\n        }\n        \n        :host([state="playing"]) #capture-audio {\n          opacity: .5;\n          cursor: not-allowed;\n          pointer-events: none;\n        }\n        \n        :host([state="capturing"]) #stop-capture-audio,\n        :host([state="recording"]) #stop-capture-audio {\n          display: block;\n        }\n        :host([state="capturing"]) #capture-audio,\n        :host([state="recording"]) #capture-audio {\n          display: none;\n        }\n        \n        :host([state="capturing"]) #record-audio {\n          opacity: 1;\n          cursor: pointer;\n          pointer-events: initial;\n        }\n        \n        :host([state="recording"]) #stop-record-audio {\n          display: block;\n        }\n        :host([state="recording"]) #record-audio {\n          display: none;\n        }\n      </style>\n      \n      <audio id="input" controls></audio>\n      \n      <div id="container">\n        <div id="audio-container">\n          <div id="frequencies-container">\n            <canvas id="frequencies"></canvas>\n          </div>\n  \n          <div id="waveform-container">\n            <canvas id="waveform"></canvas>\n          </div>\n          \n          <div id="progress-container">\n            <canvas id="progress"></canvas>\n          </div>\n        </div>\n        \n        <div id="controls">\n          <div id="buttons">\n            <material-button id="capture-audio" raised part="button">\n              <i class="material-icons" slot="left-icon">mic</i>\n            </material-button>\n            \n            <material-button id="stop-capture-audio" raised part="button">\n              <i class="material-icons" slot="left-icon">mic_off</i>\n            </material-button>\n            \n            <material-button id="play" raised part="button">\n              <i class="material-icons" slot="left-icon">play_arrow</i>\n            </material-button>\n            \n            <material-button id="pause" raised part="button">\n              <i class="material-icons" slot="left-icon">pause</i>\n            </material-button>\n      \n            <material-button id="record-audio" raised part="button">\n              <i class="material-icons" slot="left-icon">fiber_manual_record</i>\n            </material-button>\n            \n            <material-button id="stop-record-audio" raised part="button">\n              <i class="material-icons" slot="left-icon">stop</i>\n            </material-button>\n            \n            <material-button id="save-audio" raised part="button">\n              <a id="save-audio-link" slot="left-icon" target="_blank">\n                <i class="material-icons">save</i>\n              </a>\n            </material-button>\n            \n            <material-button id="frequencies-button" raised part="button">\n              <i class="material-icons" slot="left-icon">equalizer</i>\n            </material-button>\n            \n            <material-button id="waveform-button" raised part="button">\n              <i class="material-icons" slot="left-icon">graphic_eq</i>\n            </material-button>\n          </div>\n          \n          <div id="volume-container">\n            <material-button id="volume-min" circle part="volume-button">\n              <i class="material-icons" slot="left-icon">volume_off</i>\n            </material-button>\n            \n            <material-slider id="volume" value="1" min="0" max="1" step="0.01" part="slider"></material-slider>\n            \n            <material-button id="volume-max" circle part="volume-button">\n              <i class="material-icons" slot="left-icon">volume_up</i>\n            </material-button>\n          </div>\n        \n          <div id="time" part="time">\n            <span id="elapsed-time"></span> / <span id="total-time"></span>\n          </div>\n        </div>\n      </div>\n    ',this.hours=0,this.minutes=0,this.seconds=0,this.secs=0,this.pauseTime=0,this.audioBuffers=[],this.frequencies=!1,this.state="idle",this.view=this.getAttribute("view")||"frequencies",this.bars=parseInt(this.getAttribute("bars")||20,10),this.mediaElementSource=null,this.mediaStreamSource=null,this.nativeFileSystemSupported="showSaveFilePicker"in window,this.maxChunkLength=524e3,this.canvas=this.shadowRoot.querySelector("#waveform"),this.canvasContext=this.canvas.getContext("2d"),this.progressCanvas=this.shadowRoot.querySelector("#progress"),this.progressCanvasContext=this.progressCanvas.getContext("2d"),this.audioContainer=this.shadowRoot.querySelector("#audio-container"),this.frequencyCanvas=this.shadowRoot.querySelector("#frequencies"),this.frequencyCanvasContext=this.frequencyCanvas.getContext("2d"),this.waveformContainer=this.shadowRoot.querySelector("#waveform-container"),this.progressContainer=this.shadowRoot.querySelector("#progress-container"),this.frequenciesContainer=this.shadowRoot.querySelector("#frequencies-container"),this.playButton=this.shadowRoot.querySelector("#play"),this.pauseButton=this.shadowRoot.querySelector("#pause"),this.elapsedTime=this.shadowRoot.querySelector("#elapsed-time"),this.totalTime=this.shadowRoot.querySelector("#total-time"),this.volume=this.shadowRoot.querySelector("#volume"),this.volumeMinButton=this.shadowRoot.querySelector("#volume-min"),this.volumeMaxButton=this.shadowRoot.querySelector("#volume-max"),this.input=this.shadowRoot.querySelector("audio"),this.freqButton=this.shadowRoot.querySelector("#frequencies-button"),this.waveformButton=this.shadowRoot.querySelector("#waveform-button"),this.captureAudioButton=this.shadowRoot.querySelector("#capture-audio"),this.stopCaptureAudioButton=this.shadowRoot.querySelector("#stop-capture-audio"),this.recordAudioButton=this.shadowRoot.querySelector("#record-audio"),this.stopRecordAudioButton=this.shadowRoot.querySelector("#stop-record-audio"),this.saveAudioLink=this.shadowRoot.querySelector("#save-audio-link"),this.nativeFileSystemSupported&&this.saveAudioLink.addEventListener("click",(async()=>this.saveFile(this.recording)))}resizeCanvas({width:t,height:e}){this.canvas.width=0,this.canvas.height=0,this.canvas.width=t,this.canvas.height=e,this.progressCanvas.width=t,this.progressCanvas.height=e,this.frequencyCanvas.width=t,this.frequencyCanvas.height=e,this.canvasWidth=this.canvas.width,this.canvasHeight=this.canvas.height,this.mimeType="isTypeSupported"in MediaRecorder?[{type:"audio/mpeg",ext:"mp3"},{type:"audio/webm",ext:"webm"},{type:"audio/mp4",ext:"mp4"}].find((({type:t})=>MediaRecorder.isTypeSupported(t))):{type:"audio/mpeg",ext:"mp3"}}connectedCallback(){const t=getComputedStyle(this.shadowRoot.host),e=t.getPropertyValue("--waveform-background-color"),n=t.getPropertyValue("--waveform-color"),i=t.getPropertyValue("--waveform-progress-color");this.canvases=[{element:this.canvas,context:this.canvasContext,fillStyle:e,strokeStyle:n},{element:this.progressCanvas,context:this.progressCanvasContext,fillStyle:e,strokeStyle:i}],this.frequenciesBackgroundColor=t.getPropertyValue("--frequency-background-color"),this.frequenciesBarsColor=t.getPropertyValue("--frequency-bars-color"),setTimeout((()=>{const{width:t,height:e}=this.audioContainer.getBoundingClientRect();if(this.resizeCanvas({width:t,height:e}),"ResizeObserver"in window){let t=!0;const e=new ResizeObserver((n=>{t?t=!1:n.forEach((({contentRect:n})=>{this.resizeCanvas(n),"waveform"===this.view&&this.recording&&this.renderWaveform(this.recording),"frequencies"===this.view&&this.analyser&&(cancelAnimationFrame(this.frequencyAnimation),this.renderFrequencyAnalyzer()),t=!0,e.observe(this.audioContainer)}))}));e.observe(this.audioContainer)}})),this.showTotalTime(0),this.showElapsedTime(0),this.audioContainer.addEventListener("click",this.handleWaveformClick.bind(this)),this.playButton.addEventListener("click",this.playPause.bind(this)),this.pauseButton.addEventListener("click",this.playPause.bind(this)),this.volume.addEventListener("change",(t=>this.setVolume(t.detail.value))),this.input.addEventListener("ended",this.stopAudio.bind(this)),this.freqButton.addEventListener("click",this.showFrequencyAnalyzer.bind(this)),this.waveformButton.addEventListener("click",this.showWaveform.bind(this)),this.captureAudioButton.addEventListener("click",this.captureAudio.bind(this)),this.stopCaptureAudioButton.addEventListener("click",this.stopCaptureAudio.bind(this)),this.recordAudioButton.addEventListener("click",this.recordAudio.bind(this)),this.stopRecordAudioButton.addEventListener("click",this.stopRecordAudio.bind(this)),this.volumeMinButton.addEventListener("click",(t=>{this.setVolume(0),this.volume.value=0})),this.volumeMaxButton.addEventListener("click",(t=>{this.setVolume(1),this.volume.value=1}));const o=()=>{this.isWebKit="webkitAudioContext"in window,this.context=new(window.AudioContext||window.webkitAudioContext),this.output=this.context.destination,this.gainNode=this.context.createGain(),this.analyser=this.context.createAnalyser(),this.analyser.fftSize=256,document.removeEventListener("mousedown",o)};document.addEventListener("mousedown",o)}getMediaElementSource(t){return this.mediaElementSource||(this.mediaElementSource=this.context.createMediaElementSource(t),this.mediaElementSource.connect(this.analyser),this.mediaElementSource.connect(this.gainNode)),this.mediaElementSource}getMediaStreamSource(t){return this.mediaStreamSource||(this.mediaStreamSource=this.context.createMediaStreamSource(t),this.mediaStreamSource.connect(this.analyser),this.mediaStreamSource.connect(this.gainNode)),this.mediaStreamSource}async initializeAudio(t){this.curSource=t instanceof HTMLAudioElement?this.getMediaElementSource(t):this.getMediaStreamSource(t),this.curSource.connect(this.analyser),this.curSource.connect(this.gainNode),this.gainNode.connect(this.output)}async openFile(t){await this.loadFile(t),await this.initializeAudio(this.input)}async loadFile(t){const e=new FileReader;e.onloadend=t=>{this.src=t.target.result,this.nativeFileSystemSupported||(this.saveAudioLink.download="capture."+this.mimeType.ext,this.saveAudioLink.href=t.target.result)},e.readAsDataURL(t),await this.renderWaveform(t),await this.initializeAudio(this.input),this.progressContainer.style.width=0,this.view="waveform"}async saveFile(t){const e="."+t.type.split("/").pop(),n=await window.showSaveFilePicker({types:[{description:"Audio file",accept:{[t.type]:e}}]}),i=await n.createWritable();await i.write({type:"write",data:t}),await i.close()}async captureAudio(){try{this.stream=await navigator.mediaDevices.getUserMedia({audio:!0}),this.currentVolume=this.volume.value,this.setVolume(0),this.volume.disabled=!0,await this.initializeAudio(this.stream),this.renderFrequencyAnalyzer(),this.view="frequencies",this.state="capturing"}catch(t){"NotAllowedError"===t.name&&this.dispatchEvent(new CustomEvent("notallowed",{detail:{message:"Access to the device's microphone is not allowed"}}))}}stopCaptureAudio(){this.stream&&(this.stream.getTracks().map((t=>t.stop())),this.mediaStreamSource=null,cancelAnimationFrame(this.frequencyAnimation),this.clearFrequenciesDisplay(),this.state="idle",this.volume.disabled=!1,this.setVolume(this.currentVolume))}recordAudio(){const t=[];this.recorder=new MediaRecorder(this.stream);const e={type:""+this.mimeType.type};this.recorder.start(250),this.state="recording",this.recorder.addEventListener("dataavailable",(({data:n})=>{if(void 0!==n&&0!==n.size){t.push(n);const i=new Blob(t,e);this.renderWaveform(i)}})),this.recorder.addEventListener("stop",(async()=>{this.recording=new Blob(t,e),this.stopCaptureAudio(),await this.loadFile(this.recording)}))}stopRecordAudio(){this.recorder.stop()}showFrequencyAnalyzer(){this.view="frequencies"}showWaveform(){this.view="waveform"}setVolume(t){this.gainNode.gain.setValueAtTime(t,this.context.currentTime)}handleWaveformClick(t){this.curSource&&(this.state="idle",this.input.pause(),cancelAnimationFrame(this.timerId)),this.progressContainer.style.width=t.offsetX+"px",this.input.currentTime=t.offsetX/this.canvasWidth*this.duration,this.showElapsedTime(this.input.currentTime)}stringToArrayBuffer(t){return new Uint8Array(t.length).map(((e,n)=>t.codePointAt(n)))}getArrayBuffer(t){const e=new FileReader;return e.readAsArrayBuffer(t),new Promise(((t,n)=>{e.onerror=t=>n(t),e.onloadend=e=>t(e.target.result)}))}sliceAudio(t,e,n){const i=e+n===t.byteLength?t:t.slice(e,n),o=new Blob([new Uint8Array(i)]),a=new FileReader;return a.readAsArrayBuffer(o),new Promise(((t,e)=>{a.onloadend=n=>{const i=n.target.result;this.isWebKit?this.context.decodeAudioData(i,(e=>t(e)),(t=>e(t))):this.context.decodeAudioData(i).then((e=>t(e))).catch((t=>e(t)))}}))}async getAudioBuffers(t){const e=t.byteLength,n=e>this.maxChunkLength?this.maxChunkLength:e;let i=0+n;const o=this,a=[];for await(const s of((t,i,a)=>async function*(){for(;i<e;){const s=await o.sliceAudio(t,i,a);yield s,a=(i+=n)+n>e?e:i+n}}())(t,0,i))a.push(s);return a}getNodesAfterOffset(t,e){let n=0,i=0;return[t.filter((t=>(n+=t.buffer.duration,i+=n<e?t.buffer.duration:0,n>e))),e-i]}playPause(){const t=()=>{const e=this.input.currentTime;this.showElapsedTime(e);const n=e/this.duration*this.canvasWidth;this.progressContainer.style.width=n+"px",this.timerId=requestAnimationFrame(t)};"playing"===this.state?(this.state="idle",this.input.pause(),this.pauseTime=this.input.currentTime,this.clearFrequenciesDisplay(),cancelAnimationFrame(this.timerId),cancelAnimationFrame(this.frequencyAnimation)):(this.state="playing",this.input.play(),this.renderFrequencyAnalyzer(),requestAnimationFrame(t))}stopAudio(){this.state="idle",this.clearFrequenciesDisplay(),cancelAnimationFrame(this.timerId),cancelAnimationFrame(this.frequencyAnimation),this.input.currentTime=0,this.progressContainer.style.width=0,this.showElapsedTime(0)}formatTime(t){const e=Math.floor(t/3600),n=Math.floor(t%3600/60),i=Math.floor(t)%60,o=e<10?"0"+e:e,a=n<10?"0"+n:n,s=i<10?"0"+i:i;return"00"!==o?`${o}:${a}:${s}`:`${a}:${s}`}showElapsedTime(t){this.elapsedTime.innerHTML=this.formatTime(t)}showTotalTime(t){this.totalTime.innerHTML=this.formatTime(t)}renderFrequencyAnalyzer(){const t=this.analyser.frequencyBinCount,e=new Float32Array(t),n=(this.canvasWidth-(this.bars-1))/this.bars;this.frequencyCanvasContext.clearRect(0,0,this.canvasWidth,this.canvasHeight);const i=()=>{this.frequencyAnimation=requestAnimationFrame(i),this.analyser.getFloatFrequencyData(e),this.frequencyCanvasContext.fillStyle=this.frequenciesBackgroundColor,this.frequencyCanvasContext.fillRect(0,0,this.canvasWidth,this.canvasHeight);let o=0;for(let i=0;i<t;i++){const t=2*(e[i]+140);this.frequencyCanvasContext.fillStyle=this.frequenciesBarsColor,this.frequencyCanvasContext.fillRect(o,this.canvasHeight-.75*t,n,.75*t),o+=n+1}};i()}getWaveformData(t){const e=t.map((t=>t.getChannelData(0))),n=e.reduce(((t,e)=>t+e.length),0),i=new Float32Array(n);let o=0;return e.forEach((t=>{i.set(t,o),o+=t.length})),i}async renderWaveform(t){const e=await this.getArrayBuffer(t),n=await this.getAudioBuffers(e);this.audioBuffers=n,this.duration=n.reduce(((t,e)=>t+e.duration),0),this.showTotalTime(this.duration);const i=this.getWaveformData(n),o=2e3,a=i.length,s=Math.floor(a/o),r=this.canvasWidth/o;this.canvases.forEach((t=>{t.context.save(),t.context.fillStyle=t.fillStyle,t.context.fillRect(0,0,this.canvasWidth,this.canvasHeight),t.context.strokeStyle=t.strokeStyle,t.context.translate(0,this.canvasHeight/2),t.context.lineWidth=1,t.context.beginPath();for(let e=0;e<=o;e++){const n=Math.floor(s*e),o=e*r,a=i[n]*this.canvasHeight*.8;t.context.moveTo(o,a),t.context.lineTo(o,-1*a)}t.context.stroke(),t.context.restore(),t.context.strokeStyle=t.strokeStyle,t.context.moveTo(0,this.canvasHeight/2),t.context.lineTo(this.canvasWidth,this.canvasHeight/2),t.context.stroke(),t.context.restore()}))}get view(){return this.getAttribute("view")}set view(t){this.setAttribute("view",t)}get state(){return this.getAttribute("state")}set state(t){this.setAttribute("state",t)}get src(){return this.getAttribute("src")}set src(t){this.setAttribute("src",t),this.input.src=t}clearWaveform(){this.canvases.forEach((t=>t.context.clearRect(0,0,t.element.width,t.element.height)))}clearFrequenciesDisplay(){this.frequencyCanvasContext.clearRect(0,0,this.frequencyCanvas.width,this.frequencyCanvas.height)}}customElements.define("audio-recorder",n)})();


--------------------------------------------------------------------------------