Question

我正在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);
};

Answer 1

我建议您阅读文件的内容并使用webAudio API解码音频数据，而不是使用绝对路径作为音频元素的src属性。

以下是立即播放已删除文件的工作示例。但您可以保存缓冲区以供以后播放。

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)
}

Answer 2

您可以停用浏览器的网络安全性。在终端中，cd到应用程序并输入“--disable-web-security”，不带引号。

Answer 3

我认为您在播放前忘记加载音频。在检索要播放的音频文件时，我总是忘记这一点。

document.getElementsByTagName("audio")[0].load();
document.getElementsByTagName("audio")[0].play();

HTML5音频播放器拖放

3 个答案: