Flash屏幕的一部分使用用于莫尔斯电码（音频上下文）的网络音频API创建的声音
问题描述：
我创建了使用网络音频API生成莫尔斯电码声音的代码。摩尔斯电码声音正在运作完美。我想用这种声音来刷新屏幕的一部分。只有两个声音点（。）和短划线（ - ）。我想通过闪烁屏幕的一部分来显示消息。 我试图将div的背景颜色设置为黑色，然后隐藏/显示div来给出闪光效果。但它不工作作为expected.please帮助我....在此先感谢... 我尝试这样做：Flash屏幕的一部分使用用于莫尔斯电码（音频上下文）的网络音频API创建的声音
$(document).ready(function() {
\t var context = new (window.AudioContext || window.webkitAudioContext());
\t var O= new MorseNode(context,20);
\t O.connect(context.destination);
\t 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">
\t \t </div>
</html>
答
的问题是，你正在做的元素的地方操作将在音频上下文播放声音之前运行。 setValueAtTime()设置了一个事件，在这种情况下是增益变化，在特定的时间发生。您的隐藏/演出电话不会与这些事件设置同步，因为它们立即运行，因此它们在音频之前运行。
您还有另一个问题，您几乎正确地运行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>
它的工作原理perfect..I感谢您的快速response..Thankü这么多！ :) – user3357709
动画不像flash效果..所以，我修改flashloop函数中的隐藏/显示代码为“flashBlock.show（）。delay（duration）.fadeOut（-80）;”... ...所有代码的其余部分是按预期工作..再次感谢:) – user3357709
声音和闪光灯不能同时工作。我想保持该块闪烁的声音。如果声音播放3秒钟，则闪光灯应保持可见状态3秒钟，然后立即隐藏该区块。帮助plzzzzzz – user3357709