Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Progress bar for music duration - how to?

edited April 2014 in General Posts: 32

Hi there,
I wonder if anyone can point me in the right direction and thought this might be useful to others too. I am loading different music tracks in different screens and each track has a different duration but I would like to display the progress of each track within a predefined area as a rect or line - for example with a maxWidth.x value of 500.
I searched for a way to translate music.currentTime as a percentage of the maxWidth.x by looking at an old processing sketch I thought I could adapt. After trying a few things but I just can't seem to get the typical behaviour everyone sees in media players..I am probably blinded by the simplicity of it haha...
Any help greatly appreciated - J

Comments

  • dave1707dave1707 Mod
    Posts: 8,675

    @jasi Maybe this will give you an idea. Select a time and tap the screen.


    function setup() parameter.integer("time",10,60,30) h=0 st=false end function draw() background(40,40,50) fill(255) text("select time then tap screen to start",WIDTH/2,HEIGHT-100) noFill() stroke(255) strokeWidth(2) rect(100,100,100,600) fill(255) rect(100,100,100,h) d=600/time t1=os.date("*t") sec=t1.sec if t2~=sec and st then t2=sec h=h+d if h>=600 then st=false end end end function touched(t) if t.state==BEGAN then t1=os.date("*t") t2=t1.sec st=true end end
  • Posts: 2,043

    I think this is what you are looking for:

    function setup()
        music("Game Music One:Happy Song")
    
        size = vec2(500, 100)
    
        x, y = WIDTH / 2, HEIGHT / 2
    end
    
    function draw()
        background(0)
    
        strokeWidth(5)
        stroke(255) fill(0,0)
    
        rect(x - size.x / 2, y - size.y / 2, size.x, size.y)
    
        fill(255)
    
        local p = music.currentTime / music.duration
        rect(x - size.x / 2, y - size.y / 2 + strokeWidth()/2, size.x * p, size.y - strokeWidth())
    end
    
  • dave1707dave1707 Mod
    Posts: 8,675

    Here's a class version that will allow you to have the bar go horizontal or vertical. If the width is greater than the height, then it goes horizontal. If the height is greater that the width, then it goes vertical. I have both bars showing, but you can only have one music theme playing at one time. You can also change the background and foreground colors of the bar.


    function setup() -- x,y,w,h,bg,fg,music m1=musicBar(100,200,40,400,color(0,188,255), color(255,0,0),"A Hero's Quest:Battle") m2=musicBar(50,100,400,40,color(27, 255, 0, 255), color(246, 0, 255, 255),"A Hero's Quest:Battle") end function draw() background(40, 40, 50) m1:draw() m2:draw() end musicBar=class() function musicBar:init(x,y,w,h,bg,fg,m) self.x=x -- x position self.y=y -- y position self.w=w -- width self.h=h -- height self.bg=bg -- background color self.fg=fg -- foreground color self.m=music(m) -- music self.dur=music.duration -- duration self.time=0 end function musicBar:draw() fill(self.bg) stroke(255) strokeWidth(2) rect(self.x,self.y,self.w,self.h) fill(self.fg) self.time=music.currentTime/self.dur if self.w>self.h then rect(self.x,self.y,self.w*self.time,self.h) else rect(self.x,self.y,self.w,self.h*self.time) end end
  • edited April 2014 Posts: 32

    Thanks for your help folks! The different examples are really useful to me but once I saw one line of code from @JakAttak I understood what I missed! Here is the working test I adapted - I also coded a currentTouch.x & .y for panning and volume but took them out as I need to be able to refine it - kinda fun though! Now I am a bit stuck converting decimal seconds to minutes and seconds to be able to display time but I will figure it out.. We all start somewhere eh?

    function setup()
        music("A Hero's Quest:Hero's Loss",true)
        music.currentTime = music.duration -10
        mx = 50
        my = 50   
    end
    
    function draw()
        background(51, 55, 82, 255)
        fill(10, 195, 219, 113)
    
        local m = music.currentTime / music.duration
        dut = math.floor(music.currentTime)
        dur = math.floor(music.duration)
    
        fontSize(18)
        text(dur,WIDTH/2-mx*3,HEIGHT/2)
        text(dut,WIDTH/2+mx*3,HEIGHT/2)
    
        ellipse(WIDTH/2,HEIGHT/2,mx*5)
        ellipse(WIDTH/2,HEIGHT/2,mx*m*5)
    
        rect(WIDTH/2-mx/2*5,my*3,mx*5,my)
        rect(WIDTH/2-mx/2*5,my*3,mx*5*m,my)
    end
    
  • edited April 2014 Posts: 2,043

    @jasl, I adapted your code to show the duration and current time in the minutes:seconds format.

    function setup()
        music("Game Music One:Happy Song",true)
        music.currentTime = music.duration -10
        mx = 50
        my = 50   
    end
    
    function draw()
        background(51, 55, 82, 255)
        fill(10, 195, 219, 113)
    
        local m = music.currentTime / music.duration
        local dut = math.floor(music.currentTime / 60) .. ":" .. string.format("%02d", math.floor(music.currentTime % 60))
        local dur = math.floor(music.duration / 60) .. ":" .. string.format("%02d", math.floor(music.duration % 60))
    
        fontSize(18)
        text(dur,WIDTH/2-mx*3,HEIGHT/2)
        text(dut,WIDTH/2+mx*3,HEIGHT/2)
    
        ellipse(WIDTH/2,HEIGHT/2,mx*5)
        ellipse(WIDTH/2,HEIGHT/2,mx*m*5)
    
        rect(WIDTH/2-mx/2*5,my*3,mx*5,my)
        rect(WIDTH/2-mx/2*5,my*3,mx*5*m,my)
    end
    

    EDIT: I found a much better way to do the formatting, so I updated the code accordingly

  • Posts: 32

    @JakAttak, thanks so much! I didn't know how to format the time as you have because I just don't know the code well enough (I've not needed to use string.format before). Could you maybe explain what the .. do beginning here? >

    ..":".. string.format("%02d", math.floor(music.currentTime % 60))
    
  • Jmv38Jmv38 Mod
    Posts: 3,297

    '..' is for string concatenation.

  • Posts: 32

    @Jmv38 - thanks yes..! Been playing around with it so all very clear now.

  • Posts: 2,043

    @jasl, glad you figured it out. It's a very useful feature.

Sign In or Register to comment.