c4patino/know-it-all
Archived
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Created prototype Record Route

Browse source
This commit is contained in:
Ceferino Patino 2022-03-18 15:39:33 -05:00
commit 9a5494e201
4 changed files with 176 additions and 0 deletions
Download patch file Download diff file Expand all files Collapse all files

80
client/package-lock.json generated
View file

@ -17,6 +17,7 @@
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"mic-recorder-to-mp3": "^2.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",
@ -11151,6 +11152,14 @@
"node": ">= 8"
}
},
"node_modules/lamejs": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz",
"integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==",
"dependencies": {
"use-strict": "1.0.1"
}
},
"node_modules/language-subtag-registry": {
"version": "0.3.21",
"resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@ -11380,6 +11389,17 @@
"node": ">= 0.6"
}
},
"node_modules/mic-recorder-to-mp3": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz",
"integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==",
"dependencies": {
"lamejs": "^1.2.0"
},
"peerDependencies": {
"webrtc-adapter": ">=4.1.1"
}
},
"node_modules/micromatch": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@ -14331,6 +14351,12 @@
"url": "https://opencollective.com/webpack"
}
},
"node_modules/sdp": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/sdp/-/sdp-3.0.3.tgz",
"integrity": "sha512-8EkfckS+XZQaPLyChu4ey7PghrdcraCVNpJe2Gfdi2ON1ylQ7OasuKX+b37R9slnRChwIAiQgt+oj8xXGD8x+A==",
"peer": true
},
"node_modules/select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -15603,6 +15629,11 @@
"punycode": "^2.1.0"
}
},
"node_modules/use-strict": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz",
"integrity": "sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A="
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@ -16062,6 +16093,19 @@
"node": ">=4.0"
}
},
"node_modules/webrtc-adapter": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.1.1.tgz",
"integrity": "sha512-1yXevP7TeZGmklEXkvQVrZp3fOSJlLeXNGCA7NovQokxgP3/e2T3EVGL0eKU87S9vKppWjvRWqnJeSANEspOBg==",
"peer": true,
"dependencies": {
"sdp": "^3.0.2"
},
"engines": {
"node": ">=6.0.0",
"npm": ">=3.10.0"
}
},
"node_modules/websocket-driver": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@ -24546,6 +24590,14 @@
"resolved": "https://registry.npmjs.org/klona/-/klona-2.0.5.tgz",
"integrity": "sha512-pJiBpiXMbt7dkzXe8Ghj/u4FfXOOa98fPW+bihOJ4SjnoijweJrNThJfd3ifXpXhREjpoF2mZVH1GfS9LV3kHQ=="
},
"lamejs": {
"version": "1.2.1",
"resolved": "https://registry.npmjs.org/lamejs/-/lamejs-1.2.1.tgz",
"integrity": "sha512-s7bxvjvYthw6oPLCm5pFxvA84wUROODB8jEO2+CE1adhKgrIvVOlmMgY8zyugxGrvRaDHNJanOiS21/emty6dQ==",
"requires": {
"use-strict": "1.0.1"
}
},
"language-subtag-registry": {
"version": "0.3.21",
"resolved": "https://registry.npmjs.org/language-subtag-registry/-/language-subtag-registry-0.3.21.tgz",
@ -24727,6 +24779,14 @@
"resolved": "https://registry.npmjs.org/methods/-/methods-1.1.2.tgz",
"integrity": "sha1-VSmk1nZUE07cxSZmVoNbD4Ua/O4="
},
"mic-recorder-to-mp3": {
"version": "2.2.2",
"resolved": "https://registry.npmjs.org/mic-recorder-to-mp3/-/mic-recorder-to-mp3-2.2.2.tgz",
"integrity": "sha512-xDkOaHbojW3bdKOGn9CI5dT+Mc0RrfczsX/Y1zGJp3FUB4zei5ZKFnNm7Nguc9v910wkd7T3csnCTq5EtCF3Zw==",
"requires": {
"lamejs": "^1.2.0"
}
},
"micromatch": {
"version": "4.0.4",
"resolved": "https://registry.npmjs.org/micromatch/-/micromatch-4.0.4.tgz",
@ -26721,6 +26781,12 @@
"ajv-keywords": "^3.5.2"
}
},
"sdp": {
"version": "3.0.3",
"resolved": "https://registry.npmjs.org/sdp/-/sdp-3.0.3.tgz",
"integrity": "sha512-8EkfckS+XZQaPLyChu4ey7PghrdcraCVNpJe2Gfdi2ON1ylQ7OasuKX+b37R9slnRChwIAiQgt+oj8xXGD8x+A==",
"peer": true
},
"select-hose": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/select-hose/-/select-hose-2.0.0.tgz",
@ -27691,6 +27757,11 @@
"punycode": "^2.1.0"
}
},
"use-strict": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/use-strict/-/use-strict-1.0.1.tgz",
"integrity": "sha1-C7gNlPSaSgUZK4Sox9NOlfGn46A="
},
"util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@ -28019,6 +28090,15 @@
"resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
"integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w=="
},
"webrtc-adapter": {
"version": "8.1.1",
"resolved": "https://registry.npmjs.org/webrtc-adapter/-/webrtc-adapter-8.1.1.tgz",
"integrity": "sha512-1yXevP7TeZGmklEXkvQVrZp3fOSJlLeXNGCA7NovQokxgP3/e2T3EVGL0eKU87S9vKppWjvRWqnJeSANEspOBg==",
"peer": true,
"requires": {
"sdp": "^3.0.2"
}
},
"websocket-driver": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",

