Social Music Discovery and Playlist Organization -- Web App project which allows SoundCloud tracks, YouTube videos, etc to add them to playlists and manage your online music EDIT: New website: http://crate.ly Think it of as "Pinterest for Online Music"

1. Listen It Later
Gianfranco Palumbo
C08793573
DT228-4
BSc in Computer Science
30th April 2012
Single Page Web Streaming Application which Aggregates Content Across Online Audio Distribution Platforms

2. Project Background
2
- More people listen to music online via streaming services and not buying or downloading. ie Spotify and Grooveshark
- Many don’t buy digital files or pay for an online subscription for unlimited music.

3. 3
- Many free services are ad supported showing massive banners
- or with 30 secs or more like radio ads
(Spotify coming soon to Ireland)

4. Project Background (2)
4
Many people come in contact with new music from streaming services like YouTube and SoundCloud.
How do they keep a track of what song you like?
Listen It Later comes into place helping anyone who wants to keep all their New free online audio tracks from
different streaming services.

5. Project Overview
• Primarily for Music Playlist
• Single User Experience
• Focus on Curation of Playlists
5
- Idea from Read It Later and Instapaper but for specific to New Online Music
- Bookmarklet for easily adding audio tracks into any playlist

6. Why Desktop Web Browser Platform?
• HTML5
• Very performant JavaScript engine
• Devices capabilities and compatibilities
• Mobile or Tablet?
• data plans still expensive
• battery life still not good enough
6
- The current web browser technologies have evolved greatly in the last few years.
- HTML5, very most popular, by adding new HTML tags, Cascading Style Sheets (CSS3) and cross-platform JavaScript
APIs.
- Big move forward to standardise browsers to create a better experience for users and enabling web developers to
build more interactive and dynamic websites.
- Unfortunately when speaking specifically of HTML5 audio and video compatibility between browsers, there is a big
divide about codec support and other issues. These will be further discussed in subsequently.

7. JUNE 2011
The leading social sound platform SoundCloud
reaches 10 Million Registered Users (Jan 2012) 7
http://soundcloud.com/press/releases/2012/01/23/ten-million
June 2011 = 5 million, 2012 = 10 million!

8. Introduction
• HTML5
• AJAX (Asynchronous JavaScript)
• JavaScript libraries for UI
• Python Web Framework (Flask)
• Database (MongoDB, NoSQL)
• the reasoning is on the next slides
8
- The project utilises modern browser technologies (HTML5 and AJAX) to collect audio and video content from different
platforms such as YouTube and SoundCloud into playlists.
- Flask a Python Web Framework
- MongoDB, a NoSQL database. (next slides)

9. Old Design
9

10. Old Design
10
jQuery SoundCloud player called Stratus and CSS framework Bootstrap

11. New Design
11

12. New Design
12
SoundManager2 for audio across all browsers
Knockout JS
jQuery
Sammy
etc

13. Technical Architecture
with JS libraries
13
Technical Architecture

14. Technical Architecture
• Online Streaming Platforms APIs
• YouTube and SoundCloud
• HTML5 vs Flash
• Amazon Web Services
• NoSQL Database (MongoDB)
14
- Flash is better for Audio streaming in compatibility across browsers
- NoSQL
in a traditional Relational model, many tables usually equates to many joins for queries. Denormalising therefore is the
opposite of the goal of a modern distributed database.
- Adobe Flash Player runs in all major Desktop browsers

15. HTML5 vs Flash
HTML5 Audio element compatibility chart
15
Codecs
When can I use... Support tables for HTML5, CSS3, etc, http://caniuse.com/#feat=audio

16. HTML5 vs Flash
16
Codecs / Audio file formats
Script Junkie | Native Audio with HTML5
http://msdn.microsoft.com/en-us/magazine/hh527168.aspx

17. Why?
17
- Several advantages when using NoSQL and MongoDB
- One of the most practical, which were encountered while on work experience, occurs when switching from of Python
programming and then returning to SQL, it can become difficult to remember the syntax of even simple queries.
- A single command the JSON string that contains all the playlists and recordings within, is returned by traversing the
database User and parsing all the fields and dereferencing the embedded documents.

18. Logical Data Model
High level Logic Data Model for NoSQL data-store
18
- Object-Document Mapper (ODM) similar to an ORM that connects Python with MongoDB.
- The diagram represents various documents (or tables) which themselves contain other documents.
- For example: a user will have many playlists.

