Question

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

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

有什么建议吗？

Answer 1

你走了。我只在最新的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/

上发了一个副本

使用HTML5 File API在浏览器中创建audiolist

1 个答案: