我想创建一个按钮，仅使用 HTML、CSS 和 JavaScript 将音乐文件从用户计算机加载到
我显然有更多代码，但我只是想知道我应该做什么，所以我不会把它们全部放进去。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>PlayBackingTracks</title>
</head>
<body>
</body>
</html>
波斯汪浏览 146回答 1
1回答
-
MMMHUHU
您在示例中没有提供太多可使用的内容，但我创建了一个可能有帮助的代码片段。运行下面的代码片段：//declare elements as varsvar audioUpload = document.getElementById("file");var audioLink = document.getElementById('audioLink');var audioSource = document.getElementById("audioSource");var audioControl = document.getElementById('audio');//attach event listener to audioUpload inputaudioUpload.addEventListener("change", function() { uploadAudio(this);});//function that will upload audiofunction uploadAudio(input) { var reader; if (input.files && input.files[0]) { reader = new FileReader(); reader.onload = function(e) { audioLink.setAttribute('data-value', e.target.result); audioLink.innerHTML = "Click to play" } reader.readAsDataURL(input.files[0]); }}//function that will play audio after clicking linkfunction play(element) { audioSource.src = element.getAttribute('data-value'); audioControl.load(); audioControl.play();};<p>Upload your audio file:</p><input type="file" id="file"><br/><br/><div> <a id="audioLink" href="#" onclick="play(this)" data-value=""></a></div><br/><br/><audio controls="controls" id="audio"> <source id="audioSource" src=""></source></audio>
随时随地看视频慕课网APP
相关分类
JavaScript