Music progress bar?

  • Hi,

    How would I go about making a working audio progress bar? It would need to work the same way as in any random music player, i.e. correspond to the current music position and be clickable/draggable to change the position?

    I'm not sure if this is at all possible, could you point me in the right direction?

  • Everything you asked is possible but care this are advanced functions so it will be not so easy. Manual This should help you enough ;)

  • Quoted from manual:

    Seek to

    Seek a currently playing sound to a different location in the audio file. The time to seek to is given in seconds.

    PlaybackTime(Tag)

    Get the current playback time in seconds of a sound with a tag. This starts at 0 and counts up to the duration, except for looping sounds which keep counting up past the duration.

    These should be the ones your looking for spacificly

  • it's actually quite simple. You just need two objects, a background bar, with a static width, and a progress bar, displayed on top of it, which width varies between 0 and the background bar width.

    You just need to update the progress bar width on every tick, by a simple ratio calculation. the background width represents the total sample duration, so you just need to set the progress bar width like this:

    backgroundBar.Width*Audio.PlaybackTime(tag)/Duration(tag)

    where tag corespond to the one you gave to the sample you're playing.

    Then for a seek function when you click the progress/background bar, it's the reverse ratio, you must convert an X position on your background to a position in the sample duration.

    Audio Seek to (Mouse.X - progressBar.BBoxLeft)*Duration(tag)/progressBar.Width

    Then, making it draggable should not be too hard, just add another sprite for the knob, update its position at the same time you update the progress width, with the same value. Give it a drag and drop behavior, constrained to the horizontal axis only. This makes it draggable. When you release the drag, just use the same expression as above for seeking, except replace Mouse.X with knob.X

  • Thanks! The Seek To seems to be exacly the kind of thing I needed. As soon as R44 is fixed I'll try it out ;)

  • Try Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Try Now Construct 3 users don't see these ads
  • Thanks. U helped me a lot as well. Noticed little mistake in string, so wanna post to help other ppl:

    Audio Seek to (Mouse.X - progressBar.BBoxLeft)*Duration(tag)/progressBar.Width

    Right is put BackgroundBar instead of Progess:

    Audio Seek to (Mouse.X - BackgroundBar.BBoxLeft)*Duration(tag)/BackgroundBar.Width

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)