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>

來源

2017-09-01 user3357709

的問題是，你正在做的元素的地方操作將在音頻上下文播放聲音之前運行。 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>

來源

2017-09-01 20:18:05

它的工作原理perfect..I感謝您的快速response..Thankü這麼多！ :) – user3357709

動畫不像flash效果..所以，我修改flashloop函數中的隱藏/顯示代碼爲「flashBlock.show（）。delay（duration）.fadeOut（-80）;」... ...所有代碼的其餘部分是按預期工作..再次感謝:) – user3357709

聲音和閃光燈不能同時工作。我想保持該塊閃爍的聲音。如果聲音播放3秒鐘，則閃光燈應保持可見狀態3秒鐘，然後立即隱藏該區塊。幫助plzzzzzz – user3357709

Flash屏幕的一部分使用用於莫爾斯電碼（音頻上下文）的網絡音頻API創建的聲音

回答

相關問題