Skip to content

Instantly share code, notes, and snippets.

@ktskumar

ktskumar/voice_validation.html

Last active June 13, 2022 23:40
Show Gist options
  • Save ktskumar/f13b2b67bd825a6e7002e12146a94b36 to your computer and use it in GitHub Desktop.
Save ktskumar/f13b2b67bd825a6e7002e12146a94b36 to your computer and use it in GitHub Desktop.
Download ZIP
Voice recognition and validation by comparing two speecs and determine if they are from the same speaker. Try it with your own voice!
Raw
voice_validation.html
<!DOCTYPE html>
<html>
<head>
<title>Speaker Authenticator</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/recorderjs/0.1.0/recorder.js"></script>
</head>
<body>
<div class="container">
<h1>Validate Speaker</h1>
<div class="header">Speaker 1</div>
<div class="audio">
<audio id="audio1" controls></audio>
<div>
<button id="btnstartaudio1" onclick="startRecording('audio1')">Start</button>
<button id="btnstopaudio1" onclick="stopRecording('audio1')" style="display: none;">Stop</button>
</div>
</div>
<div class="header">Speaker 2</div>
<div class="audio">
<audio id="audio2" controls></audio>
<div>
<button id="btnstartaudio2" onclick="startRecording('audio2')">Start</button>
<button id="btnstopaudio2" onclick="stopRecording('audio2')" style="display: none;">Stop</button>
</div>
</div>
<button id="btncompare" onclick="compare()">Compare</button>
<div id="output"></div>
</div>
<script defer type="text/javascript">
var audio_context;
var recorder;
function startAudioRecorder(stream) {
var input = audio_context.createMediaStreamSource(stream);
recorder = new Recorder(input);
}
window.onload = function init() {
try {
window.AudioContext = window.AudioContext || window.webkitAudioContext;
navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia;
window.URL = window.URL || window.webkitURL;
audio_context = new AudioContext;
} catch (e) {
alert("Web Audio API is not supported in this browser");
}
navigator.getUserMedia({ audio: true }, startAudioRecorder, function (e) {
alert("No live audio input in this browser");
});
}
function compare() {
fetch('https://hf.space/gradioiframe/microsoft/unispeech-speaker-verification/api/predict', {
method: 'POST',
body: JSON.stringify({
"data": [
{ "data": document.getElementById('audio1').src, "name": "audio1.wav" },
{ "data": document.getElementById('audio2').src, "name": "audio2.wav" }
]
}), headers: {
'Content-Type': 'application/json'
}
}).then(function (response) {
return response.json();
}).then(function (data) {
if (data != null && data.data.length > 0) {
if (data.data[0] != null) {
document.getElementById("output").innerHTML = data.data[0];
}
}
});
}
function startRecording(ele) {
recorder.clear();
recorder.record();
document.getElementById('btnstop' + ele).style = "display: inline-block;";
document.getElementById('btnstart' + ele).style = "display: none;";
}
function stopRecording(ele) {
recorder.stop();
createDownloadLink(ele);
document.getElementById('btnstop' + ele).style = "display: none;";
document.getElementById('btnstart' + ele).style = "display: inline-block;";
}
function createDownloadLink(ele) {
var player = document.getElementById(ele);
recorder && recorder.exportWAV(function (blob) {
var filereader = new FileReader();
filereader.addEventListener("load", function () {
player.src = filereader.result;
}, false);
filereader.readAsDataURL(blob);
});
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment