在 JavaScript 中播放来自 URL 的带有变量的音频

Question

我想做的是输入，当你输入它播放的歌曲名称时。首先我尝试的是

function myFunction() {
  var id = document.getElementById("myInput").value;
var audio = 'https://bobzilla07.github.io/Music_Tap/' + id 
  var audio = new Audio ('audio');
 audio.play();

使用html代码

<input id="myInput" type="text">
<button onclick="myFunction()">play</button>

哪个没用

所以我想如果我这样做了会怎样

function myFunction() {
var id = document.getElementById("myInput").value;
var audio = new Audio 'https://bobzilla07.github.io/Music_Tap/' + id;
audio.play();

仍然没有用。有没有人知道如何修复它才能正常工作？

编辑：我不擅长 json 甚至不知道我在做什么 btu 是否有可能从 <input id="myInput" type="text"> <button onclick="myFunction()">play</button>

并将其放入 json 中，然后从 link 中调用音频 https://bobzilla07.github.io/Music_Tap/${song}.mp3 ${song} 是 html 输入

的输入

Answer 1

你可以这样做：

let id = document.getElementById("myInput").value;
let audio = new Audio(`https://bobzilla07.github.io/Music_Tap/${id}.mp3`);
audio.play();

现在您可以搜索歌曲的文件名了。喜欢1979会玩1979.mp3.

Answer 2

我相信你也必须在这里传递扩展名。这确实有效，因为此服务器启用了 CORS。

form.addEventListener("submit", myFunction)
function myFunction(e) {
  e.preventDefault();
  audio.src = 'https://bobzilla07.github.io/Music_Tap/' + myInput.value + '.mp3';
  audio.play();
}

audio { display:none;}

<form id="form">
  <input id="myInput" value="Panic-Song">
  <input type="submit">
</form>
<audio controls id="audio"></audio>

Song list

在 JavaScript 中播放来自 URL 的带有变量的音频

playing audio in JavaScript from URL with variable

html

javascript

variables

audio

url