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

どうぞ。最新のクロムでしかテストしていませんが、IE9、FF3.6+、およびサファリで動作するはずです。

これは 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 に答える