我不想使用 HTML5 创建音乐播放器。我已经从桌面创建了拖放文件，这非常简单。现在它正在创建一个包含歌曲名称的无序列表，但我不知道如何捕获歌曲，所以当用户按下它时，它就会播放。
这是我到目前为止所拥有的:
var dropbox = document.getElementById("dropbox")
dropbox.addEventListener("drop", function (evt) {
evt.preventDefault();
evt.stopPropagation();
var files = evt.dataTransfer.files;
for (var i = 0, f; f = files[i]; i++) {
var li = document.createElement('li');
li.innerHTML = "<li>" + escape(f.name) + "</li>";
document.getElementById('songs').appendChild(li);
}
console.log("Dropped File");
}, false);
效果很好，只是需要一些帮助才能采取下一步。 我认为文件应该先上传到服务器才能播放，但如果有一个解决方案，不占用空间，而只是在浏览器窗口打开时就太好了!
有什么建议吗？
最佳答案
给你。我只在最新的 chrome 中测试过它，但它应该可以在 IE9、FF3.6+ 和 safari 中工作。
这使用 HTML5 文件阅读器和音频播放器，并且全部在这 1 个 HTML 文件中完成
基础知识来自https://developer.mozilla.org/en/DOM/FileReader和 http://www.w3.org/2010/05/video/mediaevents.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>Audio Player Test</title>
<script type="text/javascript">
function SelectAudio(files) {
var file = files[0];
if (file.type.match(/audio.*/)) {
var reader = new FileReader();
reader.onload = function(d) {
var e = document.createElement("audio");
e.src = d.target.result;
e.setAttribute("type", file.type);
e.setAttribute("controls", "controls");
e.setAttribute("autoplay", "true");
document.getElementById("container").appendChild(e);
};
reader.readAsDataURL(file);
}
}
</script>
</head>
<body>
<input type="file" onchange="SelectAudio(this.files)" />
<div id="container"></div>
</body>
</html>
编辑:保存为 HTML 文件时，必须通过本地或远程 Web 服务器进行访问。当您直接打开 html 文件时，HTML5 文件阅读器似乎不起作用。
我在 http://jsfiddle.net/KY8Kg/ 上发布了一份副本
关于javascript - 使用 HTML5 文件 API 在浏览器中创建音频列表，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/10375582/