Before I say what I want to know I shall explain the project.
It uses a really simple machine learning model: https://teachablemachine.withgoogle.com/models/XB7_Ta3Iy/
And for example when an image of the avengers show up on the webcam is will give an number; a 1 is 100% sure and a 0 is 0%.
I it to play a audiofile whenever it gets above a certain percentage but I can't seem to make it work.
<!DOCTYPE html>
<html>
<head>
<script src="geluid.js"></script>
<script src="sketch.js"></script>
</head>
<body>
<div>Teachable Machine Image Model</div>
<button type="button" onclick="init()">Start</button>
<div id="webcam-container"></div>
<div id="label-container"></div>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/[email protected]/dist/tf.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@teachablemachine/[email protected]/dist/teachablemachine-image.min.js"></script>
<script type="text/javascript">
// More API functions here:
// https://github.com/googlecreativelab/teachablemachine-community/tree/master/libraries/image
// the link to your model provided by Teachable Machine export panel
const URL = "https://teachablemachine.withgoogle.com/models/XB7_Ta3Iy/";
let model, webcam, labelContainer, maxPredictions;
// Load the image model and setup the webcam
async function init() {
const modelURL = URL + "model.json";
const metadataURL = URL + "metadata.json";
// load the model and metadata
// Refer to tmImage.loadFromFiles() in the API to support files from a file picker
// or files from your local hard drive
// Note: the pose library adds "tmImage" object to your window (window.tmImage)
model = await tmImage.load(modelURL, metadataURL);
maxPredictions = model.getTotalClasses();
// Convenience function to setup a webcam
const flip = true; // whether to flip the webcam
webcam = new tmImage.Webcam(200, 200, flip); // width, height, flip
await webcam.setup(); // request access to the webcam
await webcam.play();
window.requestAnimationFrame(loop);
// append elements to the DOM
document.getElementById("webcam-container").appendChild(webcam.canvas);
labelContainer = document.getElementById("label-container");
for (let i = 0; i < maxPredictions; i++) { // and class labels
labelContainer.appendChild(document.createElement("div"));
}
}
async function loop() {
webcam.update(); // update the webcam frame
await predict();
window.requestAnimationFrame(loop);
}
// run the webcam image through the image model
async function predict() {
// predict can take in an image, video or canvas html element
const prediction = await model.predict(webcam.canvas);
for (let i = 0; i < maxPredictions; i++) {
const classPrediction =
prediction[i].className + ": " + prediction[i].probability.toFixed(2);
labelContainer.childNodes[i].innerHTML = classPrediction;
}
}
</script>
</body>
</html>
This .js file is used in another project where it works fine but it plays whenever a word is spoken.
var resultP;
var audio = nummers;
function playSound(file){
var cAudio = new Audio("Left1.mp3");
cAudio.play();
}
function play2Sound(file){
var cAudio = new Audio("up.mp3");
cAudio.play();
}
function stopsound(file) {
var cAudio = new Audio("Left1.mp3");
cAudio.pause();
}
var nummers = geluid.filter(zoeken);
function zoeken(geluid) {
return geluid.Titel.includes("Left");
}
console.log(nummers);
var nummers2 = geluid.filter(zoeken2);
function zoeken2(geluid) {
return geluid.Titel.includes("Up");
}
function preload() {
let options = { probabilityThreshold: 0.98 };
soundClassifier = ml5.soundClassifier('SpeechCommands18w', options);
}
function setup() {
createCanvas(400, 400);
resultP = createP('waiting...');
resultP.style('font-size','32pt');
soundClassifier.classify(gotResults);
}
function gotResults(error, results) {
if (error) {
console.log('something went wrong');
console.error(error);
}
resultP.html(results[0].label);
console.log (results[0].label);
good(results[0].label);
}
function good (label)
{
if (label === 'left') {
console.log ('good fun');
var vinden = Math.floor(Math.random() * nummers.length);
var denaam = nummers[vinden]
resultP.html('left' + '<br>' + '<br>' + 'Song: ' + denaam.Titel + '<br>'+ '<br>'+ 'Artist: ' + denaam.Artist);
playSound(denaam.Nummer);
}
else
{
console.log ('gestopt')
//audio.pause();
//audio.currentTime = 20;
}
{
if (label === 'up') {
console.log ('good fun');
var vinden = Math.floor(Math.random() * nummers2.length);
var denaam = nummers2[vinden]
resultP.html('up' + '<br>' + '<br>' + 'Song: ' + denaam.Titel + '<br>'+ '<br>'+ 'Artist: ' + denaam.Artist);
play2Sound(denaam.Nummer);
}
else
{
console.log ('gestopt')
//audio.pause();
//audio.currentTime = 20;
}
}
}
question from:
https://stackoverflow.com/questions/65893353/how-do-i-play-audio-after-prediction-with-tensorflow-js-in-javascript 与恶龙缠斗过久,自身亦成为恶龙；凝视深渊过久,深渊将回以凝视…
