0

html5 にオーディオ プレーヤーを実装しています。これには、mp3 ファイルを読み込んで再生するためのドラッグ アンド ドロップ オプションがありますが、ファイルのプレーン化に問題があります。

この領域にファイルをドロップすると、オブジェクトのコンソール プロパティで確認できますが、Web ブラウザのセキュリティのため、絶対パスに関する情報はありません。

この方法でmp3を再生する方法はありますか？

index.html と本文のコンテンツ:

<div style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;"" id="cudl">add file here</div>
<div id="play" style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;">PLAY</div>
<div id="pause" style="border: 1px solid black; width: 200px; height: 50px; padding: 10px;">PAUSE</div>
<div id="progress" style="width: 1000px; height: 50px; background: black; "><div id="time" style="width: 0%; height: 50px; background: green;"></div></div>

JavaScript:

window.onload = function () {
    var cudl = document.getElementById("cudl");
    cudl.addEventListener("dragover", function (ev) {
        ev.preventDefault();
    }, false);
    cudl.addEventListener("drop", function (ev) {
        ev.preventDefault();
        var data = ev.dataTransfer.getData("audio/mpeg");

        var allAudio = document.getElementsByTagName("audio");
        if (allAudio.length > 0) {
            for (var i = 0; i < allAudio.length; i++) document.body.removeChild(allAudio[i]);
        }
        var audio = document.createElement("audio");
        audio.setAttribute("src", ev.dataTransfer.files[0].name);
        document.body.appendChild(audio);

        console.log("append file");
        console.log(ev.dataTransfer.files[0]);

        audio.addEventListener("durationchange", function () {
            console.log("dc " + this.duration);
        });

        audio.addEventListener("timeupdate", function () {
            //console.log("ct " + this.currentTime);
            var prog = document.getElementById("time");
            prog.style.width = Math.floor(this.currentTime / this.duration * 100) + "%";
        });

        var play = document.getElementById("play");
        play.addEventListener("click", function () {
            document.getElementsByTagName("audio")[0].play();
        });

        var pause = document.getElementById("pause");
        pause.addEventListener("click", function () {
            document.getElementsByTagName("audio")[0].pause();
        });

    }, false);
};
4

3 に答える 3

1

絶対パスを使用してオーディオ要素の src 属性として使用する代わりに、ファイルの内容を読み取り、webAudio API を使用してオーディオ データをデコードすることをお勧めします。

ドロップされたファイルをすぐに再生する実際の例を次に示します。ただし、後で再生するためにバッファを保存することはできます。

var context = new AudioContext()

window.addEventListener('load', function() {
    var dropzone = document.querySelector('#dropzone');
    dropzone.addEventListener('drop', handleDrop, false)
    dropzone.addEventListener('dragover', handleDragOver, false)
})

var handleDragOver = function(e) {
    e.preventDefault()
    e.stopPropagation()
}

var handleDrop = function(e) {
    e.preventDefault()
    e.stopPropagation()

    var files = e.dataTransfer.files
    for (var i = 0; i < files.length; i++) {
        var file = files[i]
        var reader = new FileReader()
        reader.addEventListener('load', function(e) {
            var data = e.target.result
            context.decodeAudioData(data, function(buffer) {
                playSound(buffer)
            })
        })
        reader.readAsArrayBuffer(file)
    }
}

var playSound = function(buffer) {
    var source = context.createBufferSource()
    source.buffer = buffer
    source.connect(context.destination)
    source.start(0)
}
于 2015-06-29T11:49:19.240 に答える