Connect to audio element
Closed this issue · 1 comments
Hello,
after messing some period with tuna.js i found this library which look much better,
also there is a very weak support in tuna i left a question more than 2 weeks ago and still didn't got an answer,
your library look better, and there is also "equalizer" in it, in a hope to implement it into my app i hope you can provide me any hint how to connect xsound to an audio element? such as i does with tuna?
please take a look at my code:
/// DEFINE AUDIO CONTEXT | (FOR PRIMARY AUDIO ELEMENT) | ON TIMEOUT.
let audioContext = new AudioContext() || window.AudioContext || window.webkitAudioContext || window.mozAudioContext || window.msAudioContext;
/// DEFINE AUDIO ELEMENT | PRIMARY AUDIO ELEMENT ("PlayBackAudioElement").
let audio = document.getElementById("PlayBackAudioElement");
/// ANONYMOUS SOURCE CROSS ORIGIN.
audio.crossOrigin = "anonymous";
/// DEFINE AUDIO SOURCE AS THE HTML AUDIO ELEMENT.
let source = audioContext.createMediaElementSource(audio);
/// CREATE TUNA INSTANCE FOR ALL EFFECTS - CONECTED TO THE AUDIO CONTEXT.
var tuna = new Tuna(audioContext);
/// CREATE CONNECTION GAIN.
var TunaConnectionINPUT = audioContext.createGain();
var TunaConnectionOUTPUT = audioContext.createGain();
/// REVERB EFFECT.
var reverb = new tuna.Convolver({
highCut: 19000, // 20 to 22050
lowCut: 200, // 20 to 22050
dryLevel: 0, // 0 to 1+
wetLevel: 0.5, // 0 to 1+
level: 1, // 0 to 1+, TOTAL OUTPUT FOR WET AND DRY.
impulse: "TunaAssets/impulse_rev.wav", // IMPULSE RESPONSE.
bypass: 0
});
/// CONNECTION:
/// ****************************************************************************************
/// CONNECT REVERB INPUT TO THE REVERB EFFECT.
TunaConnectionINPUT.connect(reverb);
/// CONNECT REVERB EFFECT TO THE REVERB OUTPUT (CREATED GAIN OUTPUT).
reverb.connect(TunaConnectionOUTPUT);
/// CONNECT REVERB EFFECT THE AUDIO SOURCE.
source.connect(reverb);
/// CONNECT REVERB EFFECT TO THE WEB AUDIO ELEMENT OUTPUT STREAM.
reverb.connect(audioContext.destination);
/// ****************************************************************************************
i am trying to understand how should i connect xsound that way to my audio context?
thank you!
Thank you for your nice question.
MediaElementAudioSourceNode
has cross-origin restrict.
However, it is resolved to use Object URL that represents audio resource.
XSound can resolve it easily !
For example,
X('media').setup({
media: document.querySelector('audio')
});
X.ajax({
url: 'impulse_rev.wav',
type: 'arraybuffer',
successCallback: (event: ProgressEvent, arrayBuffer: ArrayBuffer) => {
X.decode(X.get(), arrayBuffer, (rirAudioBuffer: AudioBuffer) => {
// for Reverb
X('media').module('reverb').preset({ rirs: [rirAudioBuffer] });
X('media').module('reverb').param({
buffer: 0,
dry: 0.7, // Sound Source Gain
web: 0.3, // Effect (Reverb) Gain
}).activate();
// for Equalizer
X('media').module('equalizer').param({
bass: 5,
middle: - 3,
treble: 5,
presence: 2
}).activate();
X('media').start(X('media').param('currentTime'));
}, () => {
console.error('Decode error.');
})
},
errorCallback: () => {
console.error('The loading of RIR failed.');
}
});
API Document
MediaModule
https://xsound.jp/docs/classes/main.MediaModule.htmlEqualizer
https://xsound.jp/docs/classes/main.Equalizer.htmlReverb
https://xsound.jp/docs/classes/main.Reverb.html
Playground
Select MediaModule
and Click Run
button https://xsound.jp/playground/
Thanks !