我是一个新的网站学习者。所以我正在做一个网站的基础上，我父亲的要求，我需要做一个按钮，导入一个音频的标签。也会有一个X按钮的权利旁边，但我不知道如何脚本，也有一个表的音频是在。我已经做了导入按钮，但不是整个事情。这里有一个概念，我实际上是想说：concept
忘了说，也会有一个keybind按钮，检测任何键你按下，然后设置keybind为它，但这是可选的。
这是我目前的剧本。
于飞：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="./style.css">
<title>Index</title>
</head>
<body>
<form action="/action_page.php">
<input type="file" id="real-file" hidden="hidden" accept=".ogg,.wav,.aiff,.mp3,.aac,.flac,.alac,.dsd,.pcm" />
<button type="button" id="custom-button">CHOOSE A FILE</button>
<span id="custom-text">No file chosen, yet.</span>
</form>
<script src="./main.js"></script>
</body>CSS：
#custom-button {
padding: 10px;
color: white;
background-color: #009578;
border: 1px solid #000;
cursor: pointer;
transition: 0.1s;
}
#custom-button:hover{
background-color: #00b28f;
transition: 0.1s;
}
#custom-text {
margin-left: 10px;
font-family: sans-serif;
color: #aaa;
}JS：
const realFileBtn = document.getElementById("real-file");
const customBtn = document.getElementById("custom-button");
const customTxt = document.getElementById("custom-text");
customBtn.addEventListener("click", function() {
realFileBtn.click();
});
realFileBtn.addEventListener("change", function() {
if (realFileBtn.value) {
customTxt.innerHTML = realFileBtn.value.match(/[\/\\]([\w\d\s\.\-\(\)]+)$/)[1];
} else {
customTxt.innerHTML = "no file chosen, yet.";
}
})我什么也没试过，因为我不知道如何让它工作。
1条答案
按热度按时间sdnqo3pr1#
将音频标签添加到html
将以下内容添加到js中
要获取文件，请使用realFileBtn.files[0]，然后使用window.URL.createObjectURL创建文件的url，并将该url的音频标记的src设置为