Created
December 9, 2019 16:16
-
-
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
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!-- 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