1
client/package.json
View file

@ -12,6 +12,7 @@
"@testing-library/react": "^12.1.3",
"@testing-library/user-event": "^13.5.0",
"axios": "^0.26.0",
"mic-recorder-to-mp3": "^2.2.2",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-router-dom": "^6.2.2",

3
client/src/App.jsx
View file

@ -16,6 +16,8 @@ import MemberOrgs from './components/orgs/MemberOrgs';
import OrgDashboard from './components/orgs/OrgDashboard';
import UpdateOrganization from './components/forms/UpdateOrganization';
import RecordMp3 from './components/RecordMp3';
function App() {
const [token, setToken] = useState(false);
@ -27,6 +29,7 @@ function App() {
path=''
element={<Navbar tokenState={{ token, setToken }} />}
>
<Route path='record' element={<RecordMp3 />} />
<Route index element={<MainPage />} />
<Route

92
client/src/components/RecordMp3.jsx Normal file
View file

@ -0,0 +1,92 @@
import React, { useState } from 'react';
import MicRecorder from 'mic-recorder-to-mp3';
import { IconButton } from '@mui/material';
import PlayArrow from '@mui/icons-material/PlayArrow';
import Mic from '@mui/icons-material/Mic';
import Upload from '@mui/icons-material/Upload';
import Form from './utils/Form';
function RecordMp3() {
const [recorder] = useState(
new MicRecorder({
bitRate: 128,
})
);
const [recording, setRecording] = useState(false);
const [uploadedFile, setUploadedFile] = useState(null);
const [audio, setAudio] = useState(null);
function togglePlay() {
if (audio) {
audio.pause();
audio.currentTime = 0;
setAudio(() => null);
} else {
const audioFile = new Audio(URL.createObjectURL(uploadedFile));
setAudio(() => audioFile);
audioFile.play();
}
}
async function record() {
if (recording) {
console.log('Stopped Recording');
recorder
.stop()
.getMp3()
.then(([buffer, blob]) => {
setRecording(() => false);
setUploadedFile(() => {
return new File(buffer, 'me-at-thevoice.mp3', {
type: blob.type,
lastModified: Date.now(),
});
});
});
} else {
recorder
.start()
.then(() => {
setRecording(() => true);
})
.catch((e) => {
console.error(e);
});
}
}
function uploadRecord() {
setUploadedFile(() => {
return document.getElementById('icon-button-file').files[0];
});
}
return (
<Form>
<form>
<IconButton onClick={togglePlay}>
<PlayArrow />
</IconButton>
<IconButton onClick={record}>
<Mic />
</IconButton>
<input
id='icon-button-file'
type='file'
hidden
onChange={uploadRecord}
/>
<label htmlFor='icon-button-file'>
<IconButton component='span'>
<Upload />
</IconButton>
</label>
</form>
</Form>
);
}
export default RecordMp3;