WebAudio setting gainNode.gain.value - javascript

I am trying to deal with a deprecated Chrome feature of the WebAudio API that has to do with setting gainNode.gain.value. My current code is this:
var source = ctx.createBufferSource();
var my_gain = -1; //or 1, depending on whether I want sound or not
source.gainNode.gain.value = Math.min(1.0, Math.max(-1.0, gain));
This, however, gets me an error message: "[Deprecation] GainNode.gain.value setter smoothing is deprecated and will be removed in M64, around January 2018. Please use setTargetAtTime() instead if smoothing is needed. See https://www.chromestatus.com/features/5287995770929152 for more details"
To get the error message disappear, I can do something like this:
source.gainNode.gain.setTargetAtTime(0, ctx.currentTime, 0.015);
But how do I incorporate my_gain variable into this?

So, you CAN just ignore this message. Smoothing shouldn't matter much to you in this situation. If you DID want smoothing, you should use:
source.gainNode.gain.setTargetAtTime(my_value, ctx.currentTime, 0.015);
The reason setting my_value to -1 isn't working is that it SHOULDN'T - all you're doing is inverting the sound (i.e., sound values are between -1 and 1 to begin with, this would flip them but not make them zero). What you SHOULD do, in order to turn the sound off, is make my_value=0.

Related

I am trying to detect rectangle shape paper with blue colour using opencv.js (javascript)

I'm trying to detect the rectangle shape and blue color target but when I try to run this code I'm getting some error. Did I miss any code please guide me, I'm using opencv.js (javascript).
I tried This.
function findMarker(video){
let gray = cv.cvtColor(video, cv.COLOR_RGBA2GRAY);
let blur = cv.blur(gray, ksize, anchor, cv.BORDER_DEFAULT); // blur the image to avoids noise
let edges = cv.Canny(blur, 50, 100, 3, false); // black and white border
let cnts = cv.findContours(edges.copy(), cv.RETR_CCOMP, cv.CHAIN_APPROX_SIMPLE);
c = max(cnts, key = cv.contourArea);
return cv.minAreaRect(c);
}
Error Code
BindingError {name: "BindingError", message: "Function 'cvtColor' called with an invalid number … arg0Wired, arg1Wired, arg2Wired, arg3Wired);↵})!", stack: "BindingError: Function 'cvtColor' called with an i…20OpenCV%20js/utils.js:68:13), <anonymous>:24:23)"}
Your question contains too little useful info and the title is misleading.
You had a bug in running a function. Try to add more description, like where you call this, whats the video contains and whats the complete error.
But based on my experience, you could start off the debug first by
first, for each stage, display image to debug eg video gray blur edge image. just to know where the problem is.
Second, the input to convert function should be current frame aka Mat. Did you just pass the video class to the convert function?
Last but not the least, you can follow other people implementation to try out e.g
https://android.jlelse.eu/a-beginners-guide-to-setting-up-opencv-android-library-on-android-studio-19794e220f3c
try to learn how they use mRBGA in the sample section of the linked tutorial. I tested this just now, it is working. So I think you can learn from them on the proper routing
As the error message says, you call cvtColor with the wrong arguments: you need to pass to the function first the source frame, then the destination mat, then the color conversion code
Try like this
let src = cv.imread('canvasInput');
let dst = new cv.Mat();
cv.cvtColor(src, dst, cv.COLOR_RGBA2GRAY, 0);
here the reference
edit: I'm also not quite sure also about the function parameter: you named it video, due to this(and if you pass an actual video flow) I think you need to extract frames from the video before converting

Phaser Weapon plugin, set the kill_DISTANCE

I'm using the phaser weapon plugin, and i've set the kill type to kill_distance:
weapon.bulletKillType = Phaser.Weapon.KILL_DISTANCE;
But, it is automatically set to 2, which doesn't really allow it to travel very far. I'm wondering how i can set it to a larger number
thanks in advance
You can just set the bulletKillDistance:
weapon.bulletKillType = Phaser.Weapon.KILL_DISTANCE;
weapon.bulletKillDistance = 50;
This strikes me as an oversight in the documentation.
Update
This has been updated in the documentation source, and should be updated online once there's a release/deployment.
[static] KILL_DISTANCE : integer
A bulletKillType constant that automatically kills the bullets after they
exceed the bulletDistance from their original firing position.
Unfortunately, I tried searching in documents, but I could not find "bulletDistance". For example, if you use KILL_LIFESPAN, you can change bulletLifespan variable, but there are no "bulletDistance" in document. This is either not implemented or they forgot it in the docs. Try this and it may/may not work.

Simple Collision Detection in Javascript / Jquery?

