CODEWITHSUNDEEP
javascripthtmldrag-and-drophtml5-audio
LorD_OniX
LorD_OniX

Reputation: 11

HTML5 audio player drag and drop

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.

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.

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

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:

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

Upvotes: 1

Views: 5654

Answers (3)

SubHero
SubHero

Reputation: 119

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

Upvotes: 2

insitderp
insitderp

Reputation: 99

I think you are forgetting to load the audio before playing it. I always forget this when retrieving audio files to play.

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

Upvotes: 0

Randy Rollog
Randy Rollog

Reputation: 38

You can disable the web security of the browser. In the terminal, cd to the application and type "--disable-web-security" without the quotes.

Upvotes: 0

Related Questions