изменить это. положение аудио в диспетчере звука 2 во время воспроизведения

0

измените это.позицию звука в звуковом менеджере 2 во время воспроизведения

Me отображает звуковую волну в холсте и заполняет изображение с помощью функции whileplaying().

Мне нужно изменить положение звука на определенную позицию, щелкнув по холсту

мой код

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);
}
Теги:
html5-canvas
html5-audio
soundmanager2

2 ответа

1
Лучший ответ

Немного неясно, что вы имеете в виду, но если у вас есть полная волна, втянутая в холст, и вы хотите щелкнуть по форме волны и переместить текущую позицию в треке, в общем выполните:

// 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;

Используйте newPos для текущей позиции на дорожке.

0

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

    // This function triggers after the new position actually
    // takes effect. It 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);

Ещё вопросы

Сообщество Overcoder
Наверх
Меню