# \[SOLVED\] Minim progress bar

**URL:** <https://discourse.processing.org/t/solved-minim-progress-bar/1551>\
**Category:** Coding Questions\
**Created:** [July 6, 2018, 2:12pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551 "2018-07-06T14:12:53Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 6, 2018, 2:12pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/1 "2018-07-06T14:12:53Z")

</div>

I’m trying to make a music player using minim and I have a progress bar thats halfway down the screen, the way I intend it to work is when you click on the progress bar the song will skip to that part, I know something is wrong with my mapping but I don’t know where to fix it. Here is my code:

```auto
import ddf.minim.*;
Minim minim;
AudioPlayer player;
AudioMetaData meta;
int TimeStamp = 45;
void setup() {
  size(504, 204);
  textSize(25);
  textAlign(CORNER);
  minim = new Minim(this);
  player = minim.loadFile("Song.mp3");
  meta = player.getMetaData();
  player.loop();
}
void draw() {
  stroke(0);
  background(255, 255, 255, 255);
  fill(255); 
  strokeWeight(1);
  rect(2, 2, 500, 200, 30);
  rect(45, 45, 80, 80);
  fill(0);
  text(meta.title(), 135, 70);
  text(meta.author(), 135, 110);
  strokeWeight(20);
  stroke(204);
  line(45, 150, width - 45, 150); //where the progress bar should end
  stroke(0);
  
  //here is where it goes wrong
  TimeStamp = int( map(player.position(), 0, player.length(), 45, width - 45));
  line(45, 150, TimeStamp, 150);
}
int position;
void mouseReleased() {
  if (mouseX > 45 && mouseX < width - 45) {
    position = int( map( mouseX, 45, width - 45, 0, player.length() ) );
    player.cue( position );
    println("true");
  } else {
   println("false"); 
  }
}

```

basically the song finishes before the bar gets to the end

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 6, 2018, 3:49pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/2 "2018-07-06T15:49:18Z")

</div>

Width-90 because 90=2x45

---

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 6, 2018, 3:54pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/3 "2018-07-06T15:54:03Z")

</div>

That doesn’t work for me…

its width - 45 because thats the X position of the end of the gray bar and where I want the progress bar to end, setting it to width - 90 (in both and the first map) makes it end farther away from the end of the gray bar

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 6, 2018, 4:58pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/4 "2018-07-06T16:58:20Z")

</div>

> [@DogeMastr](#):
>
> TimeStamp = int( map(player.position(), 0, player.length(), 45, width - 45));

The last entry is width-90

---

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 6, 2018, 5:00pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/5 "2018-07-06T17:00:35Z")

</div>

yea… thats what I tryed

---

<div class="post-metadata">

**Author:** ![INSgraphizm](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/insgraphizm/32/433_2.png) [@INSgraphizm](https://discourse.processing.org/u/INSgraphizm)\
**Post date:** [July 6, 2018, 6:34pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/6 "2018-07-06T18:34:49Z")

</div>

I looked at your code and couldn’t find anything wrong, so I tested your code with an mp3 of mine, and it worked flawlessly. Maybe the problem is with Song.mp3. Have you tried a different mp3?

---

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 6, 2018, 7:21pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/7 "2018-07-06T19:21:39Z")

</div>

I just tried it with 3 other songs and its the same problem…  
although some songs did get closer to the end than others (just by eye)  
I really have no clue what could be going on with that…

Am I allowed to upload the song that I tried with so you could get the exact same results?

---

<div class="post-metadata">

**Author:** ![KAZ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kaz/32/2402_2.png) [@KAZ](https://discourse.processing.org/u/KAZ)\
**Post date:** [July 7, 2018, 4:24am UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/8 "2018-07-07T04:24:26Z")

</div>

Instead of uploading the song, post a link to download the song.

Your little program worked for me and nothing to complaint…

---

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 7, 2018, 12:02pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/9 "2018-07-07T12:02:18Z")

</div>

