Skip to content

Instantly share code, notes, and snippets.

@liketaurus
Created December 9, 2019 16:16
Show Gist options
  • Save liketaurus/2554e1aba4b3f7d2cb238d625bc45d08 to your computer and use it in GitHub Desktop.
Save liketaurus/2554e1aba4b3f7d2cb238d625bc45d08 to your computer and use it in GitHub Desktop.
How to record audio in client code and upload recording to AWS S3 bucket
<!-- https://medium.com/@bryanjenningz/how-to-record-and-play-audio-in-javascript-faa1b2b3e49b -->
<!-- https://docs.aws.amazon.com/en_us/sdk-for-javascript/v2/developer-guide/s3-example-photo-album.html -->
<script src="https://sdk.amazonaws.com/js/aws-sdk-2.585.0.min.js"></script>
<script>
function uploadAWS(blob) {
var vaultBucketName = "[YOUR-BUCKET-NAME]";
var bucketRegion = "[YOUR-AWS-REGION]";
var IdentityPoolId = "[YOUR-IDENTITY-POOL-ID]";
//Let's create a filename as a DD-MM-YYYY--HH-SS.mpeg
var currentDate = new Date();
var recordkey = currentDate.getDate().toString() + '-' + currentDate.getMonth().toString() + '-' +
currentDate.getFullYear().toString() + '--' + currentDate.getHours().toString() + '-' + currentDate.getMinutes().toString() + '.mpeg';
AWS.config.update({
region: bucketRegion,
credentials: new AWS.CognitoIdentityCredentials({
IdentityPoolId: IdentityPoolId
})
});
var s3 = new AWS.S3({
apiVersion: "2006-03-01",
params: { Bucket: vaultBucketName }
});
var upload = new AWS.S3.ManagedUpload({
params: {
Bucket: vaultBucketName,
Key: recordkey,
Body: blob//,
//ACL: "public-read"
}
});
var promise = upload.promise();
promise.then(
function (data) {
console.log("Successfully uploaded new record to AWS bucket " + vaultBucketName + "!");
},
function (err) {
return alert("There was an error uploading your record: ", err.message);
}
);
}
function countdown(time) {
var timeleft = time;
var downloadTimer = setInterval(function () {
document.getElementById("timer").value = time - timeleft;
timeleft -= 1;
if (timeleft <= 0) {
clearInterval(downloadTimer);
document.getElementById("timer").value=0;
}
}, 1000);
}
function record() {
var recordButton = document.getElementById('record');
var playButton = document.getElementById('play');
var progress = document.getElementById('progress');
var timer = document.getElementById('timer');
recordButton.style.display = 'none';
progress.style.display = 'block';
timer.style.display = 'block';
navigator.mediaDevices.getUserMedia({ audio: true })
.then(stream => {
const mediaRecorder = new MediaRecorder(stream);
mediaRecorder.start();
countdown(10);
const audioChunks = [];
mediaRecorder.addEventListener("dataavailable", event => {
audioChunks.push(event.data);
});
mediaRecorder.addEventListener("stop", () => {
const audioBlob = new Blob(audioChunks);
const audioUrl = URL.createObjectURL(audioBlob);
uploadAWS(audioBlob);
progress.style.display = 'none';
timer.style.display='none';
playButton.style.display = 'block';
recordButton.style.display = 'block';
playButton.addEventListener('click', function () {
const audio = new Audio(audioUrl);
audio.play();
}, false);
});
setTimeout(() => {
mediaRecorder.stop();
}, 10000);
});
}
</script>
<div>
<button id='record' onclick="record()" style="width: 250;">Click to record!</button>
<img id='progress' style='display:none; width: 250;' src='sound.gif' /> //animated gif to illustrate recording process:)
<progress value="0" max="10" id="timer" style='display:none; width: 250;' ></progress>
<br><br>
<button id='play' style='display:none; width: 250;'>Click to play</button>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment