We Keep Coding

HTML audio duration not working in chrome

Upong calling audioElement.duraion returns infinite in chromium based browsers but works find in firefox. The song is stored locally in the same directory.
console.log("Welcome to Spotify | clone");
let songIndex = 0;
const masterPlay = document.getElementById("masterPlay");
const progressBar = document.getElementById("progressBar");
const gif = document.getElementById("gif");
const audioElement=document.getElementById("song")
// let audioElement=new Audio('./1.mp3')
// Handeling play pause and click
masterPlay.addEventListener('click', () => {
if (audioElement.paused || audioElement.currentTime <= 0) {
audioElement.play();
masterPlay.classList.remove("fa-circle-play");
masterPlay.classList.add("fa-circle-pause");
gif.style.opacity = 1;
}
else {
audioElement.pause();
masterPlay.classList.remove("fa-circle-pause");
masterPlay.classList.add("fa-circle-play");
gif.style.opacity = 0;
}
});
//EventListeners
audioElement.addEventListener("timeupdate", () => {
progress = ((audioElement.currentTime / audioElement.duration) * 100);
progressBar.value = progress;
console.log(audioElement.currentTime)
});
Expectations:
It returns the duration of the autio track.
What I tried:
Different browsers. (Works fine on firefox based browsers.)
Different song. (I found that some songs don't work on chrome but on firefox everything works.)
Tried using HTML audio element. (The problem persists)
Tried using JS audio(). (The problem still exists)

At the end of the day I found out that it was a bug with VS code Live Preview extension from Microsoft

How to add webcam selection to official mediapipe face detection solution?

https://google.github.io/mediapipe/solutions/face_detection#javascript-solution-api
This is simplest way to add face detection to webcam feed on website using mediapipe by Google.
My laptop have inbuilt webcam and one OBS virtual webcam also. When I try this example code on my laptop sometime virtual webcam get picked up by my webpage randomly.
How can I add webcam selection to this example code so I can avoid getting virtual webcam selected automatailly?

Please try this (link provided to full article)
const video = document.getElementById('video');
const button = document.getElementById('button');
const select = document.getElementById('select');
function gotDevices(mediaDevices) {
select.innerHTML = '';
select.appendChild(document.createElement('option'));
let count = 1;
mediaDevices.forEach(mediaDevice => {
if (mediaDevice.kind === 'videoinput') {
const option = document.createElement('option');
option.value = mediaDevice.deviceId;
const label = mediaDevice.label || `Camera ${count++}`;
const textNode = document.createTextNode(label);
option.appendChild(textNode);
select.appendChild(option);
}
});
}
Source : Select Camera Javascript Mediapipe

speechsythesisutterance is not working after chrome update

I have implemented text to speech in javascript it is a funtion which create speech back to back process for different message. sometime before it was working fine but after updating chrome (auto update of window) it doesn't work so i have used artyom library which was also working fine. but now after update of windows again it does support speech again..
now both of the library is not support text to speech.. please help me somebody.. was stuck in this from last 1 month many times it work and after update it doen't i am not getting any standard solution please help...
if ( 'speechSynthesis' in window )
{
window.speechSynthesis.cancel();
//$(".divRandom").hide();
let speech = new SpeechSynthesisUtterance(msg);
voices = window.speechSynthesis.getVoices();
if ('speechSynthesis' in window) {
speech_voices = window.speechSynthesis.getVoices();
window.speechSynthesis.onvoiceschanged = function() {
speech_voices = window.speechSynthesis.getVoices();
};
}
speech.voice = speech_voices[1];
//speech.lang = "en-US";
speech.volume = 2;
if (speed > 1)
speech.rate = 3;//slow speaking
else
speech.rate = 7;//faster
speech.pitch = 1;
window.speechSynthesis.speak(speech);
}
else
{
/*var Jarvis = new Artyom();
Jarvis.ArtyomVoicesIdentifiers["en-GB"] = ["Google UK English Female", "Google UK English Male", "en-GB", "en_GB"];
//Jarvis.say(msg);
//Jarvis.ArtyomProperties["speed"] = 3;
Jarvis.say(msg.toString(),{
onStart:function(){
setTimeout(function(){
// Most likely to be true
console.log("Speaking : "+ Jarvis.isSpeaking().toString());
},500);
},
onEnd: function(){
setTimeout(function(){
// Most likely to be false
console.log("Speaking : "+ Jarvis.isSpeaking().toString());
},500);
}
});*/
alert("your browser doesn't support audio..");
}

Click button on website using java-script and speech recognition

Newbie here. I work on a website where I have to click buttons. I need to be able to click on buttons based on their DIV ID using speech recognition. Lets say a clickable button div has an ID of one, I want to say ONE verbally and have the button clicked.
I am guessing I need Javascript click function combined with a speech recognition API. I can handle using Javascript to manipulate HTML DOM, but how do I interface with an offline speech recognition API. Which one should I use and how do I go about using it?

If you want to test speech recognition you can check MDN docs the page include link to github with demos.
Here is my code based on color example (<com.sun.speech.app.numbers.*> is taken from w3c docs about grammars)
<!DOCTYPE html>
<html>
<body>
<script>
var SpeechRecognition = SpeechRecognition || webkitSpeechRecognition;
var SpeechGrammarList = SpeechGrammarList || webkitSpeechGrammarList;
var SpeechRecognitionEvent = SpeechRecognitionEvent || webkitSpeechRecognitionEvent;
var grammar = '#JSGF V1.0; import <com.sun.speech.app.numbers.*>; grammar numbers; public <number> = <com.sun.speech.app.numbers.*>;'
var recognition = new SpeechRecognition();
var speechRecognitionList = new SpeechGrammarList();
speechRecognitionList.addFromString(grammar, 1);
recognition.grammars = speechRecognitionList;
//recognition.continuous = false;
recognition.lang = 'en-US';
recognition.interimResults = true;
recognition.maxAlternatives = 1;
recognition.onerror = function(event) {
console.log(event.error);
};
document.body.onclick = function() {
recognition.start();
console.log('Ready to receive a number command.');
};
recognition.onresult = function(event) {
var numbers = ['zero', 'one', 'two'];
console.log(event.results);
var last = event.results.length - 1;
var number = event.results[last][0].transcript;
console.log(numbers[number]);
var node = document.querySelector("#" + numbers[number]);
if (node) {
node.style.color = 'red';
}
};
</script>
<div id="one">one</div>
<div id="two">two</div>
</body>
</html>
unfortunetelly speech recognition is disabled for Stack Snippets but here is link to codepen IMO speech recognition in browsers is not very good it don't recognize words you're saying, you need to repeat the word few times to make it work.

How to automatically Start google speech recognition on my page?

I wrote a HTML5 webpage consisting only of:
<input type="text" style="font-size: 40px;" name="speech" size="50" x-webkit-speech/>
What I'm trying to do is to get the x-webkit-speech to start automatically as soon as I enter the page and continously put out the speech recognition results into the text. How would I do that ? I've seen various javascripts relating to that and I tested a lot of them but they don't work for me.
Thanks to anyone who answers ! ;)

You can try to use Web Speech API, for example:
if ('webkitSpeechRecognition' in window) {
var recognition = new webkitSpeechRecognition();
var final_transcript = '';
recognition.continuous = true;
recognition.interimResults = true;
recognition.onresult = function( event ) {
var final_transcript = '';
for (var i = event.resultIndex; i < event.results.length; ++i) {
if (event.results[i].isFinal) {
final_transcript += event.results[i][0].transcript;
}
}
document.getElementById( 'speech' ).value = final_transcript;
};
recognition.start();
}
The only one thing is that you will need to allow page to use microphone at page load
jsFiddle demo