A Better looking music player!

After the usability tests I started to work on what needed improving, I start with the colours creating something that wasn't so pastel like, I use colours which are bolder.

I also redesigned the logo, so it looks better, and instead of using a grid icon I have changed this to a star.

I've kept the previous, play, stop and next button the same as they are now, this makes them stand out within the page becoming more obvious that they are click able.

The font has also been changed to white which makes it easier to read.

The search music still isn't working neither is the submit button on the form, however I have included a little music note at the top, so on tabs it will appear.

Usability Testing

After carrying out 5 usability tests I have had some results, I tested on 5 people:

Results

Q.1 Can you get to the navigation menu?

All 5 people that tested could reach the navigation menu.

Q.2 Are you able to use the play, stop, next and previous buttons easily?

All 5 people that done the test said yes.

Q.3 Is the colour scheme consistent and used wisely throughout the app?

All 5 people tested said yes.

Q.4 Are you able to get to about, so you can read about the app and fill the feedback form in?

All 5 people tested said yes.

Q.5 What would you change?

This question gave the most results all the users that where tested all asked the colour scheme to be changed to make it feel more like a music app. It was also suggested that there was too many colours within the app and the logo was different.

I was asked to centre the music playing in the centre of the body as well, however jQuery wouldn't let me do this. A volume control was also suggest which I am working on designing but won't be complete in time for submission.

Reflection of the project

Overall I have really enjoyed doing this project. Down to the fact that jQuery Mobile is so simple and so well documented. This has made learning the language very quick.

What would you improve?

I'd like to improve the design more using CSS3 Psuedo classes to change the background with every click to show the different album art on everysong.

I also want to make it a little bit more punchy and get the search bar working as well as the feedback form!

What have you learnt?

I've taken from this that I have a better than basic understand of jQuery and JavaScript and I am able to use jQuery Mobile efficiently without overdoing with having too many features within the app.

User testing, Where is that?

That is coming in tomorrows blog post. I have created a questionnaire which I will take people through.

Q.1 Can you get to the navigation menu?
Q.2 Are you able to use the play, stop, next and previous buttons easily?
Q.3 Is the Colour Scheme consistent and used wisely throughout the app?
Q.4 Are you able to get to about, so you can read about the app and fill the feedback form in?
Q.5 What would you change?

I will test this on 5 users tomorrow, before I hand this in for submission.

Features, I don't know them.

I had problems with styling within my own music app because I'm using jQuery mobile and its very reluctant to let you style your own work, which makes me sad.

 This is what I have used, ideally If i was using just a html page and jQuery this would have been easier to style.

But everything within this works, when you import mp3, be sure to import .ogg as well. As some browsers don't use .mp3 files.

It's hard to show in this blog but everything is working as intended.

The styling needs improving by a lot but as it stands it isn't awful to look at.

I've included a search bar as you can see, but because I'm not using any backend code It doesn't do a lot, the search is full with the current music which is on the app. So if you search for cold it will pop up with coldplay underneath the idea is to make that come from using AJAX suggestions, like google does. You then press the link and it will play the song

I tried linking it but couldn't mange too, but with more time and research I will be able to do this.













 In the about page I have filled out what the company does, I then have spoken about the future of Muwa and where I would like to take it.

I've used jQuery forms to include a form into this app, I attempted to use a mailto on the submit button to try and make it send the results to my personal email. However I will need to use backend scripting to get this to work, as mailto just pops into your e-mail program and won't send me the actual results.

Accio Music Player

The tutorial that I have previously mentioned has come in very handy, basically I followed it step by step pausing as and when and created the most basic music player ever! However it worked which is something!

So how did it work?

So it is done by using an array, we start off by declaring the number the array starts at, which in jQuery is 0 because 0 = 1, confusing but it goes up in increments of 1 so not too bad.

We also had to declare a variable which we did at the top of the code.
We then told the varible to look through the page by using GetElementByClass, which is similar to ID, but instead of ID's we used classes, ID's could have been used also.

The tutorial first started with a play button, which is simple enough.

Originally the tutorial has used divs but because of the way I have styled I've changed to <li> List items set within a <ul> Unordered List.

We can see here that I have set them all using the classes that I want to use.


At the top of the page I have the jQuery to go with this.

Within this snippet lies the play and stop class.

Top of the page

Using jQuery we have made this on-click functions which basically mean, when you click on something it will do something. Now we have created that inside of it we are able to program it. What I have asked the play to do is look at the array. Its worth noting at the top of the page I've loaded the array into the variable. So now that when you click play it looks at the array and see's what is number 0 and plays that song.

This is the first song in the array, the way jQuery defines this is by going through the DOM and looking for the first object with the class 'playsong'.. Like we told it to earlier. And because this is the first object it can find it will play this first, it knows to play this as a song because of the <audio tag>

It does the same with stop also.

This snippet of code is different.

We will start with next. So it's talking to the next class we can see this at the top and we have set it as a on-click function.
Inside the function we have said for the function for each audio tag with a class of playsong. When clicked pause the song.
We then come out the function but stay inside the other function we tell it increment in the array by using ++i. We then tell it to load the next song and then to play it.

