New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
audio: new @uppy/audio plugin for recording with microphone #2976
Changes from 31 commits
893f921
d13b3ba
9f2c578
3f64c9e
1d1dcfc
6e2a4eb
4d81aef
12adb13
52982ab
b9d3f47
48a5bd1
79649cd
9c08dd5
a0de4e7
f0fc9a4
f4ec431
424e4f9
5cd6a34
c66adba
a091dba
f7f28fe
ebd123f
de2e024
4d4d5ec
677fea4
deb2c07
b81cbe4
b5bf3a6
bb02c01
9857ffd
4a7be8c
3d35b89
b44136d
a4d3d75
77a960d
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
The MIT License (MIT) | ||
|
||
Copyright (c) 2021 Transloadit | ||
|
||
Permission is hereby granted, free of charge, to any person obtaining a copy | ||
of this software and associated documentation files (the "Software"), to deal | ||
in the Software without restriction, including without limitation the rights | ||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell | ||
copies of the Software, and to permit persons to whom the Software is | ||
furnished to do so, subject to the following conditions: | ||
|
||
The above copyright notice and this permission notice shall be included in all | ||
copies or substantial portions of the Software. | ||
|
||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR | ||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, | ||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE | ||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER | ||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, | ||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE | ||
SOFTWARE. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
# @uppy/audio | ||
|
||
<img src="https://uppy.io/images/logos/uppy-dog-head-arrow.svg" width="120" alt="Uppy logo: a superman puppy in a pink suit" align="right"> | ||
|
||
<a href="https://www.npmjs.com/package/@uppy/audio"><img src="https://img.shields.io/npm/v/@uppy/webcam.svg?style=flat-square"></a> <img src="https://github.com/transloadit/uppy/workflows/Tests/badge.svg" alt="CI status for Uppy tests"> <img src="https://github.com/transloadit/uppy/workflows/Companion/badge.svg" alt="CI status for Companion tests"> <img src="https://github.com/transloadit/uppy/workflows/End-to-end%20tests/badge.svg" alt="CI status for browser tests"> | ||
|
||
The Audio plugin for Uppy lets you record audio using a built-in or external microphone, or any other audio device, on desktop and mobile. | ||
|
||
Uppy is being developed by the folks at [Transloadit](https://transloadit.com), a versatile file encoding service. | ||
|
||
## Example | ||
|
||
```js | ||
import Uppy from '@uppy/core' | ||
import Webcam from '@uppy/audio' | ||
|
||
const uppy = new Uppy() | ||
uppy.use(Audio) | ||
``` | ||
|
||
## Installation | ||
|
||
```bash | ||
$ npm install @uppy/audio | ||
``` | ||
|
||
We recommend installing from npm and then using a module bundler such as [Webpack](https://webpack.js.org/), [Browserify](http://browserify.org/) or [Rollup.js](http://rollupjs.org/). | ||
|
||
Alternatively, you can also use this plugin in a pre-built bundle from Transloadit’s CDN: Edgly. In that case `Uppy` will attach itself to the global `window.Uppy` object. See the [main Uppy documentation](https://uppy.io/docs/#Installation) for instructions. | ||
|
||
## Documentation | ||
|
||
Documentation for this plugin can be found on the [Uppy website](https://uppy.io/docs/webcam). | ||
|
||
## License | ||
|
||
[The MIT License](./LICENSE). |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,37 @@ | ||
{ | ||
"name": "@uppy/audio", | ||
"description": "Uppy plugin that records audio using the device’s microphone.", | ||
"version": "0.1.0", | ||
"license": "MIT", | ||
"main": "lib/index.js", | ||
"style": "dist/style.min.css", | ||
"types": "types/index.d.ts", | ||
"keywords": [ | ||
"file uploader", | ||
"uppy", | ||
"uppy-plugin", | ||
"audio", | ||
"microphone", | ||
"sound", | ||
"record", | ||
"mediarecorder" | ||
], | ||
"homepage": "https://uppy.io", | ||
"bugs": { | ||
"url": "https://github.com/transloadit/uppy/issues" | ||
}, | ||
"repository": { | ||
"type": "git", | ||
"url": "git+https://github.com/transloadit/uppy.git" | ||
}, | ||
"dependencies": { | ||
"@uppy/utils": "workspace:^", | ||
"preact": "^10.5.15" | ||
}, | ||
"peerDependencies": { | ||
"@uppy/core": "workspace:^" | ||
}, | ||
"publishConfig": { | ||
"access": "public" | ||
} | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,22 @@ | ||
const { h } = require('preact') | ||
|
||
module.exports = ({ currentDeviceId, audioSources, onChangeSource }) => { | ||
return ( | ||
<div className="uppy-Audio-videoSource"> | ||
<select | ||
className="uppy-u-reset uppy-Audio-audioSource-select" | ||
onChange={(event) => { onChangeSource(event.target.value) }} | ||
> | ||
{audioSources.map((audioSource) => ( | ||
<option | ||
key={audioSource.deviceId} | ||
value={audioSource.deviceId} | ||
selected={audioSource.deviceId === currentDeviceId} | ||
> | ||
{audioSource.label} | ||
</option> | ||
))} | ||
</select> | ||
</div> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
const { h } = require('preact') | ||
|
||
function DiscardButton ({ onDiscard, i18n }) { | ||
return ( | ||
<button | ||
className="uppy-u-reset uppy-c-btn uppy-Audio-button" | ||
type="button" | ||
title={i18n('discardRecordedFile')} | ||
aria-label={i18n('discardRecordedFile')} | ||
onClick={onDiscard} | ||
data-uppy-super-focusable | ||
> | ||
<svg | ||
width="13" | ||
height="13" | ||
viewBox="0 0 13 13" | ||
xmlns="http://www.w3.org/2000/svg" | ||
aria-hidden="true" | ||
className="uppy-c-icon" | ||
> | ||
<g fill="#FFF" fillRule="evenodd"> | ||
<path d="M.496 11.367L11.103.76l1.414 1.414L1.911 12.781z" /> | ||
<path d="M11.104 12.782L.497 2.175 1.911.76l10.607 10.606z" /> | ||
</g> | ||
</svg> | ||
</button> | ||
) | ||
} | ||
|
||
module.exports = DiscardButton |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
const { h } = require('preact') | ||
|
||
module.exports = (props) => { | ||
const { icon, hasAudio, i18n } = props | ||
return ( | ||
<div className="uppy-Audio-permissons"> | ||
<div className="uppy-Audio-permissonsIcon">{icon()}</div> | ||
<h1 className="uppy-Audio-title">{hasAudio ? i18n('allowAudioAccessTitle') : i18n('noAudioTitle')}</h1> | ||
<p>{hasAudio ? i18n('allowAudioAccessDescription') : i18n('noAudioDescription')}</p> | ||
</div> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,35 @@ | ||
const { h } = require('preact') | ||
|
||
module.exports = function RecordButton ({ recording, onStartRecording, onStopRecording, i18n }) { | ||
if (recording) { | ||
return ( | ||
<button | ||
className="uppy-u-reset uppy-c-btn uppy-Audio-button" | ||
type="button" | ||
title={i18n('stopAudioRecording')} | ||
aria-label={i18n('stopAudioRecording')} | ||
onClick={onStopRecording} | ||
data-uppy-super-focusable | ||
> | ||
<svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="100" height="100" viewBox="0 0 100 100"> | ||
<rect x="15" y="15" width="70" height="70" /> | ||
</svg> | ||
</button> | ||
) | ||
} | ||
|
||
return ( | ||
<button | ||
className="uppy-u-reset uppy-c-btn uppy-Audio-button" | ||
type="button" | ||
title={i18n('startAudioRecording')} | ||
aria-label={i18n('startAudioRecording')} | ||
onClick={onStartRecording} | ||
data-uppy-super-focusable | ||
> | ||
<svg aria-hidden="true" focusable="false" className="uppy-c-icon" width="14px" height="20px" viewBox="0 0 14 20"> | ||
<path d="M7 14c2.21 0 4-1.71 4-3.818V3.818C11 1.71 9.21 0 7 0S3 1.71 3 3.818v6.364C3 12.29 4.79 14 7 14zm6.364-7h-.637a.643.643 0 0 0-.636.65V9.6c0 3.039-2.565 5.477-5.6 5.175-2.645-.264-4.582-2.692-4.582-5.407V7.65c0-.36-.285-.65-.636-.65H.636A.643.643 0 0 0 0 7.65v1.631c0 3.642 2.544 6.888 6.045 7.382v1.387H3.818a.643.643 0 0 0-.636.65v.65c0 .36.285.65.636.65h6.364c.351 0 .636-.29.636-.65v-.65c0-.36-.285-.65-.636-.65H7.955v-1.372C11.363 16.2 14 13.212 14 9.6V7.65c0-.36-.285-.65-.636-.65z" fill="#FFF" fill-rule="nonzero" /> | ||
</svg> | ||
</button> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,12 @@ | ||
const { h } = require('preact') | ||
const formatSeconds = require('./formatSeconds') | ||
|
||
module.exports = function RecordingLength ({ recordingLengthSeconds, i18n }) { | ||
const formattedRecordingLengthSeconds = formatSeconds(recordingLengthSeconds) | ||
|
||
return ( | ||
<span aria-label={i18n('recordingLength', { recording_length: formattedRecordingLengthSeconds })}> | ||
{formattedRecordingLengthSeconds} | ||
</span> | ||
) | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,129 @@ | ||
/* eslint-disable jsx-a11y/media-has-caption */ | ||
const { h, Component } = require('preact') | ||
const RecordButton = require('./RecordButton') | ||
const RecordingLength = require('./RecordingLength') | ||
const AudioSourceSelect = require('./AudioSourceSelect') | ||
const AudioOscilloscope = require('./audio-oscilloscope') | ||
const SubmitButton = require('./SubmitButton') | ||
const DiscardButton = require('./DiscardButton') | ||
|
||
class CameraScreen extends Component { | ||
componentDidMount () { | ||
this.initAudioOscilloscope() | ||
} | ||
|
||
componentDidUpdate () { | ||
const { src, recordedAudio, isRecording } = this.props | ||
const hasRecordedAudio = !!recordedAudio | ||
|
||
if (hasRecordedAudio) { | ||
this.oscilloscope = null | ||
} | ||
|
||
if (!hasRecordedAudio && !isRecording && src) { | ||
this.initAudioOscilloscope() | ||
const audioContext = new AudioContext() | ||
const source = audioContext.createMediaStreamSource(src) | ||
this.oscilloscope.addSource(source) | ||
} | ||
} | ||
|
||
componentWillUnmount () { | ||
const { onStop } = this.props | ||
this.oscilloscope = null | ||
onStop() | ||
} | ||
|
||
initAudioOscilloscope () { | ||
this.oscilloscope = new AudioOscilloscope(this.canvasElement, { | ||
canvas: { | ||
width: () => { | ||
return window.innerWidth | ||
}, | ||
height: 400, | ||
}, | ||
canvasContext: { | ||
lineWidth: 2, | ||
fillStyle: 'rgb(0,0,0)', | ||
strokeStyle: 'green', | ||
}, | ||
}) | ||
this.oscilloscope.draw() | ||
} | ||
|
||
render () { | ||
const { | ||
recordedAudio, | ||
recording, | ||
supportsRecording, | ||
audioSources, | ||
showAudioSourceDropdown, | ||
onSubmit, | ||
i18n, | ||
onStartRecording, | ||
onStopRecording, | ||
onDiscardRecordedAudio, | ||
recordingLengthSeconds, | ||
} = this.props | ||
|
||
const hasRecordedAudio = !!recordedAudio | ||
const shouldShowRecordButton = !hasRecordedAudio && supportsRecording | ||
const shouldShowAudioSourceDropdown = showAudioSourceDropdown | ||
&& !hasRecordedAudio | ||
&& audioSources | ||
&& audioSources.length > 1 | ||
|
||
return ( | ||
<div className="uppy-Audio-container"> | ||
<div className="uppy-Audio-audioContainer"> | ||
{hasRecordedAudio | ||
? ( | ||
<audio | ||
/* eslint-disable-next-line no-return-assign */ | ||
ref={(audioElement) => (this.audioElement = audioElement)} | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we get rid of the eslint comment here? There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Can we get rid of the eslint comment here? |
||
className="uppy-Audio-player" | ||
/* eslint-disable-next-line react/jsx-props-no-spreading */ | ||
controls | ||
src={recordedAudio} | ||
/> | ||
) : ( | ||
<canvas | ||
/* eslint-disable-next-line no-return-assign */ | ||
ref={(canvasElement) => (this.canvasElement = canvasElement)} | ||
className="uppy-Audio-canvas" | ||
/> | ||
)} | ||
</div> | ||
<div className="uppy-Audio-footer"> | ||
<div className="uppy-Audio-audioSourceContainer"> | ||
{shouldShowAudioSourceDropdown | ||
? AudioSourceSelect(this.props) | ||
: null} | ||
</div> | ||
<div className="uppy-Audio-buttonContainer"> | ||
{shouldShowRecordButton && ( | ||
<RecordButton | ||
recording={recording} | ||
onStartRecording={onStartRecording} | ||
onStopRecording={onStopRecording} | ||
i18n={i18n} | ||
/> | ||
)} | ||
|
||
{hasRecordedAudio && <SubmitButton onSubmit={onSubmit} i18n={i18n} />} | ||
|
||
{hasRecordedAudio && <DiscardButton onDiscard={onDiscardRecordedAudio} i18n={i18n} />} | ||
</div> | ||
|
||
<div className="uppy-Audio-recordingLength"> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. shouldn't the div be conditional? This will render an empty div. There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Needed for the flex layout to work, maybe could be refactored, but I couldn't fit it easily. |
||
{!hasRecordedAudio && ( | ||
<RecordingLength recordingLengthSeconds={recordingLengthSeconds} i18n={i18n} /> | ||
)} | ||
</div> | ||
</div> | ||
</div> | ||
) | ||
} | ||
} | ||
|
||
module.exports = CameraScreen |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
const { h } = require('preact') | ||
|
||
function SubmitButton ({ onSubmit, i18n }) { | ||
return ( | ||
<button | ||
className="uppy-u-reset uppy-c-btn uppy-Audio-button uppy-Audio-button--submit" | ||
type="button" | ||
title={i18n('submitRecordedFile')} | ||
aria-label={i18n('submitRecordedFile')} | ||
onClick={onSubmit} | ||
data-uppy-super-focusable | ||
> | ||
<svg | ||
width="12" | ||
height="9" | ||
viewBox="0 0 12 9" | ||
xmlns="http://www.w3.org/2000/svg" | ||
aria-hidden="true" | ||
focusable="false" | ||
className="uppy-c-icon" | ||
> | ||
<path fill="#fff" fillRule="nonzero" d="M10.66 0L12 1.31 4.136 9 0 4.956l1.34-1.31L4.136 6.38z" /> | ||
</svg> | ||
</button> | ||
) | ||
} | ||
|
||
module.exports = SubmitButton |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Will we gradually switch to hooks? If so, might be good to do so with new plugins. Initial bundle size will increase a bit but that's inevitable if we would like to switch.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Good point, converted to hooks.