Question

在播放时改变音频管理器2中的音频位置

我在画布中显示声波并使用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);
}

Answer 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作为赛道上的当前位置。

Answer 2

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

在播放时改变声音管理器2中的音频位置

2 个答案: