This project aims to create a web page to convert the live audio speech to a written text.
<html dir="rtl" lang="ar">
<head>
<title> Spech to Text Converter </title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<bodyid="full">
<div id="liveData" style="display: none;">
</div>
<audio id="audio">
<source id="sound" src="1.mp3" type="audio/mp3">
</audio>
<audio id="audio2">
<source id="sound" src="2.mp3" type="audio/mp3">
</audio>
<p id="demo" style="display:none;"></p>
<script>
recognition.lang = 'ar';
window.addEventListener('load', function()
{
var x = document.getElementById("audio");
var x2 = document.getElementById("audio2");
var xhr = null;
getXmlHttpRequestObject = function()
{
if(!xhr)
{
xhr = new XMLHttpRequest();
}
return xhr;
};
updateLiveData = function()
{
var now = new Date();
var url = 'r1s1.php?' + now.getTime();
xhr = getXmlHttpRequestObject();
xhr.onreadystatechange = evenHandler;
xhr.open("GET", url, true);
xhr.send(null);
};
function evenHandler()
{
if(xhr.readyState == 4 && xhr.status == 200)
{
dataDiv = document.getElementById('liveData');
dataDiv.innerHTML = xhr.responseText;
var xx=xhr.responseText;
//alert(xx);
if(xx==1){
x.play();
output.classList.add("hidden");
var y = document.getElementById("audio").duration;
y=(y*1000);
console.log(y);
document.getElementById("demo").innerHTML = y;
document.getElementById("p1").style.display = "block";
document.getElementById("p2").style.display = "none";
setTimeout(function(){ document.getElementById("p1").style.display = "none"; document.getElementById("p2").style.display = "block";}, y);
const Http = new XMLHttpRequest();
Http.open("GET","https://s-m.com.sa/r1/r1m2.php");
Http.send();
setTimeout(function(){ stt(); }, y);
}
document.getElementById("sound").src=xhr.responseText;
setTimeout(updateLiveData(), 10000);
}
}
function stt(){
var output = document.getElementById("output");
var action = document.getElementById("action");
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
recognition.onstart = function() {
action.innerHTML = "<small></small>";
};
recognition.onspeechend = function() {
action.innerHTML = "<small></small>";
recognition.stop();
}
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
var confidence = event.results[0][0].confidence;
output.innerHTML = "<b></b> " + transcript;
output.classList.remove("hidden");
const Http = new XMLHttpRequest();
Http.open("GET","https://s-m.com.sa/r1/e.php?e=" + transcript);
Http.send();
x2.play();
var yy = document.getElementById("audio2").duration;
yy=yy*1000;
console.log(yy);
document.getElementById("demo").innerHTML = yy;
document.getElementById("p1").style.display = "block";
document.getElementById("p2").style.display = "none";
setTimeout(function(){ document.getElementById("p1").style.display = "none"; document.getElementById("p2").style.display = "block";}, yy);
//output.classList.add("hidden");
};
recognition.start();
}
});
function stt(){
var output = document.getElementById("output");
var action = document.getElementById("action");
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var recognition = new SpeechRecognition();
recognition.onstart = function() {
action.innerHTML = "<small></small>";
};
recognition.onspeechend = function() {
action.innerHTML = "<small></small>";
recognition.stop();
}
recognition.onresult = function(event) {
var transcript = event.results[0][0].transcript;
var confidence = event.results[0][0].confidence;
output.innerHTML = "<b></b> " + transcript;
output.classList.remove("hidden");
const Http = new XMLHttpRequest();
Http.open("GET","https://s-m.com.sa/r1/e.php?e=" + transcript);
Http.send();
x2.play();
var yy = document.getElementById("audio2").duration;
yy=yy*1000;
console.log(yy);
document.getElementById("demo").innerHTML = yy;
document.getElementById("p1").style.display = "block";
document.getElementById("p2").style.display = "none";
setTimeout(function(){ document.getElementById("p1").style.display = "none"; document.getElementById("p2").style.display = "block";}, yy);
//output.classList.add("hidden");
};
recognition.start();
}
function playSound(){
var x = document.getElementById("audio");
x.play();
var y = document.getElementById("audio").duration;
y=y*1000;
document.getElementById("demo").innerHTML = y;
document.getElementById("p1").style.display = "block";
document.getElementById("p2").style.display = "none";
setTimeout(function(){ document.getElementById("p1").style.display = "none"; document.getElementById("p2").style.display = "block";}, y);
}
</script>
<div align="center">
<br>
<h1> Speech to Text Converter </h1>
<button onclick="stt()">Click to Start</button>
<p><span id="action"></span></p>
<div id="output" class="hide" style="font-size:50px"></div>
</div>
</head>
<body>
<style type="text/css">
body{
font-family: arial;
font-size: 16px;
margin: 0;
background:linear-gradient(to right bottom, #f6fa1b, #1fb7ed);
color: #fcfcf2;
display: flex;
align-items: center;
justify-content: center;
lang: ar
min-height: 100vh;
}
h1{
color: #fff;
font-size: 50px;
}
#text_from_audio{
width: 100%;
height: 200px;
border-radius: 10px;
resize: none;
padding: 10px;
font-size: 20px;
color: #fff;
margin-bottom: 10px;
}
button{
padding: 12px 20px;
background: #1fb7ed;
border: 0;
color: #fff;
font-size: 18px;
cursor: pointer;
border-radius: 5px;
}
</style>
</body>
</html>