2

我不想用 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);

效果很好，只是需要一些帮助才能进行下一步。我在想文件应该在播放之前上传到服务器，但是如果有一个解决方案，它不占用空间，而只是在浏览器窗口打开时会很棒！

有什么建议么？

4

1 回答 1

3

干得好。我只在最新的 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/上发布了一份副本

于 2012-04-29T20:43:26.153 回答