ADED.US Music App (beta)

This is a beta test page which is a work-in-progess. I am trying to build a BETTER music playing app. The main purpose of this is to make the way people use music apps with their hands much more comfortable. It also provides a way to show more information about each track within the player itself, as opposed to having to go to different pages to acquire such information.

Some key things to notice:

  • Everything you see here is nothing more than a well formatted table. The code to this player (once finished) could be adjusted to match the clients needs when building them a music app to showcase their single, EP, or album. The code could be copy-n-pasted to just about ANY webpage or blog.
  • The BIG play button on the left. I purposely made it 100px in size so that the average person's thumb could hit it perfectly.
  • The 'tracklist' itself is on the right column. In this example, it has a a 'colspan' of 4, representing 4 lines within that cell. Now, obviously, this could be adjusted for as many lines as needed. For example, in the current cell, it represents that every track is by the same artist... but if we had a track that had a featured (guest) artist, we could make the colspan '5' and add that line. In an example where it's a compilation AND there is a featured artist, the collapse would be '6'... where the PRIMARY artist is represented on line 2... and the featured (guest) artist is on line 3. The higher the colspan number, the more lines of data we can add.
  • The table itself has a width of 75%. I decided to use this number because it gives the perfect amount of right thumb space so that you can scroll up and down the page without actually touching the table itself. If someone wants to view the long track title, they can scroll from right to left to reveal the extra text without the table itself moving or changing in size.


◀︎ Swipe left for full table
Track Level Info
▶︎01 (track number always goes here on line 1)
Track Title 1 would go here. But, if it's a really long track title, then the person can simply move their thumb (on the table itself) from right to left to reveal the extra words in the track title
00:00 (track time goes here)
QMS2Mxxxxx (ISRC code goes here if needed)
▶︎02
Primary Artist Name goes here
Secondary artist name (like feat. or with) goes here
Track Title goes here
If it's a remix, put that here
00:00
QMS2Mxxxxx
▶︎03track 4 below is a real working example, when you click the play button, it will go to that youtube video
▶︎04
Voice
02:47
QMS2M1500261
▶︎05vdvndjkvndjkfnvjdfQMS2Mxxxxx
▶︎06vdfjvkdjnvjdknvkjd00:00QMS2Mxxxxx
▶︎07vdnvkndjkvdnfjkv00:00QMS2Mxxxxx