玩audioContext
玩audioContext
提问于 2015-07-22 23:03:31
在这个SO answer的启发下，我有了这段代码，它可以工作，但是它会弹出，听起来不那么流畅。
$('.btn').each(initDraggable);
function initDraggable() {
var param = {}
param.drag = drag
param.stop = stopper
$(this).draggable(param)
}
var Variables = {}
Variables.Frequency = 0
function drag(myEvent,myUI) {
var Frequency = myUI.position.left + 100
var Duration = 5000
if (Math.abs(Variables.Frequency-Frequency) > 25) {
if (typeof(Variables.osc) === 'undefined') {
} else {
Variables.osc.stop(0)
}
Variables.Frequency = Frequency
Oscillator(Frequency,Duration)
}
}
function stopper() {
Variables.osc.stop(0)
}
Variables.ctx = new(window.audioContext || window.webkitAudioContext)
function Oscillator(argFrequency,argDuration) {
Variables.osc = Variables.ctx.createOscillator()
Variables.osc.type = 0
Variables.osc.connect(Variables.ctx.destination)
Variables.osc.frequency.value = argFrequency
Variables.osc.start(0)
setTimeout(myTimeout,argDuration)
function myTimeout() {
Variables.osc.stop(0)
}
}<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css">
<span class="btn btn-primary">Drag me</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.touch-punch/latest/jquery.ui.touch-punch.js"></script>
问:有什么简单的方法可以让这个听起来更流畅吗？
回答 1
Stack Overflow用户
回答已采纳
发布于 2015-07-23 01:50:35
没有必要重新创建oscillator on drag，我认为这是导致pops的原因。但是您可以更改已启动frequency value的oscillator，因此您可以通过在拖动start上创建振荡器，在stop上停止它，以及简单地更改drag上的频率值来实现您的结果。如下所示：
$('.btn').each(initDraggable);
function initDraggable() {
var param = {}
param.drag = drag
param.stop = stopper
param.start = startOsc
$(this).draggable(param)
}
var Variables = {}
Variables.Frequency = 0
function drag(myEvent, myUI) {
var Frequency = myUI.position.left + 100
var Duration = 5000
if (Math.abs(Variables.Frequency - Frequency) > 25) {
//You could put some validation on creation, but since you're not creating it, it's not necessary here
/*if (typeof(Variables.osc) === 'undefined') {
} else {
Variables.osc.stop(0)
}*/
Variables.Frequency = Frequency;
//Oscillator(Frequency,Duration)
Variables.osc.frequency.value = Frequency;
}
}
function startOsc(myEvent, myUI) {
var Frequency = myUI.position.left + 100
Oscillator(Frequency) //Since it plays in continue you don't need duration
}
function stopper() {
Variables.osc.stop(0)
}
Variables.ctx = new(window.AudioContext || window.webkitAudioContext)
function Oscillator(argFrequency /*,argDuration*/ ) {
Variables.osc = Variables.ctx.createOscillator()
Variables.osc.type = 0
Variables.osc.connect(Variables.ctx.destination)
Variables.osc.frequency.value = argFrequency
Variables.osc.start(0)
/*setTimeout(myTimeout,argDuration)
function myTimeout() {
Variables.osc.stop(0)
}*/
}<link rel="stylesheet" href="//cdn.jsdelivr.net/bootstrap/latest/css/bootstrap.css">
<link rel="stylesheet" href="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.css">
<span class="btn btn-primary">Drag me</span>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="//cdn.jsdelivr.net/bootstrap/latest/js/bootstrap.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui/latest/jquery-ui.min.js"></script>
<script src="//cdn.jsdelivr.net/jquery.ui.touch-punch/latest/jquery.ui.touch-punch.js"></script>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31575495
复制相关文章
相似问题
腾讯云开发者
