Everything is working fine in this code except the result showing part after receiving any audio.Can someone tell me why this is not logging any value in console even after i speak in the headphone.
<!DOCTYPE html>
<head></head>
<body>
<div id="msg"></div>
<div id="msg2"></div>
<script>
(function(){
var reco = new webkitSpeechRecognition();
var msgid = document.getElementById('msg');
reco.interimResults = true;
reco.addEventListener('start',function(){
msgid.innerHTML = 'Listening...';
});
reco.addEventListener('audiostart',function(){
msgid.innerHTML = 'Recording...';
});
reco.start();
reco.onresult = function(e){
console.log(e);
}
})()
</script>
</body>
However, SpeechRecognition() is a constructor which is not supported by most of the browers, if you are running it in firefox, it won't help. Try this code in chrome. Later on in console -> Search for result -> Expand the result tab -> Search something called transcript. There it is, your recorded text.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<button class="talk">Talk</button>
<h3 class="content"></h3>
<script>
const btn = document.querySelector(".talk");
const content = document.querySelector(".content");
const SpeechRecognition =
window.SpeechRecognition || window.webkitSpeechRecognition;
const myRecognition = new SpeechRecognition();
myRecognition.onstart = function() {
console.log("voice is activated, you may now speak");
};
myRecognition.onresult = function() {
console.log(event);
};
//adding eventListener
btn.addEventListener("click", () => {
myRecognition.start();
});
</script>
</body>
</html>
Internet connection is required for working with speech recognition since the recorded speech must be fed through internet connection to a web service for processing.
https://developer.mozilla.org/en-US/docs/Web/API/Web_Speech_API/Using_the_Web_Speech_API
Related
So far I've tried using the let method make the GIF a constant and attempting to switch display type is js style function. Can someone guide me into displaying GIF image before API response and hiding it when fetch() is processed.
Html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./doggos.css">
<title>Dogs</title>
</head>
<body>
<h1>Doggos</h1>
<button class="add-doggo">Add Doggo</button>
<div class="doggos">
<div class="loader"><img src="./giphy (1).gif"></img></div>
</div>
<script src="./doggos.js"></script>
</body>
</html>
Javascript
const DOG_URL = "https://dog.ceo/api/breeds/image/random";
const doggos = document.querySelector(".doggos");
function addNewDoggo() {
const promise = fetch(DOG_URL);
promise
.then(function(response) {
const processingPromise = response.json(); //This line of code parses the API response into a usuable js object
return processingPromise; //this code returns a new promise and this process is called | PROCESS-CHAINING
})
.then(function(processedResponse) {
const img = document.createElement("img");
img.src = processedResponse.message;
img.alt = "Cute doggo";
doggos.appendChild(img);
});
}
document.querySelector(".add-doggo") .addEventListener("click", addNewDoggo)
I'm attempting to create a page that when it's been updated, it sends a notice to a channel in discord. I have a working page with a button that will send a notice to discord(uses webhooks and javascript). I'm stuck on executing use of document.lastModified to detect when the page was last updated so that it can execute the onclick=sendMessage(). Any/all help with this would be appreciated.
-Matt
My code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Discord Webhook Tutorial</title>
</head>
<body>
<button onclick="sendMessage()">Send</button>
</body>
<script>
mess1= document.lastModified;
math=99;
x = hidden(mess1);
if (x == true)
{
function sendMessage() {
var request = new XMLHttpRequest();
request.open("POST", "https://discordapp.com/api/webhooks/736073177125355570/yn5upyFa_7IkqwRXlO9XPzooIyMWkqM7wIXcIjqSR6SlhYD8eBCWOm7vEVl4vmNjQBxL");
request.setRequestHeader('Content-type', 'application/json');
var params = {
username: "Update Bot",
avatar_url: "",
content: "Testing bot... updating..."
}
request.send(JSON.stringify(params));
}
}
</script>
</html>
You will need to store the lastModified value somewhere to be able to compare it.
The only value that you have in the DOM is the current one.
You could do this:
const current = document.lastModified;
// Get the last known modified timestamp
const previous = localStorage.getItem('lastModified');
// Update the current modified timestamp
localStorage.setItem('lastModified', current);
// If they differ, trigger the webhook
if (current !== previous) {
doTheXHRThing();
}
My code is as follows, but not executable!
And anything that clicks on the play button doesn't run
HTML:
<button id="play"><img id="playicon" src="img/Polygon 1.svg"></button>
JS:
'song0' is a variable sound and sounds in 'playPauseEvent' and out of function but does not work in performance, I found this method on the following site
https://www.developphp.com/video/JavaScript/Audio-Seek-and-Volume-Range-Slider-Tutorial
var playpause, play1icon, song0;
function aslekar(){
song0 = new Audio('audio/Meydoon.mp3');
song0.loop = true;
song0.play();
document.getElementById("moon");
play1icon = document.getElementById("playicon");
playpause = document.getElementById("play");
playpause.addEventListener("click", playPauseEvent);
function playPauseEvent(){
if(song0.paused){
song0.play();
play1icon.setAttribute("src", "img/Polygon 1.svg");
}else{
song0.pause();
play1icon.setAttribute("src", "img/Group 1.svg");
}
}
}
window.addEventListener("load", aslekar);
I am very beginner and hope you can help with this :)
Check this
Live Preview
var playpause, play1icon, song0;
function aslekar(){
song0 = new Audio('https://gamepedia.cursecdn.com/dota2_gamepedia/d/db/Vo_crystalmaiden_cm_kill_07.mp3');
song0.loop = true;
song0.play();
document.getElementById("moon");
play1icon = document.getElementById("playicon");
playpause = document.getElementById("play");
playpause.addEventListener("click", playPauseEvent);
function playPauseEvent(){
if(song0.paused){
song0.play();
play1icon.setAttribute("src", "https://image.flaticon.com/icons/svg/64/64485.svg");
}else{
song0.pause();
play1icon.setAttribute("src", "https://image.flaticon.com/icons/svg/27/27223.svg");
}
}
}
window.addEventListener("load", aslekar);
and the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="play" onclick="playPauseEvent()"><img id="playicon" src="https://image.flaticon.com/icons/svg/27/27223.svg" width="30" height="30"></button>
</body>
</html>
I'm coding a voice reconition assitant to make it work in my web page but I got this error: Uncaught TypeError: SpeechRecognition is not a constructor at app.js:5(I'm using Google Chrome browser).
const btn = document.querySelector('.talk');
const content = document.querySelector('.content');
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechrecognition;
const recognition = new SpeechRecognition();
recognition.onstart = function() {
console.log('Voice Is Activated, You Can Speak');
};
recognition.onresult = function(event) {
console.log(event);
};
btn.addEventListener('click', () => {
recognition.start();
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>MY ASSISTANT</title>
</head>
<body>
<h1>Hello World</h1>
<img src="#" alt=""></img>
<button class="talk">Talk</button>
<h1 class="content"></h1>
<script src="app.js"></script>
</body>
</html>
You need to make sure you keep the correct capitaliazation - it's webkitSpeechRecognition (uppercased R).
const SpeechRecognition = window.speechRecognition || window.webkitSpeechRecognition;
console.log(new SpeechRecognition());
Found a solution, let the variable be webkitSpeechRecognition, without || operator. Because Google actually uses this constructor with a prefix WebKit.
SpeechRecognition does not exist.
Try using webkitSpeechRecognition.It worked for me.
This is for Chrome browser clients
if you are running in firefox so speechRecognition not supported on
Please have a look at the below code
TTSScript.js
function TTS()
{
var msg = new SpeechSynthesisUtterance("yohan");
var voices = window.speechSynthesis.getVoices();
this.speakText = function()
{
window.speechSynthesis.speak(msg);
}
}
index.html
<html>
<head>
<title>TODO supply a title</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="/scripts/TTSScript.js"></script>
<script>
function speak()
{
var msg = new SpeechSynthesisUtterance('Hello World');
window.speechSynthesis.speak(msg);
}
function speak2()
{
var TTS = new TTS();
TTS.speakText();
}
</script>
</head>
<body>
<div><button onclick="speak2()">Click me</button></div>
</body>
</html>
Unfortunatly when I click on the button in the html page, what I get is an error. It is below.
Uncaught TypeError: undefined is not a function (13:42:13:817 | error, javascript)
at speak2 (public_html/index.html:23:26)
at onclick (public_html/index.html:31:126)
I am not much familiar with JavaScript, can you please let me know why I am getting this error and how to fix it?
After declaring a function, its name becomes a (locally) preserved word. It means that creating a variable with the same name might cause some problems.
I took your code and changed
var TTS = new TTS();
TTS.speakText();
Into
var tts = new TTS();
tts.speakText();
And the error disappeared.
I solved your problem.. :
don't use all capital names as variables
var tts = new TTS();
tts.speakText();
correct speak call is in the fiddle
http://jsfiddle.net/bpprwfxa/4/
var msg = new SpeechSynthesisUtterance('Yohan');
window.speechSynthesis.speak(msg);