The previous is the same as next however instead of telling it to increment we tell it to decrement by using --i.

Using this code, we have created an array which will increment and decrement as told.

In the next part it will tell you how to change the song name, song artist and artwork.

So in this we have called the function callMeta, because we calling Meta Data, we have 3 variables in this function. They all do the same just to different parts.

Starting off with trackTitle, we have declared the variable here and we then link it through to our array, but then by using .attr we tell it to look into the array for the attribute 'data-songtitle' once we have done this. We need to write this class down in our list.

So we written the class in our list then by using .html it will override everything thats in that tag and change it to trackTitle which we have declared above it.

The same principle applies to the next tag, in the img one because we are using images some things change and we have to say looking for the images in album.art then we use attr('src', albumArt) So basically the image in album art.

We then need to callMeta in our play, pause, next and previous variables so that they know to change.

Once you have done this you will have a working music player.

It will look so basic but it will be present.

Code, code and more code!

I've used a previous template that I used for a previous jQuery Mobile project, just so that I don't have to waste time writing code that I already have.

I've start off buying just building a simple nav panel with nothing more that a Music Player and About in. I plan to keep this through out my application.

Before I went further because I knew that I was going to create another page, I copied what I had and pasted it below. And shock it didn't work... but only because I had forgot to close off a div, once I had fixed that it worked fine.

I'm not the best at keeping my code tidy, so I am making an effort at trying to with this.


We can see here that all i've done is make a navigation panel which will pop out and have a little grid as it's icon. This is exactly what I want and don't plan to change this at the moment, I've also named the home page "home" in the id so when I refer to it in the controlgroup it know's where to look and will navigate to it.

I have done the same here, except I've just called the page About rather than Home.




This is all working fine now, I need to go to Themeroller for jQuery mobile and select my theme. I want a Blue head, and orange with everything else. I have also created a logo for my fictious company.

All I did was combine the word Music and Web Application to achieve this. I then created the tagline Soundtrack Your Day.

 This is how it is looking so far, I am happy with how it looks and will keep this theme throughout the whole application.

Themeroller is very simple to use all it requires is for you to drag and drop colours into places you want, you then download it, give it a name and import the CSS into your html page.

Inserting the img into the header was simple, it's the same as inserting an img in any webpage. I did make this responsive first by adding;
{
     Width: 100%;
     height: auto;
}

However, it scaled incredibly badly so I just kept it as it was.

Music Player Building

After doing some research into Music players, I need to start creating my own.

I trawled through the web trying to look for information to help me. I found some decent enough things that other people have put out there, however nothing that I really want to use. Also because they have written the code, and a lot of them are just variations of jPlayer, which is nice but I don't want to use jPlayer. I wanted to create something of my own.

I used this link http://www.jquery4u.com/media/10-jquery-html5-audio-players/ which has plenty of examples on, but I wouldn't be learning if I was to just copy from them and paste it into my own application.

I carried on searching and remembered Youtube is quite a good place to get tutorials on how to create things within any sort of language!

I watched this 2 part tutorial, on how to create a fully customisable one.

This tutorial was very helpful and really renewed my knowledge of JavaScript and jQuery. It also reminded me that I aught to start using the languages a lot more than I already do.

The tutorial doesn't cover everything for example it doesn't cover a previous button but will cover a next button. It also doesn't show you how to customise what you have built.


Now I understand that I have to create a web application using jQuery Mobile, but what I've tried is to put it within a jQuery Mobile template and see if it works!

A Bigger Better Text Editor

Okay so this isn't related to the application at all, but I have found a new text editor which is better than text wrangler.

It's called sublime and is actually available for Mac! I've struggled finding a decent alternative to Notepad++ since going Mac, but this one I am really enjoying!

Music Player Research

After spending some time thinking about how I want the app to look, I've looked into other music players.

Spotify now have a web player, although this isn't quite an application it still plays music online.

Since the update the web app has nice feel to it, it is also easy to use and navigate around.

My knowledge and timescale wouldn't allow me to create anything like this however, I do like the look of Spotify.

I am unsure which language this web application was written in, however it does intrigue me to learn.

Pandora, an American company have a music player also, different to Spotify and not available in the UK due to licensing laws.

Pandora is built using CSS and JavaScript, it uses smart technology and will build playlists based on what you are listening too.

For Example if you wanted to listen to something by Paramore, which are a sort of pop rock band, it would then compile a whole playlist of songs like them.




Last FM is something I am less familiar with, I guess it is just another music website, which allows you to search for music, I think what sets Last FM apart is it also allows for videos unlike the other two, much like youtube, except just for music.

I'm not entirely sure what is used to build Last.fm, upfront you can see it obviously uses HTML, HTML5, CSS and CSS3, but there is a lot behind this website.

I am biased towards this website as I haven't used it and would much prefer to use the others. Although it does look like it does a similar job to Pandora.




All of these websites will have a huge backend database full of information.

I don't need to create a huge backend database, nor do I have any inclination to make one. As It would take too much of my time, and I haven't got enough to learn or find enough songs to fill it with.

New Idea

