ListenToItLater Final Year Project presentation


Published on

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:

Think it of as "Pinterest for Online Music"

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

ListenToItLater Final Year Project presentation

  1. 1. Listen It Later Gianfranco Palumbo C08793573 DT228-4 BSc in Computer Science 30th April 2012Single Page Web Streaming Application which Aggregates Content Across Online Audio Distribution Platforms
  2. 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. 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. 4. Project Background (2) 4Many 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 fromdifferent streaming services.
  5. 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. 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 JavaScriptAPIs.- Big move forward to standardise browsers to create a better experience for users and enabling web developers tobuild more interactive and dynamic websites.- Unfortunately when speaking specifically of HTML5 audio and video compatibility between browsers, there is a bigdivide about codec support and other issues. These will be further discussed in subsequently.
  7. 7. JUNE 2011 The leading social sound platform SoundCloud reaches 10 Million Registered Users (Jan 2012) 7 2011 = 5 million, 2012 = 10 million!
  8. 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 differentplatforms such as YouTube and SoundCloud into playlists.- Flask a Python Web Framework- MongoDB, a NoSQL database. (next slides)
  9. 9. Old Design 9
  10. 10. Old Design 10jQuery SoundCloud player called Stratus and CSS framework Bootstrap
  11. 11. New Design 11
  12. 12. New Design 12SoundManager2 for audio across all browsersKnockout JSjQuerySammyetc
  13. 13. Technical Architecture with JS libraries 13 Technical Architecture
  14. 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. 15. HTML5 vs Flash HTML5 Audio element compatibility chart 15CodecsWhen can I use... Support tables for HTML5, CSS3, etc,
  16. 16. HTML5 vs Flash 16Codecs / Audio file formatsScript Junkie | Native Audio with HTML5
  17. 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 Pythonprogramming 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 thedatabase User and parsing all the fields and dereferencing the embedded documents.
  18. 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. 19. MongoDB Data Modelling 1.{ "_id" : ObjectId( "4f63d24e3e9" ), 2. "username" : "username", 3.  "date_logged_in" : Date( 1332112304827 ), 4.  "date_registered" : Date( 1331941966716 ), 5.  "email" : "", 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 19Sample of a MongoDB User Document
  20. 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 andsimplified- 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 groupsA disadvantage of RAD does not emphasise on the strategic system needs. The risk is that the system might work well in theshort term, but not on the long-term objectives
  21. 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 (notRepresentational 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. enabledLike "Ajax" itself, "REST" is a broad be not enabled not recordings recordings implementedREST 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. aEach 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 implementedSpecification it’s id implemented) /api/tags get all theWhy? For future Mobile app implementation not not enabled not enabled tags, sorted, implemented
  22. 22. Social Login 22Social login, enables sign-on using existing login information from a social networking service such as Facebook orTwitter 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 webdevelopers, thought such information is not been stored in the application.
  23. 23. Testing & Evaluation 23Web Page PerformanceNetwork UtilisationError handlingVersioning
  24. 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 24Web Page PerformanceNetwork Utilisation
  25. 25. Usability Questionnaire 259 questions LazarHCI Design Principles
  26. 26. Summary Report Disagree - Neutral - Agree N/A 25% 75% 269 questions
  27. 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. 28. Work done after submission Bookmarklet 28- add audio tracks with one click from other websites (demo)
  29. 29. Future Work • Add more platforms (ie. YouTube) • Fix bugs • Improve the landing screen • Keep improving general UX 29-
  30. 30. Thanks to• David Carroll• Susan Mckeever• Dan Barry 30
  31. 31. Listen It Later• Try it at: •• @gianpaj• gianpa (at) gmail (dotcom)• Links to all the other social networks: • 31