0

I'm trying to create a custom music player UI for a site. It's not playing any real audio files so I won't be using HTML's Audio features.

It's actually just going to be playing some youtube video in the background, but I'd like to create my own music player interface for it.

I'd like to know how to create a custom trackbar, that will know where a user clicks on.

For example, if I have a div that's 20px high, and 500px wide to represent the trackbar, and the user clicks on a certain part of it, how can I get that value relative to the div?

Youtube comes with an API that allows you to skip to a certain part of the song, but I'd first have to get the value (in pixels) of where the user clicked, and then run some simple math to convert it to a time.

Hopefully my question's understandable. I can provide additional details as needed.

Thanks!

Isaiah Lee
  • 647
  • 3
  • 9
  • 18
  • Have you ever tried Jplayer(Jquery Player) ? http://jplayer.org/latest/demos/ – Jot Dhaliwal Sep 08 '14 at 18:04
  • 1
    Hey Jot, thanks for the recommendation, but I'm actually not interested in an already built solution. I see my circumstance as an opportunity to learn something new, and would like to create my own from scratch. The only thing I'm unsure of is how to click on a div, and get its position – Isaiah Lee Sep 08 '14 at 18:08
  • one answer to your question about position is about to find pointer position in div ,, Just take this as my recomendation , i hope this can help, http://stackoverflow.com/questions/14651306/get-mouse-position-within-div – Jot Dhaliwal Sep 08 '14 at 18:11

1 Answers1

0

HTML5 has a progress element that you can use (link). It is pretty easy to manipulate:

var p = document.querySelector("progress");

p.addEventListener("click", function(event){
    var newVal = Math.round(event.offsetX / p.offsetWidth * 100);
    p.setAttribute('value',newVal);
});

http://jsfiddle.net/6LrzLa6v/

Malk
  • 11,855
  • 4
  • 33
  • 32