[https://drive.google.com/file/d/1l4X5sFzYo2H\_PxYNbbKKfr2sVKaohWbF/view?usp=sharing](https://drive.google.com/file/d/1l4X5sFzYo2H_PxYNbbKKfr2sVKaohWbF/view?usp=sharing)

thats the song I used and it stops around like 20 pixels before its supposed to

---

<div class="post-metadata">

**Author:** ![KAZ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kaz/32/2402_2.png) [@KAZ](https://discourse.processing.org/u/KAZ)\
**Post date:** [July 7, 2018, 12:43pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/10 "2018-07-07T12:43:11Z")

</div>

Yes You are very correct. There is a mismatch between song’s length and the final position, which I found using a couple of `println` statements. You’re a keen observer. But the cause of this bug I don’t know and have to do some research on my part.

But it worked for the other song I checked with. Perhaps this is an artifact of mp3 songs.

---

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 7, 2018, 1:41pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/11 "2018-07-07T13:41:43Z")

</div>

Thanks for your help!  
Its good to see that someone else can also see this, I was thinking of just reinstalling processing but now i dont think that would do anything.

Could you show me where you put the `println` statements so I can also do some research

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [July 7, 2018, 1:58pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/12 "2018-07-07T13:58:16Z")

</div>

Interesting

Maybe the song has just silence at the end

😉

---

<div class="post-metadata">

**Author:** ![KAZ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kaz/32/2402_2.png) [@KAZ](https://discourse.processing.org/u/KAZ)\
**Post date:** [July 7, 2018, 2:03pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/13 "2018-07-07T14:03:50Z")

</div>

No It’s not playing …

---

<div class="post-metadata">

**Author:** ![KAZ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kaz/32/2402_2.png) [@KAZ](https://discourse.processing.org/u/KAZ)\
**Post date:** [July 7, 2018, 2:04pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/14 "2018-07-07T14:04:35Z")

</div>

I’ve patched up a temporary solution. Did not need a patch up for the third song. It played flawlessly till the end.

```auto

import ddf.minim.*;

Minim minim;
AudioPlayer song;
AudioOutput out;
AudioMetaData meta;

final float SPACING = 50.0f;
final boolean DEBUG_ON = false;

float TimeStamp = SPACING;

float songLength;

void setup() {
  size(500, 200);
  textSize(14);
  textAlign(CORNER);
  frameRate(240);

  minim = new Minim(this);
  out = minim.getLineOut(Minim.STEREO, 1024);

  //song = minim.loadFile("Kaadhal Kasakudhaiya.mp3");
  song = minim.loadFile("Song.mp3");
  // song = minim.loadFile("Agni Natchatiram - Ninnukori Varanam.mp3");
  //song = minim.loadFile("Bhavayami.mp3");

  meta = song.getMetaData();
  song.play();
  songLength = song.length();
}

void draw() {
  stroke(0);
  background(51, 50);
  fill(100, 50, 50); 
  strokeWeight(0);
  strokeCap(SQUARE);
  rect(20, 20, width-40, height-40, 40);
  fill(100); 
  rect(SPACING, SPACING, 80, 80);
  fill(255);
  text(meta.title(), 135, 70, 300, 50);
  text(meta.author(), 135, 110, 300, 50);

  strokeWeight(20);
  stroke(204);
  line(SPACING, 150, width - SPACING, 150); //where the progress bar should end
  stroke(0, 0, 255, 128);

  //here is where it goes wrong. <KAZ> Now I've padched up it a little to make things work better
  TimeStamp = map(song.position(), 0, songLength, 0, width - 2*SPACING);
  if (DEBUG_ON) {
    println("Progress Bar Position: " + (SPACING + TimeStamp));
    println("Song Position: " + song.position());
    println("Song Length: " + song.length());
    println(song.isPlaying());
  }
  if (!song.isPlaying()) {
    songLength = song.position();
  }
  line(SPACING, 150, SPACING+TimeStamp, 150);
}

void mouseReleased() {
  int position;
  if (mouseX > SPACING && mouseX < width - SPACING) {
    position = int(map( mouseX, SPACING, width - SPACING, 0, song.length()));
    song.play();
    song.cue(position);
  }
}

```

---

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 7, 2018, 2:22pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/15 "2018-07-07T14:22:43Z")

</div>

Thanks for your help!  
I can see that the song position is different to the song length when the song is finished and your code

> [@KAZ](#):
>
> ```auto
> if (!song.isPlaying()) {
> songLength = song.position();
> }
> 
> ```

I also like the redesign with the red rectangle 😛

Although I have found that sometimes when you click to skip to a part of the song the bar doesn’t go to exactly where you clicked (EDIT: to recreate, when the song is finished click around 20-40 pixels left of the edge of the progress bar) but I think thats just because the way that the line is displayed but then it doesn’t jump when the song is finished because then it works as intended. I think I can fix that.  
Thanks again for your help!

* * *

Doge

---

<div class="post-metadata">

**Author:** ![KAZ](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kaz/32/2402_2.png) [@KAZ](https://discourse.processing.org/u/KAZ)\
**Post date:** [July 7, 2018, 3:20pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/16 "2018-07-07T15:20:09Z")

</div>

Thank You For Your Appreciation. I’ve forgotten to replace `song.length()` with `songLength` variable in `mouseReleased()` method as follows.  
. Kindly do it then there will not be any glitches.

```auto
void mouseReleased() {
  int position;
  if (mouseX > SPACING && mouseX < width - SPACING) {
    position = int(map( mouseX, SPACING, width - SPACING, 0, songLength));
    song.play();
    song.cue(position);
  }
}

```

Also you can try writing a function you can use in the `setup()` itself to pre-calculate the real length of a song.

---

<div class="post-metadata">

**Author:** ![DogeMastr](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/dogemastr/32/689_2.png) [@DogeMastr](https://discourse.processing.org/u/DogeMastr)\
**Post date:** [July 7, 2018, 3:24pm UTC](https://discourse.processing.org/t/solved-minim-progress-bar/1551/17 "2018-07-07T15:24:41Z")

</div>

Yea the setup function sounds like a good idea! Ill try that out!

Edit: This fixed it!

```auto
void InitSong() {
  song.cue(song.length());
  songLength = song.position();
  song.cue(0);
}

```

I also removed the `songLength = song.length();`in setup and it just works now!

Thanks for all your help again!

* * *

Doge