Sync timeline progression slider with Audio seeking.

[bromel]

Hello Everyone

Its been a while and my javascript knowledge (somewhat very little) has completely left my mind, so please excuse me if this seems like a straight forward answer.

In my codepen I am trying to control the audio seeking feature of the mp3 with the Jquery slider.

 

I assumed it was something like 

 aud.seeking = ( ui.value / 100);

 

but this is not the case, any pointers in the right direction would be most appreciated, tnxs

See the Pen GyBZRv?editors=1011 by w9914420 (@w9914420) on CodePen

[Sahil]

It was pretty trivial to figure out what is updating what. Actually you need to seek the audio so it will resume from exact time where slider is. So on click event I am setting current time to tl.progress() * audio duration.

 

Also, check this thread as it states some browsers don't return duration so you have to listen to event when metadata is available. Maybe using a audio library will be more useful.

 

https://stackoverflow.com/questions/11203773/how-can-i-get-the-html5-audios-duration-time

 

See the Pen QaVwbG?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[bromel]

@Sahil Many tnxs for your solution. it is exactly what i was looking for

[bromel]

@Sahil My very last question, I have managed to create a test setup, for an animation that I want to do over an audio sample. I have been playing around with two different methods of updating the current time on the file "timeupdate" and "setInterval" methods. They both do the job but I wonder which one performance wise would be best  (as in effect on overall animation playback) to develop with, or would you adopt another way. Any feedback welcome

 

tnxs

 

bromel

 

See the Pen BJqBKZ by w9914420 (@w9914420) on CodePen

[Sahil]

setInterval seems unnecessary because you can listen to event directly. Even that is unnecessary because on play you are listening to tick event and updating everything. GSAP uses requestAnimationFrame so it reduces update calls to 60 per second, that will be best way to go. Also the jQuery UI slider doesn't work on touch screen plus you are not using jQuery, so I think it will be better to go with draggable. In following fork, I have removed many unnecessary calls. If you can't picture what is updating what then writing down will be helpful. But don't worry about it too much even I write unnecessary code many times, just eliminating it simplifies your code. Lastly, for any reason if you feel like you need to use setInterval/setTimeout, I will suggest to go with TweenMax.delayedCall.

 

See the Pen dJgzpg?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[bromel]

@Sahil Fantastic!, many many tnxs 

[bromel]

@Sahil I took onboard what you said in regards to incorporating draggable and replacing jquery UI, I am just trying to work out a couple of issues and finding the best way to do it.

1. In my current example you will see that have have attached the timeline to the draggable knob, however you can see that it falls quite short in expanding fully within the container i am not sure how to do this, so any examples would be most useful.

2. I also want to bind the knob on the draggable to the playing of the timeline (similar to how jquery UI works) again any examples will be helpful

 

See the Pen PExZoV?editors=1111 by w9914420 (@w9914420) on CodePen

 

I appreciate, your help on this, my JavaScript memory is very very very slowly coming back to me  

 

many tnxs

 

bromel

[Sahil]

Most of it was straight forward, just had to create draggable slider and do same thing with it as jQuery slider.

 

See the Pen aEXQdX?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[bromel]

@Sahil  Let me first start by saying a big big thank you for your help on this, I intended to only understand how to get one task completed. In the end I ended up creating something rather special  It is by far from perfect and I still have a long way to go, but because of your time, I was able to gain slowly some of my lost skills and figure out a way. I think the last thing for me now, is to get the range and knobs appearing in sync with one another, I was battling this one (my maths is terrible) but I think it's a case of understanding how to deduct the knob value from the container and apply a magic number to it

 

 

See the Pen JMxzRq by w9914420 (@w9914420) on CodePen

 

 

Again any help is always appreciated, tnxs for it all

 

Bromel

[Sahil]

@bromel Start with simple question, I am calculating knob so do I still need to calculate range? Or can I use knob's position to update range? Simple right?

 

Good job on getting so far, it looks good.

 

See the Pen Eoqgdr?editors=0010 by Sahil89 (@Sahil89) on CodePen

 

[bromel]

@Sahil Sorry for rambling on, so the way you have done it in the codepen above is what I am looking for, which I guess is calculating the knob against the range. So I can apply the same method for my volume control also.

 

many tnxs

 

bromel

[Sahil]

Quote

@Sahil Sorry for rambling on,

 

No, I mean when solving the problems, start with simple questions to decide how to approach your  problem. It will help you build your logic a lot easier.