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

Onno Surewaard

也许这个问题有点奇怪,但我不知道如何用一句话来问这个问题。

这个项目:我使用了这个名为 ml5.js 的 JavaScript 库,它使用机器学习来检测你说的单词并显示在屏幕上,数据库中只有 18 个单词。

例如,当您说出“左”这个词时,左会与歌曲名称和艺术家名称一起显示在屏幕上。但我希望它播放显示的歌曲...

首先让我分享我的代码:

<!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/[email protected]/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]

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")

现在在这里解释我的挣扎。我试图在“nummer”之后将音频源放入我的 JavaScript 数据库文件中

所以我想要 "Nummer": "audiofile"

当我在屏幕上显示“向左”或“向上”时,我希望该音频文件开始播放。

我怎样才能解决这个问题?

艾哈迈德·哈马德 |

诚实地遵循附加的代码非常困难,但我会建议一些您可能会发现更容易的方法。

对于数据库,我只会存储音频文件的名称

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"
  }
]

我还会从 HTML 中删除音频标签<audio id="myAudio" src="Left1.mp3"></audio>,我们可以依靠 JS 来完成它。

我也会将此功能添加到脚本中

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

现在,您所要做的就是在playSoundml5以下位置获取结果时调用

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!

  }
  ...
}

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

如何在另一个JavaScript文件中包含一个JavaScript文件?

如何在javascript中更改另一个文件中的文件中的值变量

如何使用另一个JavaScript文件中的javascript文件中的javascript常量

如何在另一个JavaScript文件中包含插件文件

如何在 JavaScript 中调用返回另一个函数的函数?

如何在一个Javascript文件中授予对另一个Java文件中定义的变量的访问

如何在主 JS 文件中调用另一个 javascript

PHP-如何在另一个JavaScript文件中获取JSON

如何在另一个文件中调用异步 javascript 函数的 html 文件中获取返回值?

如何在另一个JavaScript中访问一个JavaScript中的变量?

如何调用一个javascript中定义的功能到另一个javascript文件?

Django:如何在另一个JavaScript文件中导入JavaScript

如何从另一个函数返回“addEventListener()” - Javascript

如何从另一个目录加载javascript文件

如何在JavaScript中的另一个函数中调用一个函数

如何将一个JavaScript文件中的一个变量调用到另一个JavaScript文件中?

如何在javascript的另一个功能文件的功能中调用功能文件功能?

如何在 Javascript 中从另一个网站捕获脚本的响应(它返回纯文本)?

如何从另一个QML文件调用QML文件中定义的Javascript函数?

如何在JavaScript中的另一个对象内添加一个对象?

如何在JavaScript中检查一个DateTime是否晚于另一个

如何在javascript中从另一个方法调用一个方法?

如何使用另一个 JavaScript 文件中的变量?

如何从另一个文件中加载数据作为JavaScript / jQuery中的选项值?

如何从外部javascript文件访问嵌入到另一个函数中的函数?

如何使用ajax或jquery或javascript读取另一个文件中的PHP变量

如何将 javascript 的变量存储在另一个 .js 文件中?

如何将一个JavaScript文件中的变量分配给另一个JS File?

如何在Javascript的另一个函数中使用返回值?