Korilakkuma/XSound

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!

@bragle

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

Playground

Select MediaModule and Click Run button https://xsound.jp/playground/

Thanks !