I am working on a portion of a project that I am trying to detect when certain divs hit each other. In the code that I made, that doesn't work, I basically say take the first div's left amount, compare it to the other div's left amount, if they are within a certain amount it triggers an alert. If I get that much to work I am going to implant a way to say that if the distance between the two divs is 0 then it will run a certain function. I am afraid the scope of this project is too big for me, even though I am basically at the last part, because I have spent hours researching a simple way to add collision detection, but everything I find looks like rocket science to me, that is why I tried to create my own way below. So in summary, what I want to know is why my collision detection code doesn't work, how I can make it work if possible, and if not possible what is the next best option that I should use.
//Collision
function collision(){
var tri = $('#triangle');
var enemyPos = $('.object1').css('left');
var minHit = enemyPos - 32.5;
var maxHit = enemyPos + 32.5;
var triLoc = tri.css('left');
if(triLoc > minHit && triLoc < maxHit){
alert('hit');
}
}
collision();
}
}
full code: https://jsfiddle.net/kc59vzpy/
If the code you have above is definitely where the problem is, then you need to look at the enemyPos variable. Getting the left position also adds px, so enemyPos is 100px or something like that. When you add 32.5, you get 100px32.5 and when you subtract you get NaN, neither of which you want.
Before you add or subtract, use enemyPos = parseInt($('.object1').css('left')); to turn it into an actual number.

play a single beep (beep.js)

i'm trying to create a "generative score" using beep.js based on some map data i have. i am using new Beep.Voice as placeholder for notes associated to specific types of data (7 voices total). as data is displayed, a voice should be played. i'm doing things pretty "brute force" so far and i'd like it to be cleaner:
// in the data processing function
voice = voices[datavoice]
voice.play()
setTimeout(function(){killVoice(voice)}, 20)
// and the killvoice:
function killVoice(voice) {
voice.pause()
}
i'd like to just "play" the voice, assuming it would have a duration of, say, 20ms (basically just beep on data). i saw the duration property of voices but couldn't make them work.
the code is here (uses grunt/node/coffeescript):
https://github.com/mgiraldo/inspectorviz/blob/master/app/scripts/main.coffee
this is how it looks like so far:
https://vimeo.com/126519613
The reason Beep.Voice.duration is undocumented in the READ ME is because it’s not finished yet! ;) There’s a line in the source code that literally says “Right now these do nothing; just here as a stand-in for the future.” This applies to .duration, .attack, etc. There’s a pull request to implement some of this functionality here but I’ve had to make some significant structural changes since that request was submitted; will need to take a closer look soon once I’ve finished fixing some larger structural issues. (It’s in the pipeline, I promise!)
Your approach in the meantime seems right on the money. I’ve reduced it a bit here and made it 200 milliseconds—rather than 20—so I could here it ring a bit more:
var voice = new Beep.Voice('4D♭')
voice.play()
setTimeout( function(){ voice.pause() }, 200 )
I saw you were using some pretty low notes in your sample code, like '1A♭' for example. If you’re just testing this out on normal laptop speakers—a position I am often myself in—you might find the tone is too low for your speakers; you’ll either hear a tick or dead silence. So don’t worry: it’s not a bug, just a hardware issue :)
Forget everything I said ;)
Inspired by your inquiry—and Sam’s old pull request—I’ve just completed a big ADSR push which includes support for Voice durations. So now with the latest Beep.js getting a quick “chiptune-y” chirp can be done like this:
var voice = new Beep.Voice( '4D♭' )
.setOscillatorType( 'square' )
.setAttackDuration( 0 )
.setDecayDuration( 0 )
.setSustainDuration( 0.002 )
.setReleaseDuration( 0 )
.play()
I’ve even included an ADSR ASCII-art diagram in the new Beep.Voice.js file for easy referencing. I hope this helps!

Get Final Output Frequency of Chained Oscillators

I've set up a web page with a theremin and I'm trying to change the color of a web page element based on the frequency of the note being played. The way I'm generating sound right now looks like this:
osc1 = page.audioCX.createOscillator();
pos = getMousePos(page.canvas, ev);
osc1.frequency.value = pos.x;
gain = page.audioCX.createGain();
gain.gain.value = 60;
osc2 = page.audioCX.createOscillator();
osc2.frequency.value = 1;
osc2.connect(gain);
gain.connect(osc1.frequency);
osc1.connect(page.audioCX.destination);
What this does is oscillate the pitch of the sound created by osc1. I can change the color to the frequency of osc1 by using osc1.frequency.value, but this doesn't factor in the changes applied by the other parts.
How can I get the resultant frequency from those chained elements?
You have to do the addition yourself (osc1.frequency.value + output of gain).
The best current (but see below) way to get access to the output of gain is probably to use a ScriptProcessorNode. You can just use the last sample from each buffer passed to the ScriptProcessorNode, and set the buffer size based on how frequently you want to update the color.
(Note on ScriptProcessorNode: There is a bug in Chrome and Safari that makes ScriptProcessorNode not work if it doesn't have at least one output channel. You'll probably have to create it with one input and one output, have it send all zeros to the output, and connect it to the destination, to get it to work.)
Near-future answer: You can also try using an AnalyserNode, but under the current spec, the time domain data can only be read from an AnalyserNode as bytes, which means the floating point samples are being converted to be in the range [0, 255] in some unspecified way (probably scaling the range [-1, 1] to [0, 255], so the values you need would be clipped). The latest draft spec includes a getFloatTimeDomainData method, which is probably your cleanest solution. It seems to have already been implemented in Chrome, but not Firefox, as far as I can tell.

Categories