Creating audiolist in browser with HTML5 File API

Question

I wan't to create an musicplayer with HTML5. I have already created the drag and drop file from desktop which was pretty easy. Right now it's creating an unordered list with the song names, but i dont know how to capture the song, so when the user presses it, it will play.

This is what i have so far:

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

It works great, just need some help to take the next step. I'm thinking that the files should be uploaded to the server before it can be played, but if there is an solution, which not takes up space, but just is when the browser window is open would be great!

Any suggestions?

Andrew Brock · Accepted Answer · 2012-04-29 20:53:35Z

3

Here you go. I have only tested it in the latest chrome, but it should work in IE9, FF3.6+ and safari.

This uses HTML5 file reader and audio players, and is all done in this 1 HTML file

The basics are from https://developer.mozilla.org/en/DOM/FileReader and 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>

EDIT: When saved as a HTML file, it must be accessed through a web server, local or remote. The HTML5 file reader does not appear to work when you open the html file directly.

I posted a copy on http://jsfiddle.net/KY8Kg/

edited Apr 29, 2012 at 20:53

answered Apr 29, 2012 at 20:43

Andrew Brock

1,3748 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

charmixer Over a year ago

Thanks! But i want to "save" it, so it can be played when other songs in front in the playlist is done? It must be possible to save many songs for later play. I want it to be possible to drop an album on the playlist and it will then play every song. Like using windows mediaplayer. Is this possible?

Andrew Brock Over a year ago

This is possible with the same code, Check out the new jsfiddle.net/KY8Kg/6 This time you can select multiple files in the browse dialog, choose more than 1 file, or open the box more than once to choose multiple files, and it will queue them up

Andrew Brock Over a year ago

It is worth mentioning that the drag-and-drop is the same as the browse dialog for this purpose, and hence you can D&D multiple times to keep adding to the list

charmixer Over a year ago

I have got your code working with my drag and drop code,i just need to make the list clickable so you can choose which song you wants to hear. Thanks so far!

Andrew Brock Over a year ago

If you havn't figured it out, just call LoadAudioFile() with the index of the file you want to play and it will play it straight away. Without been told what to do, it will continue to progress down the playlist and stop once it reaches the end

Collectives™ on Stack Overflow

Creating audiolist in browser with HTML5 File API

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related