19. MongoDB Data Modelling
1.{ "_id" : ObjectId( "4f63d24e3e9" ),
2. "username" : "username",
3. "date_logged_in" : Date( 1332112304827 ),
4. "date_registered" : Date( 1331941966716 ),
5. "email" : "email@domain.com",
6. "pw_hash" : "sha1$GYp6QeSf$fb44a91913824",
7. "playlists" : [
8. { "tags" : [],
9. "default" : false,
10. "title" : "Rock",
11. "recordings" : [
12. { "$ref" : "recording",
13. "$id" : ObjectId( "4f666c203e8" ) },
14. { "$ref" : "recording",
15. "$id" : ObjectId( "4f666c203e9" ) } ],
16. }],
17.}
MongoDB User Document
19
Sample of a MongoDB User Document

20. Software Methodology
20
- Prototyping and iterative development
- The fact that a single person developed this project signifies that the software development process has been adapted and
simplified
- A methodology is very much needed because it provides a structure that imposes on the development of any software project
- Why RAD?
Flexibility and Adaptability
Agile and XP have a focus on groups
A disadvantage of RAD does not emphasise on the strategic system needs. The risk is that the system might work well in the
short term, but not on the long-term objectives

21. RESTful API design
Resource GET POST PUT DELETE
read create replace delete
/api/user/me get the current not update not enabled
user object implemented current user
as such details (from
the settings
window) (not
yet
implemented)
/api/user/me/ get the current when creating update all the delete all
playlists user’s a new playlist, user playlists playlists (not
playlists they are all enabled)
instead sent as
PUT request
/api/user/me/ get a single not update a delete a single
playlists/id current user’s implemented single current playlist (not
playlist user playlist, enabled)
creating one if
21
necessary (not
Representational State Transfer (REST) is an architectural style - or "pattern" - guiding on the architecture of web
implemented)
services.
/api/ get allterm and cannotbroken down into many smaller patterns. enabled
Like "Ajax" itself, "REST" is a broad be
not enabled not
recordings recordings implemented
REST is centred around two basic principles:
based on tag,
- Resources as URLs creation date, you wish to expose as part of an API.
A resource is something like a "business entity"
Almost always, the entity issorting, etc person, a car, or a football match.
a noun, e.g. a
Each resource is represented as a unique URL.
/api/ get a single create a new not not enabled
- Operations as HTTP methods.
REST leverages the existingrecording byparticularly GET, POST, PUT, and DELETE, identified by the W3C HTTP
recordings/id HTTP methods, recording (not implemented
Specification it’s id implemented)
/api/tags get all the
Why? For future Mobile app implementation
not not enabled not enabled
tags, sorted, implemented

22. Social Login
22
Social login, enables sign-on using existing login information from a social networking service such as Facebook or
Twitter to sign into a third party website in order to create a new login account specifically for that website.
Designed to simplify logins for end users as well as provide more and more reliable demographic information to web
developers, thought such information is not been stored in the application.

23. Testing & Evaluation
23
Web Page Performance
Network Utilisation
Error handling
Versioning

24. Testing & Evaluation
Internet Internet Google Google Mozilla Mozilla
Explorer Explorer Chrome Chrome Firefox Firefox
8 9 16 17 10 11
Audio Yes with Yes with Yes with Yes with Yes with Yes with
Reproduction Flash** HTML5 Flash or Flash or Flash or Flash or
HTML5 HTML6 HTML7 HTML8
UI loading No* Yes Yes Yes Yes Yes
UI consistent Yes Yes Yes Yes Yes Yes
Login and
Account
creating Yes Yes Yes Yes Yes Yes
windows are
displayed
Scrolling and
sections appear Yes Yes Yes Yes Yes Yes
visible correctly
24
Web Page Performance
Network Utilisation

25. Usability Questionnaire
25
9 questions Lazar
HCI Design Principles

26. Summary Report
Disagree - Neutral - Agree N/A
25%
75%
26
9 questions

27. Challenges
• Design for good User Experience
• Learn how does a NoSQL Database
works
• Learn how JavaScript Frameworks work
• Make it Browser-Compatible (including
Internet Explorer)
27
- Neilsen Heuristics
- Usability testing tools
- I learned Python

28. Work done after submission
Bookmarklet
28
- add audio tracks with one click from other websites (demo)

29. Future Work
• Add more platforms (ie. YouTube)
• Fix bugs
• Improve the landing screen
• Keep improving general UX
29
-

30. Thanks to
• David Carroll
• Susan Mckeever
• Dan Barry
30

31. Listen It Later
• Try it at:
• http://listenitlater.com
• @gianpaj
• gianpa (at) gmail (dotcom)
• Links to all the other social networks:
• http://about.me/gianpaj
31