Mozilla Demo Studio

  • Submit a Demo

Beyer Music Player

Drop your music directly from your desktop to this player

Built using HTML5, Canvas, Audio, Drag and Drop, Files,

  • 135 views
  • 0 comments

More About This Demo From The Author

* Drag and drop your files directly from your desktop to the player.
* 100% client-side, no upload.
* Go to a specific point in the song by clicking the progress bar.
* Reorder the playlist by dragging the tracks.
* Spectrum analyzer (only on firefox)
* Elegantly denies unsupported files.

Beyer is a music player that shows the potential of the drag and drop technology. You are no longer trapped inside the browser window, now you can interact with the desktop as well. With a few lines of code you application is ready to receive files from the outer world.

This demo uses not only the drag and drop technology, but also HTML5's audio element and canvas to draw the spectrum analyzer. The latter only works on firefox because this browser provides all the needed information within the Audio element, while in other browsers you need to put a lot of objects to work together to get this information.

Tested on the latest Firefox and Chrome. Remember that at the time of this Dev Derby (Jan. 2013) Firefox doesn't support MP3 files.

Happy hacking!

No comments yet.

Register or log in to add your own.

Get the Source Code

Download the Source 7.23 KB · ZIP File

Browse the Source

This demo is released under the GPL license.

More by tuxie