Cloud Social Music



Michele Cipriani

Michele Cipriani

CEO @ Dropin

What is Dropin ?


An HTML5 Web & Mobile App

A Collaborative Music Tool for Musicians
From Newbie to Pro !

A Cloud Music service for Listeners

Down arrow

A Collaborative Music Tool

Thanks to HTML5 Dropin allows Musicians from all over the world to collaborate in real time in the composition and production process.

They just need to open the browser of their devices, be it Desktop or Mobile, to access an international network of artists.

A Cloud Music Service

Users can access Dropin to listen, in streaming, to their favorite tracks, discover new Music,
save their songs in playlists, follow the bands and artists they like, and meet like-minded people.

We are Profiling Users

The tracks produced on Dropin, or those which had been previously produced, and then uploaded, can be classified by using Tags & Moods.

Every time a user listen to, share or purchase and audio content, Dropin refines his profile, identifying his most prominent interests in order to then suggest new content to listen, friendships, musical projects or events, which are strictly in line with his preferences.

HTML5 Audio

Not every Web Browser supports the same audio format.
An HTML5 Web App, must provide the audio contents in different formats, to guarantee accessibility.

Browser audio support

Desktop Browser Version Codec Support
Internet Explorer 9.0+ MP3, AAC
Chrome 6.0+ Ogg Vorbis, MP3, WAV†
Firefox 3.6+ Ogg Vorbis, WAV
Safari 5.0+ MP3, AAC, WAV
Opera 10.0+ Ogg Vorbis, WAV


Wav is native audio format, it needs a large amount of space.

Ogg Vorbis is a free and open audio encoding format.

MP3 is a proprietary media encoding format.

The Code (Easy Way)

DOM Manipulation

The HTML5 DOM has methods, properties, and events for the <audio> elements.

These methods, properties, and events allow you to manipulate <audio> elements using JavaScript.

HTML5 Audio in Javascript

We can easily use Modernizr or canPlayType() method
to detect what audio codec is supported by the browser, and declare an audio element.

HTML5 provides methods, properties, and events which allow you to manipulate <audio> elements using JavaScript.

The Code (Advanced Way)

You don't need to bother with <audio> elements.
HTML 5 lets you access audio API directly:

var audio1 = new Audio();
var audio1 = new Audio();
audio1.src = Modernizr.audio.ogg ? 'audio/demo-audio.ogg' :

Play Audio

The DOM reference

W3C - Audio provides all the details.
Here is some basic methods, properties and events.


Method Description
canPlayType() Checks if the browser can play the specified audio/video type
load() Re-loads the audio element
play() Starts playing the audio/video
pause() Pauses the currently playing audio/video


Property Description
autoplay Sets or returns if the audio/video should start playing as soon as it is loaded
currentTime Sets or returns the current playback position in the audio/video (in seconds)
duration Returns the length of the current audio/video (in seconds)
paused Sets or returns if the audio/video is paused or not
src Sets or returns the current source of the audio/video element
volume Sets or returns the volume of the audio/video


Property Description
abort Fires when the loading of an audio/video is aborted
ended Fires when the current playlist is ended
error Fires when an error occurred during the loading of an audio/video
pause Fires when the audio/video has been paused
play Fires when the audio/video has been started or is no longer paused
volumechange Fires when the volume has been changed

Dropin Audio Tools

Advanced GUI

Audio Synch

Real Time Music Sequencer

Drum Machine

Audio Effects


Cloud Social DAW