使用 HTML5 文件 API 在浏览器中创建音频列表

我不想用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/上发布了一份副本

相关内容

最新更新

热门标签：