Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

connect to an audio element #171

Open
eetsceeck1 opened this issue Aug 1, 2022 · 1 comment
Open

connect to an audio element #171

eetsceeck1 opened this issue Aug 1, 2022 · 1 comment

Comments

@eetsceeck1
Copy link

Hi there,

there is a way to connect pizzicato to an existing html audio element as i did with tuna.js?

please check my conclusion how to connect an effect to an audio element with 4 other elements nodes connected to the same audio context on here: at the very bottom of the thread
instead i will explain here everything is there, what i am trying to do, how my script is looks like and all,
Theodeus/tuna#89 (comment)

i am trying to connect pizzicato the same way, or if
what is the way please to connect pizzicato to my audio element ?
thanks a lot in advance!

@eetsceeck1
Copy link
Author

here it is how i connect tuna in my case, thanks!

<!-- HTML -->
<audio id="PlayBackAudioElement" autoplay controls crossorigin="anonymous" preload="none">
<source src="">
</audio>

<button id="EnableConvolverButton">Enable Convolver</button>
<button id="DisableConvolverButton">Disable Convolver</button>
<!-- END OF HTML -->
//JAVASCRIPT
//
//	AUDIO CONTEXT.
let audioContext = new AudioContext() || window.AudioContext || window.webkitAudioContext();

//	SET VARIABLE FOR YOUR AUDIO ELEMENT.
let audio = document.getElementById("PlayBackAudioElement");

//	SET SOURCE VARIABLE - THE HTML AUDIO ELEMENT WILL BE YOUR SOURCE (MUSIC SOURCE/STREAM)
let source = audioContext.createMediaElementSource(audio);

//	SET VARIABLE FOR ENABLING THE EFFECT BUTTON (CONVOLVER IN THIS CASE)
let ConvolverEnableButtonVariable = document.querySelector("#EnableConvolverButton");

//	SET VARIABLE FOR DISABLING THE EFFECT BUTTON (CONVOLVER IN THIS CASE)
let ConvolverDisableButtonVariable = document.querySelector("#DisableConvolverButton");

//	THESE PARAMETERS BETTER TO BE OUTSIDE THE FUNCTION SO THEY WILL BE EXECUTED ON LOAD =>
//	
//	SET VARIABLE FOR TUNA NODE WITH YOUR EXIST AUDIOCONTEXT (THE AUDIOCONTEXT ABOVE)
//	NOTE: ***** IF YOU HAVE MORE NODES SUCH AS VISUALIZERS, YOU SHOULD ALWAYS USE THE SAME AUDIO CONTEXT *****
var tuna = new Tuna(audioContext);

//	CONVOLVER EFFECT
var convolver = new tuna.Convolver({
    highCut: 22050,                         //20 to 22050
    lowCut: 20,                             //20 to 22050
    dryLevel: 1,                            //0 to 1+
    wetLevel: 2.1,                          //0 to 1+
    level: 0.5,                             //0 to 1+, adjusts total output of both wet and dry
    impulse: "impulses/impulse_rev.wav",    //the path to your impulse response
    bypass: 0
});

//	INPUT AND OUTPUT CREATE GAIN ON THE WEB AUDIO API FOR TUNA (CAN BE ANY VARIABLE NAMES WE WANT OTHER THAN "INPUT" OR "OUTPUT")
///	MORE INFORMATION CAN BE FOUND HERE: https://developer.mozilla.org/en-US/docs/Web/API/BaseAudioContext/createGain
var input = audioContext.createGain();
var output = audioContext.createGain();

//	START EFFECT BUTTON
//	ON CLICK FUNCTION TO ENABLE CONVOLVER EFFECT.
ConvolverEnableButtonVariable.addEventListener("click", function () {

	input.connect(convolver);
	
	convolver.connect(output);
	
	source.connect(convolver);
	
	convolver.connect(audioContext.destination);

});


//	STOP EFFECT BUTTON
//	ON CLICK FUNCTION TO DISABLE CONVOLVER EFFECT.
ConvolverDisableButtonVariable.addEventListener("click", function(e) {

	convolver.disconnect();
	
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant