如何在 JavaScript 中從另一個 JavaScript 文件返回音頻？

Question

也許這個問題有點奇怪，但我不知道如何用一句話問這個問題。

這個項目：我為 JavaScript 使用了這個名為 ml5.js 的庫，它使用機器學習來檢測你說的單詞並顯示在屏幕上，數據庫中只有 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/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]

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”

當我在屏幕上顯示“左”或“上”時，我希望該音頻文件開始播放。

我怎樣才能解決這個問題？

Answer 1

誠實地遵循附加的代碼是相當困難的，但我會建議一些你可能會發現更容易的方法。

對於數據庫，我只存儲音頻文件的名稱

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 添加到腳本中

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

現在，您所要做的就是在從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