I've taken a week to think of a whole new idea for my app, knowing now that it won't be available on Mobile we are required to make a web application.

I've decided to do a music player, however I don't want to use HTML5 and use the default browser audio tags I want to create my own bespoke music player, which I can upload music into and can be accessed on the web and on a mobile phone.

PhoneGap

Unfortunately due to University restriction, PhoneGap is no longer an option at the moment for compiling this onto a phone.

The reason for this is because PhoneGap uses the command line to allow for a project to be made and rolled out. But because of restrictions, students studying in the School Of Digital Media aren't able to access the command line to do this.

Camera API

Looking at some API's for Camera's I am going to use the one from Phonegap.

It looks simple enough to implement, and does everything that I require the API to do. Also because it runs through PhoneGap, Im not worried when the time comes to implement it onto mobile devices.

Image Recognition API

Skipping ahead of planned research, I went a had a look at Image Recognition API's, mainly ones which use colour extraction.

I found one a company called Imagga, I looked at there website to find some information about there product.

From this I saw that you had to pay to use there product, but I contacted them and asked to use it for free, so long as i kept it local and they agreed they was also interested in the product which is exciting!

So now I have access to my a image recognition API which wall draw colours from images and recognize which colour is prominent!

This is amazing for me and makes me very excited about the rest of the project.

Initial Idea

Initial idea
I want to make an application which will recognize the primary colour in a image, and play a song based on which colour is the most within the image.

To be successful at this application, I'm going to need to find the correct API's and implement them. for the image capture to work, I will need a camera API, once I have done this I am going to need to find a Image Recognition API, which will analyse the colour within the image.

With the data that the API collects and analyses, an appropriate song will play along to this image, creating a mood.

Every colour will play something different

For example, if the colour has a lot of red pixels in a angry song will play, and if the image has a lot of blue pixels in something sad will play.

Planned Research

There are many things I need to research, but first off I need to get a design, I will need to look at whats out there, and closely follow what they look like to create my own design, which suits my application.

I will then need to start researching how to implement API's into the application, once this is done, I must start on the Camera API, so I can get a working camera within the app. After this will follow image recognition, trying to find a suitable API which will make my app work in the way that I want it to.

I may have to touch up on how to implement a database of music into the application, so that it will play, when the song comes on.

Building the application

So I've established what I need to make this application, but how I build it will be very important to it's success.

I'm gonna draw some sketches out on how I want it to look, I will then head into Photoshop and create a static prototype so that I have guidelines for myself.

Once this is done, I will need to create the framework for this app, following my guidelines from Photoshop I will be able to recognize what needs to be placed where in order to achieve the design.

Once the design is loaded and ready, I can start working on the API implementation, I will start with the camera API as this comes before the image recognition API, once the camera is in place and working I will be able to put the image recognition in place, I'm anticipating that this will take a while.

Once they are in place, it will need to ensure that music will play when the image recognition has finished recognizing the image, this will looking into uploading songs into the image recognition API and telling it to work when there is so much of a certain colour.

I will then load the app onto my device, from here I can test it myself, to ensure that everything is working. 

Then it's time to start usability testing to make sure that everything suits users needs, I will try and get 5 people to test the application before submission.

Assignment

An organisation of your choice, which can be fictitious in nature, wishes to expand their digital presence with a cross platform web/mobile/table app promoting heir products and services. You have been asked to provide a functional mock-up of the app, with detailed development blog.

The 'features' of your app must be determined by you and will be based on the perceived needs of your chosen organisation. There are no limitations on the types of functionality you may choose to include, though you are advised not to conceive a larger, multi-purpose app and to instead concentrate on delivering a more focused, polished application with fewer, more developed concepts. In particular you should pay attention to the user experience (UX), including the interface design and 'workflow narratives'.

By 'functional mock-up' BSc students should have some form of back-end connectivity in place to extend your apps functionality, however BA students your app does not need to have full back-end connectivity in place and may use dummy data loaded in an suitable way(if your app requires it). The front end(meaning user interface and an client-side processing) should be fully operational for all students. Your app should be developed in HTML, CSS and JavaScript ( and for BSc appropriate server-side scripting e.g. PHP, RSS feeds from web, AJAX etc.) then compiled using PhoneGap or other suitable alternative to support either iOS Or Android Or Windows Phone Or the World Wide Web platform as a minimum, with additional platform support worth extra credit. You may use any frameworks, extensions and APIs you deem necessary.

As a minimum, your submission needs to include the installation files necessary to install your app on a relevant device. You may need to ensure you include any relevant security certificates to permit installation, as well as consider other security implications arising from your app and/or platform development guidelines. In some cases you may need to provide a live demonstration to the assessors - this will be organised as required.

The development blog should contain detailed entries covering the entire project duration. This includes initial concepts, idea refinement, analysis of contemporary third-party applications, research, implementation, usability studies, appraisals and so on. Blogs must be hosted at www.blogger.com as a unique blog containing only work for this assignment. The URL should be submitted in place of a physical report. Ensure the blog's visibility is no set to private. You must include an archive of your blog, either as screen grabs or a PDF.