I am trying to make a project where saying a note name will play the specified tone using WebSpeech API. When I say "C", the console should return "C" and play a file ("C.wav"), but when I say anything to the microphone, it only returns a blank string.
This is my code:
html:
<html lang="en">
<head>
<title>Other functions</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="style.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
<div class="title">
<h1>
i cant think, o f anythitng to don lfor theiosj projehcyt h;kjsbfyuae ro
<img src="img/robot.png" id="title-img">
<br>
<a href="index.html" class="back-btn"> Back </a>
</h1>
</div>
<button class="start-btn">
<img src="img/mic-start.png">
</button>
<button class="listen-btn">
<img src="img/mic-listening.gif">
</button>
<div class="container">
<div class="widget" id="dictaphone">
<h3 class="sub-title">Dictaphone</h3>
</div>
<div class="widget" id="color">
<h3 class="sub-title">Change color</h3>
</div>
<div class="widget" id="other">
<h3 class="sub-title">Tell it your name</h3>
<p id="spoken" class="show-text"></p>
<p id="speaking" class="show-text"></p>
</div>
</div>
<audio style="display: hidden" src="audio/C.wav" id="C"></audio>
<audio style="display: hidden" src="audio/C#.wav" id="Csharp"></audio>
<audio style="display: hidden" src="audio/D.wav" id="D"></audio>
<audio style="display: hidden" src="audio/D#.wav" id="Dsharp"></audio>
<audio style="display: hidden" src="audio/E.wav" id="E"></audio>
<audio style="display: hidden" src="audio/F.wav" id="F"></audio>
<audio style="display: hidden" src="audio/F#.wav" id="Fsharp"></audio>
<audio style="display: hidden" src="audio/G.wav" id="G"></audio>
<audio style="display: hidden" src="audio/G#.wav" id="Gsharp"></audio>
<audio style="display: hidden" src="audio/A.wav" id="A"></audio>
<audio style="display: hidden" src="audio/A#.wav" id="Asharp"></audio>
<audio style="display: hidden" src="audio/B.wav" id="B"></audio>
<script>
</script>
</body>
</html>
javascript + jquery:
$(".listen-btn").hide();
$('#color').hide();
$('#dictaphone').hide();
var add_css = {
'animation-name': 'enlarge',
'animation-duration': '2s',
'animation-fill-mode': 'forwards'
}
$("#other").css(add_css);
$(".start-btn").click(function () {
$(".start-btn").hide();
$(".listen-btn").show();
recognition.start();
});
$(".listen-btn").click(function () {
$(".start-btn").show();
$(".listen-btn").hide();
recognition.abort();
});
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent
var recognition = new SpeechRecognition();
recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = false;
recognition.maxAlternatives = 1;
recognition.onresult = function (event) {
var result = event.results[0][0].transcript;
var interim_transcript = '';
var final_transcript = '';
var text = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
var text = event.results[i][0].transcript;
final_transcript += text;
$("#spoken").append(interim_transcript);
} else {
var text = event.results[i][0].transcript;
interim_transcript += text;
$("#speaking").html(interim_transcript);
}
}
}
function playMusic(){
var audioElement = document.createElement('audio');
var audioElementSrc = $(this).attr('data-audio-src');
audioElement.setAttribute('src', audioElementSrc);
$.get();
audioElement.addEventListener("loadeddata", function(){
audioElement.play();
}, true);
}
recognition.onend = function (event) {
var spoken = $("#speaking").html();
var add = spoken + "<br>";
$("#speaking").html("");
if (spoken == "stop") {
$(".start-btn").show();
$(".listen-btn").hide();
recognition.stop();
} else if (spoken.toLowerCase("see") || spoken.toLowerCase("c") || spoken.toLowerCase("sea")){
document.getElementById("#C").play();
} else {
$("#spoken").append(add);
recognition.start();
}
console.log(spoken);
}
please explain in simple terms as I am new to coding, thanks
also if this question isn't very clear (I am bad at asking formal questions (online)), do not hesitate to ask me to clarify. I will do so as soon as possible.