从带有变量的URL中播放JavaScript中的音频

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中，然后从链接调用音频https://bobzilla07.github.io/Music_Tap/${song}.mp3${song}是来自html输入的输入

Answer 1

我认为您也必须在这里传递扩展。这确实有效，因为此服务器已启用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>

歌曲列表

Answer 2

你可以这样做：

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

现在，您可以搜索歌曲的文件名。就像1979将播放1979.mp3一样。