trigger Sound when Mouse is Over a Ellipse

delmenhorst

Hey. Im looking for a solution to trigger soundfiles.

I want that the mouse trigger random soundfiles just with moving in the browser. Can anyone help me that is my code. I tried many stuff. Thanks!!!! If anyone can help me.

var positionen = 50;
var buttons = [];
var songs = [];
var totalSongs = 9;
var lieder = [];
var tunes = [];

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
}


function setup() {
  createCanvas(windowWidth, windowHeight);

  var protection = 0;

  while (lieder.length < positionen) {
    var lied = {
      x: random(width),
      y: random(height),
      r: random(6, 150)
    }

    var overlapping = false;
    for (var j = 0; j < lieder.length; j++) {
      var other = lieder[j];
      var d = dist(lied.x, lied.y, other.x, other.y);
      if (d < lied.r + other.r) {
        overlapping = true;
      }
    }
    if (!overlapping) {
      lieder.push(lied);
    }

    protection++;
    if (protection > 10000) {
      break;
    }
  }

  for (var z = 0; z < totalSongs; z++) {
    ton(z, 'assets/dorrbell-00' + z + '.mp3');
  }
  for (var i = 0; i < lieder.length; i++) {
    buttons[i] = new Button(i, lieder[i].x, lieder[i].y, (lieder[i].r * 1.5));
  }

}


function ton(index, filename) {
  loadSound(filename, soundLoaded);

  function soundLoaded(sound) {
    songs[index] = sound;
    for (var u = 0; u < buttons.length; u++) {
      randomSound(u, random(songs));
    }
  }
}

function randomSound(index, tune) {
  tunes[index] = tune;
}

function draw() {
  background(255);
  for (var i = 0; i < buttons.length; i++) {
    //buttons[i].playSound(mouseX, mouseY);
    buttons[i].display(mouseX, mouseY);

  }
}


// function mouseMoved() {
//   for (var i = 0; i < buttons.length; i++) {
//     if (buttons[i].contains(mouseX, mouseY) && !tunes[i].isPlaying()) {
//       tunes[i].playMode('restart');
//       tunes[i].setVolume(1);
//       tunes[i].play();
//     } else {
//       //tunes[i].setVolume(0, 1);
//       //tunes[i].stop();
//     }
//   }
// }

var Button = function(i_, x_, y_, r_) {
  var x = x_;
  var y = y_;
  var r = r_;
  var mouseisOver = false;

  this.contains = function(mx, my) {
    if (dist(mx, my, x, y) < r) {
      return true;
    } else {
      return false;
    }
  };

  this.display = function(mx, my) {
    if (this.contains(mx, my)) {
      mouseisOver = true;
      fill(100);
    }
    if (!this.contains(mx, my)) {
      fill(175);
      mouseisOver = false;
    }
    print(mouseisOver);
    noStroke(0);
    ellipse(x, y, r, r);
  };

  // // this.playSound = function(mx, my) {
  // //   (buttons[i].contains(mouseX, mouseY) && !tunes[i].isPlaying()){
  //      tunes[i].playMode('restart');
  //       tunes[i]].play();
  //       tunes[i].setVolume(1,2);
  //       tunes[i].play();
  //     } else {
  //       //tunes[i].setVolume(0, 1);
  //       //tunes[i].stop();
  //   }
  // };

}

KevinWorkman

Which part of this is giving you trouble? Where are you stuck?

delmenhorst

the playSound function doesn't work well. I don't know why. When the mouse is over the object file isn't playing just one time and it stop not like it should. I tried it also with the mouseMoved Function. you get the same.

KevinWorkman

It looks like you're restarting the sound whenever the mouse is inside the button. That'll restart the sound 60 times per second. Is that what you wanted? Perhaps use the mouseClicked() function instead.

delmenhorst

thats the thing! I don't want to a click. My idea is just the movement. du you have an Idea?

KevinWorkman

Then it sounds like you need to keep track of whether a sound is already playing, and not restart it if it's already playing.

delmenhorst

How could I do that?

KevinWorkman

It's hard to answer general "how do I do this" type questions because there are a ton of ways to do any one thing.

The first thing I'd check is whether the library you're using provides this functionality. Does the object have someting like an isPlaying() function? I honestly don't know the answer to that question, but you can look it up in the documentation.

If not, then you can keep track of it yourself in a variable.

delmenhorst

I already use isPlaying in the Code but it doesn't work. I don't know why.

KevinWorkman

Please be more specific than saying it doesn't work.

Can you create a small example that just contains a single button that plays a single sound?