javascript - How to connect Web Audio API to Tone.js? - Stack Overflow

admin管理员组

文章数量:1317898

I'm doing an Online Audio Player, so I want to integrate Pitch Shifter in my App, which is available on Tone js but not in Web Audio API...

So my idea is to connect Tonejs Pitch Shifter to Web Audio API's audioContext.

Is there any possible ways?

Here is my code for a reference

var audioCtx = new (window.AudioContext || window.webkitAudioContext);

var mediaElem = document.querySelector('audio');

var stream = audioCtx.createMediaElementSource(mediaElem);

var gainNode = audioCtx.createGain();

stream.connect(gainNode);

// tone js

var context = new Tone.Context(audioCtx); // Which is Mentioned in Tonejs Docs!

var pitchShift = new Tone.PitchShift().toMaster();

pitchShift.connect(gainNode);

// Gives Error!
gainNode.connect(audioCtx.destination);

I'm doing an Online Audio Player, so I want to integrate Pitch Shifter in my App, which is available on Tone js but not in Web Audio API...

So my idea is to connect Tonejs Pitch Shifter to Web Audio API's audioContext.

Is there any possible ways?

Here is my code for a reference

var audioCtx = new (window.AudioContext || window.webkitAudioContext);

var mediaElem = document.querySelector('audio');

var stream = audioCtx.createMediaElementSource(mediaElem);

var gainNode = audioCtx.createGain();

stream.connect(gainNode);

// tone js

var context = new Tone.Context(audioCtx); // Which is Mentioned in Tonejs Docs!

var pitchShift = new Tone.PitchShift().toMaster();

pitchShift.connect(gainNode);

// Gives Error!
gainNode.connect(audioCtx.destination);

• javascript
• node.js
• audio
• web-audio-api
• tone.js

Share Improve this question Follow edited Nov 3, 2019 at 11:29 Aadarsh velu asked Nov 3, 2019 at 2:19 Aadarsh veluAadarsh velu 16011 gold badge22 silver badges77 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 11

I guess you want to achieve a signal flow like this:

mediaElement > gainNode > pitchShift > destination

To make sure Tone.js is using the same AudioContext you can assign it by using the setter on the Tone object. This needs to be done before doing anything else with Tone.js.

Tone.context = context;

Tone.js also exports a helper which can be used to connect native AudioNodes to the nodes provided by Tone.js.

Tone.connect(gainNode, pitchShift);

I modified your example code a bit to incorporate the changes.

var audioCtx = new (window.AudioContext || window.webkitAudioContext);
var mediaElem = document.querySelector('audio');
var stream = audioCtx.createMediaElementSource(mediaElem);
var gainNode = audioCtx.createGain();

// This a normal connection between to native AudioNodes.
stream.connect(gainNode);

// Set the context used by Tone.js
Tone.context = audioCtx;

var pitchShift = new Tone.PitchShift();

// Use the Tone.connect() helper to connect native AudioNodes with the nodes provided by Tone.js
Tone.connect(gainNode, pitchShift);
Tone.connect(pitchShift, audioCtx.destination);

本文标签： javascriptHow to connect Web Audio API to TonejsStack Overflow