Musician's Website

Musician's Website

Cancelled

Job Description

The current purpose of the website is simple: host an album we've recorded.

Functionality:

We want visitors to stream Mp3s while viewing the album art, and be able to enter an email address to receive a link for downloading the album while being presented the option to donate via paypal. We have a very simple, albeit specific design in mind.

Overview:

The image is a piece of art from which we’ve selected 14 specific regions, one for each song and one for the cover art, which should be presented according to the song being played.

When you load the site, an image fills the screen. Let’s call this image the “full image”. The scale is set by the maximum dimension of the user’s window, and the image fills the entire window (image cropped equally on both sides to fit the window, aspect ratio preserved), without scroll bars, which should never appear.

There is a subregion of this image, which should respond if the user mouses over it. Let’s call this subregion the “album art”.

If the user mouses over the “album art”, when music is not playing, then a translucent image at the location of the “album art” fades in. We can provide this image and it consists of 3 pieces:
1. A square outlining the region of the “album art”
2. A triangle denoting a Play Button, on the inside and left side of the “album art” region
3. A downwards arrow denoting a Download Button, on the inside and right side of this region

If there is no further user interaction, then the image should fade away after 5 seconds.

Play Button
If the user hits the play button, then the following should happen immediately
1. The music player should appear at the bottom of the screen, and begin playing the first song (See: Player)
2. The view of the “full image” should begin changing (See: View motion)

Download Button
If the user hits the download button, then the following should happen immediately
1. Everything on screen should reduce in brightness
2. A frame should appear that guides the user through the process of receiving an email with a link to download the album (See: Download frame)

________________________________________________________________

Player:
A standard player that pops up from the bottom of the screen and disappears whenever it can; we have the details in a longer form of this document for completeness. See http://pitchfork.com/advance/114-obsidian/ for a good example.

View motion:
The view of the “full image” should move around according to what song is playing.

The details of how we think this should be done are in a longer document.

Download frame:

A frame (I don’t know if window is the right word for this, but definitely should not be a separate pop-up window) that appears whenever the user has hit the download button. This frame guides the user through

The following text is displayed at the top of the frame:
“Email for download link:”
Followed by an empty white box where the user can type in their email address
Below this there are 4 items. Left to right:
1. A checkbox with the following text “Bug me for shows and stuff”, which is by default unchecked
2. A radio button that says “Free!”
-If the user hits this button, then everything in the frame is replaced by the following text
“thank you! if you don’t get it congratulatinos@gmail.com”

and a radio button which says “Bye”, which closes the frame and returns the site to its initial state.

The user should receive an email with a link to download the album and if they opted in using the checkbox, then their email should be saved. (set up an email script??) where does this go?

3. A radio button that says “Pay!”:
-If the user hits this button, then everything in the frame is replaced by the following text
“THANK YOU*3! if you don’t get it congratulatinos@gmail.com”
A paypal “donate” button, and a radio button that says “Bye”

The user should receive an email with a link to download the album, and if they have opted in using the checkbox, then their email should be saved.

-Easter egg: if the a user has hit the ‘Pay!’ button 2 times in a single visit then the frame switches to displaying the following text

“FUCK YEAH BONUS TRACKS! check your email you generous (or tricksy) animal”

4. A radio button that says “...psych”
-If the user hits this button, then the site returns to its initial state.
________________________________________________________________

Hosting:
The domain is already hosted on an Amazon EC2 server with a beta site up. From our research, it seems as though EC2 is a good method for hosting and we have the mp3s there as well.

We’re imagining that the main job would be to code the html files/other scripts that we’d need then upload to the root directory of our server along with the jpeg and the mp3s. I suppose these are details that will come up later on. We are new to web development so if there is a more efficient way to implement these ideas then we are open to hearing about it.

Hit us up if you’re interested! thanks.