How can I in JavaScript return audio from another JavaScript file?

Question

Maybe the question is a bit weird but I don't know how to ask this in one sentence.

This project : I used this library for JavaScript called ml5.js which uses machine learning to detect a word you are saying and displays is on screen, only 18 words are in the database.

When for example you say the word 'left', left show up on screen along with the name of the song and the artist. But I want it to play the song that is displayed so...

First of all let me share my code:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/p5.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.dom.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.3/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

    <script src="https://unpkg.com/ml5@0.3.1/dist/ml5.min.js"></script>
    
  </head>
  <body>
    <script src="geluid.js"></script>
    <script src="sketch.js"></script>
    
    <audio id="myAudio" src="Left1.mp3"></audio>

  </body>
</html>

html, body {
    margin: 0;
    padding: 0;
    background-color: #FFF;
  }
  canvas {
    display: block;
  }

console.log ('ml5 version:', ml5.version)

let soundClassifier;
var resultP;
var audio = nummers;

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);
    
  } 
else 
{
  console.log ('gestopt')
  document.getElementById('myAudio').pause();
  //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);
    return denaam.Nummer
  } 
else 
{
  console.log ('gestopt')
  document.getElementById('myAudio').pause();
  //audio.pause();
  //audio.currentTime = 20;
}

}

}

[JAVASCRIPT I USE AS A DATABASE]

var geluid = [
{
    "Titel": "No Tears Left",
    "Artist": "Russ",
    "Nummer": document.getElementById('myAudio')
  },
  {
    "Titel": "The Only Way Is Up",
    "Artist": "Martin Garrix, Tiësto",
    "Nummer": document.getElementById('myAudio')
  }

]

//Audio ("Left1.mp3")

Now here to explain my struggles. I am trying to put a audio source in my JavaScript database file after "nummer"

So I want "Nummer": "audiofile"

And I want that audiofile to start playing when I it says 'left' or 'up' on screen.

How can I fix this?

Answer 1

It's quite hard to follow the attached code honestly, but I would suggest some approach which you might find easier.

For the database, I would store only the name of the audio file

var geluid = [
{
    "Titel": "No Tears Left",
    "Artist": "Russ",
    "Nummer": "noTearsLeft.mp3"
  },
  {
    "Titel": "The Only Way Is Up",
    "Artist": "Martin Garrix, Tiësto",
    "Nummer": "theOnlyWay.mp3"
  }
]

I would also remove the audio tag from HTML <audio id="myAudio" src="Left1.mp3"></audio> , we can just rely on JS for doing it.

I would also add this function to the script

function playSound(file){
    var cAudio = new Audio("path/to/music/" + file);
    cAudio.play();
}

Now, all you have to do is to call playSound when get results from ml5 :

function good (label) {
  if (label === 'left') { // I am not sure I understand this
    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); // Wohooo!

  }
  ...
}

How can I in JavaScript return audio from another JavaScript file?

Question

1 answers

solution1
0 ACCPTED 2020-06-07 22:22:32

How can I in JavaScript return audio from another JavaScript file?

Question

1 answers

solution1 0 ACCPTED 2020-06-07 22:22:32

solution1
0 ACCPTED 2020-06-07 22:22:32