HTML5音频播放器拖放 [英] HTML5 audio player drag and drop

问题描述

我正在html5中实现音频播放器，它具有用于加载和播放mp3文件的拖放选项，但我在编写文件时遇到问题。

I'm implementing audio player in html5, which has drag-drop option for load and play mp3 files, but I have problem with plaing the file.

该文件被删除在该区域，我可以在对象的控制台属性中看到，但由于Web浏览器的安全性，没有关于绝对路径的信息。

When the file is dropped on the area, I can see in the console properties of object, but there is no information about absolute path, because of security in web browser.

是有一个选项，如何以这种方式播放mp3？

Is there an option, how to play mp3 this way ?

index.html和正文内容：

index.html and body content:

<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：

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

推荐答案

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

Instead of using the absolute path to use as an src-attribute on an audio element, I suggest you read the contents of the file(s) and use the webAudio API for decoding the audio data.

这是一个立即播放删除文件的工作示例。但你可以保存缓冲区以便以后播放。

Here is a working example for playing the dropped file immediately. But you can just save the buffer for later playback.

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

这篇关于HTML5音频播放器拖放的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！