如何在 JavaScript 中从另一个 JavaScript 文件返回音频？

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.这个项目：我为 JavaScript 使用了这个名为 ml5.js 的库，它使用机器学习来检测你说的单词并显示在屏幕上，数据库中只有 18 个单词。

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] [我用作数据库的 JAVASCRIPT]

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"我试图在“nummer”之后将音频源放入我的 JavaScript 数据库文件中

So I want "Nummer": "audiofile"所以我想要“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.我还会从 HTML <audio id="myAudio" src="Left1.mp3"></audio>中删除音频标签，我们可以只依靠 JS 来完成它。

I would also add this function to the script我还会将此 function 添加到脚本中

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 :现在，您所要做的就是在从ml5获取结果时调用playSound ：

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!

  }
  ...
}

如何在 JavaScript 中从另一个 JavaScript 文件返回音频？

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-07 22:22:32

如何在 JavaScript 中从另一个 JavaScript 文件返回音频？

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-07 22:22:32

解决方案1
0 已采纳 2020-06-07 22:22:32