使用网络音频 api 为摩尔斯电码（音频上下文）创建带有声音的屏幕闪光部分

Question

我已经创建了使用网络音频生成摩尔斯电码声音的代码 api。摩尔斯电码声音完美无缺。我想用 sound.There 只是两个声音点 (.) 和破折号 (-) 来闪烁屏幕的一部分。我想通过闪烁屏幕的一部分来显示消息。 我尝试将 div 的背景颜色设置为黑色，然后 hide/show 将 div 设置为闪光效果。 但它不起作用 expected.please 帮助我....提前致谢... 我试过了：

$(document).ready(function() {
 var context = new (window.AudioContext || window.webkitAudioContext());
 var O= new MorseNode(context,20);
 O.connect(context.destination);
 O.playString(1,'.-- -..');

});

function MorseNode(ac, rate) {
    // ac is an audio context.
    this._oscillator = ac.createOscillator();
    this._gain = ac.createGain();

    this._gain.gain.value = 0;
    this._oscillator.frequency.value = 550;

    this._oscillator.connect(this._gain);

    if(rate == undefined)
        rate = 20;
    this._dot = 1.2 / rate; // formula from Wikipedia.

    this._oscillator.start(0);
}

MorseNode.prototype.connect = function(target) {
    return this._gain.connect(target);
}

MorseNode.prototype.playChar = function(t, c) {
    for(var i = 0; i < c.length; i++) {
        switch(c[i]) {
        case '.':
            $('#flashBlock').hide(); //I tried this to flash the screen.
            this._gain.gain.setValueAtTime(1.0, t);
            t += this._dot;
            this._gain.gain.setValueAtTime(0.0, t);
            $('#flashBlock').show();
            break;
        case '-':
            $('#flashBlock').hide();
            this._gain.gain.setValueAtTime(1.0, t);
            t += 3 * this._dot;
            this._gain.gain.setValueAtTime(0.0, t);
            $('#flashBlock').show();
            break;          
        }
        t += this._dot;
    }
    return t;
}

MorseNode.prototype.playString = function(t, w) {
    w = w.toUpperCase();
    for(var i = 0; i < w.length; i++) {
        if(w[i] == ' ') {
            t += 3 * this._dot; // 3 dots from before, three here, and
                                // 1 from the ending letter before.
        }
        else if(w[i] != undefined) {
            t = this.playChar(t, w[i]);
            t += 2 * this._dot;
        }
    }
    return t;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
   <div id="flashBlock" style="Background:black;display:none;height:100px;width:100px">
  </div>
</html>

Answer 1

问题是您进行元素操作的地方将在音频上下文播放声音之前运行。 setValueAtTime() 设置一个事件，在本例中为增益变化，在特定时间发生。您的 hide/show 通话不与这些事件设置同步，因为它们立即运行，因此它们运行在音频之前。

你还有另一个问题，你运行 hide() 和 show() 几乎紧随其后，这基本上会相互抵消。在调用其他方法之前需要经过一定的时间才能正确呈现动画。

您需要做的是设置一个定时系统以在正确的时间执行隐藏/显示。

实现此目的的一种方法是创建一个数组，该数组包含详细说明何时开始和结束隐藏/显示操作的对象。

var flashBlock = $('#flashBlock'); //cache this so you dont create it each time

//in constructor
this.flashTimes = [];

//in playChar()
this.flashTimes.push({
  timestamp:t,
  end:t+this._dot // or t+(3*this._dot)
});

然后不断检查音频流以检查其时间，如果时间正确，则开始操作。

MorseNode.prototype.flashLoop = function(){
  var ct = ac.currentTime;
  var currentFlash = this.flashTimes[0];
  if(ct >= currentFlash.timestamp && ct < currentFlash.end){
     // remove it from the queued
     this.flashTimes.shift(); 
     // determine how much time the animation can 
     // last between now and when it is supposed to end.
     let duration = ac.currentTime - currentFlash.end;

     // first argument to hide / show is duration of animation,
     // the second is a callback to be called when animation is done
     flashBlock.hide(duration-100,()=>{
       flashBlock.show(100);
     });
  }
  requestAnimationFrame(()=>this.flashLoop());
}

requestAnimationFrame(()=>this.flashLoop());

var flashBlock = null;
$(document).ready(function() {
  flashBlock = $('#flashBlock');
  var context = new(window.AudioContext || window.webkitAudioContext());
  var O = new MorseNode(context, 20);
  O.connect(context.destination);
  O.playString(1, '.-- -.. ... - . --- .-. --.');
});

function MorseNode(ac, rate) {
  this.flashTimes = [];
  this.ac = ac;
  
  // ac is an audio context.
  this._oscillator = ac.createOscillator();
  this._gain = ac.createGain();

  this._gain.gain.value = 0;
  this._oscillator.frequency.value = 550;

  this._oscillator.connect(this._gain);

  if (rate == undefined)
    rate = 20;
  this._dot = 1.2 / rate; // formula from Wikipedia.

  this._oscillator.start(0);
}

MorseNode.prototype.connect = function(target) {
  return this._gain.connect(target);
}

MorseNode.prototype.playChar = function(t, c) {
  switch (c) {
    case '.':
      this.flashTimes.push({
        timestamp: t,
        end: t + this._dot
      });
      this._gain.gain.setValueAtTime(1.0, t);
      t += this._dot;
      this._gain.gain.setValueAtTime(0.0, t);
      break;
    case '-':
      this.flashTimes.push({
        timestamp: t,
        end: t + (3 * this._dot)
      });
      this._gain.gain.setValueAtTime(1.0, t);
      t += 3 * this._dot;
      this._gain.gain.setValueAtTime(0.0, t);
      break;
  }
  t += this._dot;

  return t;
}

MorseNode.prototype.playString = function(t, w) {
  w = w.toUpperCase();
  for (var i = 0; i < w.length; i++) {
    if (w[i] == ' ') {
      t += 3 * this._dot;
    } else if (w[i] != undefined) {
      t = this.playChar(t, w[i]);
      t += 2 * this._dot;
    }
  }
  requestAnimationFrame(() => this.flashLoop());
  return t;
}

MorseNode.prototype.flashLoop = function() {
  var ct = this.ac.currentTime;
  var currentFlash = this.flashTimes[0];
  if (!currentFlash) return;

  if (ct >= currentFlash.timestamp && ct < currentFlash.end) {
    this.flashTimes.shift(); // remove it from the queued actions
    let duration = this.ac.currentTime - currentFlash.end;
    flashBlock.hide(duration - 100, () => {
      flashBlock.show(100);
    });
  }
  requestAnimationFrame(() => this.flashLoop());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<html>
<div id="flashBlock" style="Background:black;display:none;height:100px;width:100px">
</div>

</html>

使用网络音频 api 为摩尔斯电码（音频上下文）创建带有声音的屏幕闪光部分

Flash Part of screen With Sound created using web audio api for Morse code(audio context)

javascript

jquery

morse-code

audiocontext

web-audio-api