How to connect wavesurfer with Tone.js #3024
-
Hi, I want to use wavesurfer player with some Tone.js effects (e.g. pitch shift). Can someone explain me how to connect them together and show me some examples? Thanks. |
Beta Was this translation helpful? Give feedback.
Replies: 3 comments 7 replies
-
I'd love to know this as well. Update: This works https://gist.github.com/corysimmons/00e0e458b253d415a7537e44c002fd9b |
Beta Was this translation helpful? Give feedback.
-
Check out this example: https://wavesurfer.xyz/examples/?webaudio.js It shows how to get a Web Audio media element source node from wavesurfer. You can connect that node to other Web Audio nodes (such as Tone.js effects). |
Beta Was this translation helpful? Give feedback.
-
Trying out your test page at stackblitz and there are multiple CORS errors due to the way the environment is set up so it's tough to debug as is... on FF the mp3 won't load while on Chrome it says "MediaElementAudioSource outputs zeroes due to CORS access restrictions for <URL>" (never seen that one before, hmm...!). Also - not sure if this is the problem but you might need to wait until you do |
Beta Was this translation helpful? Give feedback.
The problem was the
mediaNode
inmediaNode.connect(filter)
is an instance of the native implementation and I needed to useTone.connect
instead. 😬 🤦I'm currently working on a slightly larger example that will allow you to scrub around a timeline and have effects applied/removed in realtime. Once that's ready I'll post it somewhere for posterity.
Update: Here ya go. This combines Wavesurfer and Tone so you can add whatever effects you want and scrub the timeline to have those effects applied in realtime.
https://gist.github.com/corysimmons/00e0e458b253d415a7537e44c002fd9b
Thank you for your help @katspaugh and @marcelblum ! <3