HTML5 Website Header & MP3 Player

  • Status Completed
  • Budget $250 - $750 AUD
  • Total Bids 19

Project Description

Header 1.0



This project is to implement a new header on [url removed, login to view], make any minor changes then implement the header on [url removed, login to view] and remove the existing player at the bottom of the site.

The header should be html5 and includes a music player. The music player should display properly on mobile devices including iphones and ipads. So all features are available on mobile devices.

All PSD files will be provided.

Basic Links

The Logo, My Pulse, Music, Words, Events, Search, the Cart, Join and Login link to the same existing pages already online. The links are mostly grey and should be white on hover. On click these should have the black background (show in the Player Link below).

Clicking on More will open smoothly the same as clicking More on this site [url removed, login to view]

It’s important the javascript animation is the same as on [url removed, login to view] because it’s very user friendly.

A close link and clicking on More again will close the header.

On [url removed, login to view] when the sub-menu appears, the body content moves down. If possible we would like to keep this feature when the menus are expanded.

Music Player – No Music Playing

The default play button should be grey because no music has been added to the player. Clicking on this should redirect the user to [url removed, login to view] so they can select an mp3.

Music Player – Clicking Play

When a user clicks play on an mp3 anywhere in the site, the music should be added to the player but the player should stay minimized. Additional plays for other mp3 should keep the player minimized.

Music Player – Clicking on ‘Player’

Clicking on Player should expand the player with the same motion as on [url removed, login to view]

The same functions as on the existing player should be the same

Music Player – Controls

The volume controller should be very smooth. Very similar to [url removed, login to view] where the hand appears and the volume controller moves smoothly. Share, Like and Download should work as they do now, and the download link should work properly when mp3 are available for download.

Music Player – Wav Images

The existing wav images will have to be deleted and new images generated. The only change is the colours should be different. Again, there will be a default image and unique wav images displayed when these have been generated.

Music Player – Multiple Mp3 Queued

When an mp3 is playing and another is queued, a second row of music should appear.

This further expansion should be automatic when the player is open – again very smooth like [url removed, login to view]

Or if the player is minimized then these will display when clicking on ‘Player’.

Music Player – Keep Existing Functions

The existing player allows music to be dragged and dropped and this should be the same

The existing player has a play button on mp3 image hover this should be the same

The current playing mp3 should appear brighter as it does with the existing player

Music Player – New Play Function

Dragging the music on top of the existing mp3 that is playing, should replace the current mp3 with the new mp3 and the new mp3 should start playing. The queue should adjust so the queue adjusts to close the space where the music was removed. Again it would be really good if the queue adjusting was smooth and animated to create a nice visual effect.

Music Player – Queue Scroller

This is not shown in the desings, but in the case of many mp3 queued, then the music will be larger than the header width. A grey scroller should appear below the music queue. The style should be the same as the volume slider but in grey. This should display when the queue is large and hide when the queue is small.

Very Top Links

These are straight forward links to pages that are being created now. URLS will be provided.

Get free quotes for a project like this
Completed by:
Skills Required

Looking to make some money?

  • Set your budget and the timeframe
  • Outline your proposal
  • Get paid for your work

Hire Freelancers who also bid on this project

    • Forbes
    • The New York Times
    • Time
    • Wall Street Journal
    • Times Online