CODEWITHSUNDEEP
jqueryhtml5-canvashtml5-audiosoundmanager2
arunm
arunm

Reputation: 49

change this.position of audio in sound manager 2 while playing

change this.position of audio in sound manager 2 while playing

Me display the sound wave in the canvas and filling the image using whileplaying() function.

I have to change the audio position to a particular position while clicking on the canvas

my code is 

function playing(){
    soundManager.setup({
      url: '../../swf/'
    });
    foo = soundManager.createSound({
      id: 'bar',
      url: '../Enigma02.mp3'
    });
    foo.options.whileplaying = function() {
      //demo.addEventListener("mousedown", getPosition, false);
      demo.addEventListener('click', function(e) {
           /*var pos = {
               x : e.pageX - demo.offsetLeft,
               y : e.pageY - demo.offsetTop
           };*/
           xpos = e.pageX - demo.offsetLeft;
           ypos = e.pageY - demo.offsetTop;
           //console.log(xpos)
        }, false);
      cur_pos = this.position;
      tot_pos = this.duration;
      soundManager._writeDebug('whileplaying(): '+this.position+' / '+this.duration);
      img.onload = loop;
      img.crossOrigin = 'anonymous';
      img.src = url;
      p++;
    }
    foo.play();
    $("#play").hide();
    $("#resume").show();
}

function loop() {

    x = (640/tot_pos)*cur_pos;   /// sync this with actual progress
    /// since we will change composite mode and clip:
    ctx.save();

    /// clear background with black
    ctx.fillStyle = '#484848';
    ctx.fillRect(0, 0, w, h);

    /// remove waveform, change composite mode
    ctx.globalCompositeOperation = 'destination-atop';
    ctx.drawImage(img, 0, 0, w, h);

    /// fill new alpha, same mode, different region.
    /// as this will remove anything else we need to clip it

    if(xpos != 0)
    {
        var t = parseInt(xpos);
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.rect(0, 0, t, h);
        ctx.clip();    /// et clipping
        ctx.fill();    /// use the same rect to fill

    }

    else
    {
        ctx.fillStyle = grd;
        ctx.beginPath();
        ctx.rect(0, 0, x, h);
        ctx.clip();    /// et clipping
        ctx.fill();    /// use the same rect to fill
    }
    /// remove clip and use default composite mode
    ctx.restore();

    /// loop until end
    if (x <= tot_pos) requestAnimationFrame(loop);
}

Upvotes: 0

Views: 1092

Answers (2)

arunm
arunm

Reputation: 49

var sound = soundManager.getSoundById('bar'+idd); sound.pause();

    // This function triggers after the new position actually
    // takes effect. It's not instantaneous, evidently. The reason why
    // I'm using a callback at position 0 is that setPosition also doesn't
    // set the new position exactly.
    var positionCallback = function(eventPosition) {
      this.clearOnPosition(0, positionCallback);
      this.resume();
    };
    sound.onPosition(0, positionCallback);
    var next = "10000";
    sound.setPosition(next);

Upvotes: 0

user1693593
user1693593

Reputation:

A bit unclear what you mean but, if you have the complete waveform drawn into canvas and you want to click at the waveform and move the current position in the track, in general do:

// get mouse position relative to canvas
var rect = demo.getBoundingClientRect(),
    x = e.clientX - rect.left;

// normalize the position
var factor = x / demo.width;

// get current position
var newPos = duration * factor;

Use newPos for the current position on the track.

Upvotes: 1

Related Questions