need some jquery assistance.

[UnknownUser]

hey guys,
i'm building a html5 audio player just for the fun off it,
but having problem with one thing at the moment,

i have a jquery slider that i use as a seekbar for my audio player
but having problems connecting it to the sound seek state.


Old range/input code

Code: Select all

	 	audio.addEventListener('durationchange', setupSeekbar);
		audio.addEventListener('timeupdate', updateUI);
        seekbar.value = 0;
        var audio = document.getElementById("audio");

        var seekbar = document.getElementById('seekbar');
        function setupSeekbar() {
          seekbar.min = audio.startTime;
          seekbar.max = audio.startTime + audio.duration;
        }
        audio.ondurationchange = setupSeekbar;

        function seekAudio() {
          audio.currentTime = seekbar.value;
        }

        function updateUI() {
          var lastBuffered = audio.buffered.end(audio.buffered.length-1);
          seekbar.min = audio.startTime;
          seekbar.max = lastBuffered;
          seekbar.value = audio.currentTime;
		  
        }
        seekbar.onchange = seekAudio;
        audio.ontimeupdate = updateUI;

New code i'm working with that is jquery but stuck on it so here is where i need
help if i could get any assistance i would greatly appreciated it

Code: Select all

    $('#seekbar').slider({
      value: 0,
      step: 0.01,
      orientation: "vertically",
      range: "min",
      max: audio.duration,
      animate: true,          
      slide: function() {             
        manualSeek = true;
      },
      stop:function(e,ui) {
        manualSeek = false;         
        audio.currentTime = ui.value;
      }
    });

thanks!

[Xaleph]

It`s quite difficult for us to see whats going wrong here. Maybe some scalar values and some weird offset? ui.value may not scale well to the audio file?

[UnknownUser]

the thing that is wrong is that basically the slider wont link up with the audio file in the meaning it is not yet in a seekbar mode!
i need help to figure out how to link the jquery slider to work with the audio file if that explains it better.

TY!

[Chris]

what's in ui.value?

Code: Select all

     stop:function(e,ui) {
        manualSeek = false;         
        audio.currentTime = ui.value;

        console.log(ui.value);
      }

[UnknownUser]

i messed around changed around and came up with this,
but still ain't working, ps e,ui has been striped from the code..
Chris.

Code: Select all

 $("#seekbar").slider({
    value : 'seekbar.value',
    step  : 1,
    range : 'min',
    min   : 'seekbar.min',
    max   : 'seekbar.max',
    slide : function(){
		var audio = document.getElementById("audio");
		var seekbar = document.getElementById('seekbar');
        var s = $("#seekbar").slider("seekbar");
		seekbar.value = 0;
		audio.addEventListener('durationchange', setupSeekbar);
		audio.addEventListener('timeupdate', updateUI);
		
		
    }
	  function setupSeekbar() {
          seekbar.min = audio.startTime;
          seekbar.max = audio.startTime + audio.duration;
        }
		audio.ondurationchange = setupSeekbar;
		
		  function seekAudio() {
          audio.currentTime = seekbar.value;
        }
		
		    function updateUI() {
          var lastBuffered = audio.buffered.end(audio.buffered.length-1);
          seekbar.min = audio.startTime;
          seekbar.max = lastBuffered;
          seekbar.value = audio.currentTime;
		  
        }
		 seekbar.onchange = seekAudio;
		 audio.ontimeupdate = updateUI;
});

[UnknownUser]

solved the problem!

[Foofighter]

solved the problem!

Would be nice to know what the problem was

regards

[Jackolantern]

Yeah, if you could post the solution, that would be awesome! Like a lot of other people, I am not that familiar with the HTML5 audio controls or how jQuery can be used with them as of yet. I think that is also why help was kind of slow on this issue. But having an answer and some working code will no doubt help others down the line!

[UnknownUser]

will make a tutorial on the subjects when i'm done with a full audio player,
so you will learn the steps then, Hope that is ok.

[Jackolantern]

Sounds great!