Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/DannyMoerkerke/audio-recorder
Audio Recorder Web Component
https://github.com/DannyMoerkerke/audio-recorder
Last synced: 9 days ago
JSON representation
Audio Recorder Web Component
- Host: GitHub
- URL: https://github.com/DannyMoerkerke/audio-recorder
- Owner: DannyMoerkerke
- License: other
- Created: 2020-11-04T20:17:04.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2023-12-05T14:27:50.000Z (11 months ago)
- Last Synced: 2024-10-02T18:47:37.424Z (about 1 month ago)
- Language: JavaScript
- Homepage: https://dannymoerkerke.github.io/audio-recorder/
- Size: 433 KB
- Stars: 36
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
- License: LICENSE
Awesome Lists containing this project
README
# audio-recorder
An audio recorder Web Component that records audio through the microphone of the user's device.
It provides a graphic frequency analyzer and waveform view of the recorded audio and uses the MediaDevices API,
Web Audio API and the MediaRecorder API.
## Installation
```
npm i @dannymoerkerke/audio-recorder
```
## Usage
Add a `` tag to your page:
```css
<script type="module" src="path/to/node_modules/@dannymoerkerke/src/audio-recorder.js">
```
or import it:
```javascript
import './path/to/node_modules/@dannymoerkerke/src/audio-recorder.js';
```
You can also import the bundled version which is in `dist` for use with Webpack:
```javascript
import './path/to/node_modules/@dannymoerkerke/dist/audio-recorder.js';
```
and add the tag to your page:
```html
```
### Attributes
- `bars`: number of bars in frequency analyzer, default: 20
- `view`: `frequencies` or `waveform`, default: `frequencies`
### Styling
- `--width`: width of the recorder, default: 600px
- `--height`: height of the recorder, default: 300px
- `--border`: border of the recorder, default: none
- `--frequency-background-color`: background color of frequency analyzer, default: #ffffff
- `--frequency-bars-color`: background color of frequency bars, default: #ff0000
- `--waveform-background-color`: background color of waveform view, default: #ffffff
- `--waveform-color`: color of waveform, default: #ff0000
- `--waveform-progress-color`: color of waveform of part of file that has already played, default: #337ab7
In addition, mixins can be applied using the `::part` pseudo element.
Usage:
```css
audio-recorder::part([selector]) {
/** css rules **/
}
```
Available selectors:
- `::part(button)`: styles the buttons except the volume buttons
- `::part(volume-button)`: styles the volume buttons
- `::part(slider)`: styles the volume slider
- `::part(time)`: styles the elapsed and remaining time display
The buttons and slider are part of the `material-webcomponents` library ([https://dannymoerkerke.github.io/material-webcomponents/](https://dannymoerkerke.github.io/material-webcomponents/))
The Custom CSS properties exposed by these components can be used as part of the styling through `::part`.
For example, the `material-slider` component exposes the properties `--track-size`, `--track-color`, `--thumb-size` and
`--thumb-color`.
These can be used in combination with `::part` to style the volume slider:
```css
audio-recorder::part(slider) {
--track-color: #000000;
--track-size: 3px;
--thumb-color: #000000;
--thumb-size: 10px;
}
```
### Demo
To run the demo, run `npm install` once and then `npm start` and view the demo on
[http://localhost:8080/](http://localhost:8080/)