What is the best way to adapt a wavetable for compatibility with the `OscillatorNode.setPeriodicWave` function?

I am exploring the use of a custom waveform with a WebAudio OscillatorNode. While I have basic programming skills, I am struggling with the mathematical aspects of audio synthesis.

Waveforms are essentially functions, which means I can sample them. However, when it comes to using the 

OscillatorNode.createPeriodicWave
method, I need to provide two arrays (real and imag) that represent the waveform in the frequency domain.

The AnalyserNode has FFT methods for generating an array in the frequency domain, but it requires input from another node which complicates things.

I am unable to figure out how to correctly input a wavetable into the AnalyserNode, and even if I could, it only provides a single array while 

OscillatorNode.createPeriodicWave
needs two arrays.

TLDR In simple terms, how can I determine the necessary arguments for 

OscillatorNode.createPeriodicWave
when starting with a periodic function?

javascriptsignal-processingfftweb-audio-api

Answer №1

To analyze a periodic waveform defined by a function, you can calculate its Fourier Series. If the series has an infinite number of terms, it might be necessary to truncate it for practical purposes.

The process of computing pre-defined Oscillator types involves some effort, similar to how the square wave for the OscillatorNode is defined. The coefficients for the square wave's PeriodicWave were determined using this method.

If you are aware of the bandwidth of your waveform, you can simplify the computation by avoiding complex integrals. By sampling the waveform uniformly at a fast rate and applying FFT, you can obtain the necessary coefficients for the PeriodicWave. More information on this topic can be found in the sampling theorem.

Alternatively, you can assume that the sample rate of the AudioContext is sufficiently high (typically 44.1 kHz or 48 kHz) and sample your waveform accordingly to compute the FFT of the resulting samples at intervals of 1/44100 or 1/48000 seconds.

Answer №2

Recently, I created an innovative implementation. To experience it, simply drag and drop the squares to shape a waveform and then play the piano that follows. Check out a live use example in this tweet. Please note that this demo is in its alpha version, so expect some rough edges in both the code and user interface. Find the source code here.

While I didn't provide formal documentation, I did record coding sessions in a few videos: (Video 1), (Video 2), (Video 3). These should give you a good understanding of how the project was developed. There were a couple of bugs along the way, but I have since fixed them. For the fully functional version, refer to the github link provided.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

VueJS - Input Image Display Issue Causing Browser Slowdown

I'm experiencing some issues with my VueJS component that includes a file input and displays an image afterwards. Strangely, this is causing my web browsers (both Firefox and Chromium) to freeze up and use massive amounts of CPU. I tried switching to ...

javascriptimagefirefoxvue.jschromium

When resetting the function, make sure to move the class to the closest sibling element

I am currently utilizing a slider that employs the .prev and .next jQuery functions to toggle the active class, indicating which slide is being displayed. Here is the code responsible for this functionality. It identifies the current sibling with the acti ...

javascriptjquerycss

AngularJS deferred rendering (not deferred loading views)

Imagine having over 3000 items to display within a fixed-height div using an ng-repeat and setting overflow: auto. This would result in only a portion of the items being visible with the rest accessible via scrollbar. It's anticipated that simply run ...

javascriptangularjs

When it comes to deploying middleware, accessing cookies becomes more challenging. However, in a local setup, Next.js allows middleware to

I have set up a NextJS frontend application with a backend powered by NodeJS and ExpressJS. Authentication and authorization are handled using JWT token-based system, where the backend server sets the token and the frontend server validates it to grant acc ...

javascriptexpressnext.js

tips for sending a chosen item to the Vujes API

How can I send the selected item from a dropdown to an API in Vue.js? <select :v-model="selectedRole" class="custSelect"> <option v-for="option in options" v-bind:value="option.value"> {{option.role}} </option> ...

javascriptvue.jsconsole

Having trouble displaying the Primevue dialog modal in Vue 3?

I am using [email protected] and [email protected] Main script import { createApp } from 'vue' import App from './App.vue' import router from './router' import PrimeVue from 'primevue/config'; import &apos ...

javascriptvue.jsvuejs3primevue

The clearInterval function in Javascript may not effectively halt an ongoing animation

Whenever I press a button, the element rotates using setInterval and clearInterval to stop rotation at a specific value by clearing the interval time t. Everything works perfectly except when I continually click the same button before the current animation ...

javascriptsetintervalclearinterval

Show the comment section only if the initial radio button is selected

I am struggling to implement a comment section that is displayed when the first radio button is checked. Here's the code I have tried: I attempted the following to show the section and test the associated script: <div id="commentaryDiv" ...

javascriptphphtmlradio-button

Empty the password field

<input name="e_password" id="e_password" type="password" autocomplete="off" /> The password field above is causing some trouble as it gets automatically filled in Mozilla, but not in Chrome and IE11. This seems to be retaining values from previous a ...

javascriptjqueryhtml

What is the best way to pass parameters to a PHP script using AJAX to ensure they are properly processed on the server side?

I'm working with the following function: function myFunction () { $.getJSON('remote.php', function(json) { var messages = json; function check() { ... In this function, I call the remote.php script which e ...

javascriptphpjqueryajax

"Incorporate keyframes to create a mouseleave event with a distinctive reverse fade

After posing a similar question a few days back, I find myself encountering yet another hurdle in my project. The task at hand is to switch the background image when hovering over a button with a fade-in effect using @keyframes. However, I'm stuck bec ...

javascripthtmlcss

Difficulty with AngularJs Translation Partials

I have encountered an issue with binding translation. Some objects are converting to their translated value successfully, while others, as mentioned below, are not working. This problem only occurs the first time I build the project. Upon refreshing, every ...

javascriptjqueryhtmlangularjstranslation

Having trouble storing the message ID within the user Object using Mongoose

My goal is to add a message to the messages property (an array) of a user object using Mongoose. However, I encounter an error when trying to save the user (user.save()). To troubleshoot, I added three console.log statements in the code below. Can anyone h ...

javascriptnode.jsangularmongoose

How can you stop a document event listener from triggering?

Utilizing document.addEventListener('touchstart', this.onDocument); allows me to recognize when a user taps outside of an element. However, within my button click handler, the following code is present: toggleItemActive(e) { e.stopPropa ...

javascript

Looking for the quickest hash and salt method for IP addresses in Node.JS?

Currently, there are many stipulations regarding the tracking of user data such as unique visits and returning users. An issue arises in certain regions where IP addresses are considered sensitive personal information. To continue identifying unique user ...

javascriptnode.jsencryptionhash

To trigger the opening of one offcanvas menu from another offcanvas menu

I am facing a small issue with opening an offcanvas from a previous canvas. Typically, I have a canvas set up like this using Bootstrap 5: <button class="btn btn-primary" type="button" data-bs-toggle="offcanvas" data-bs-tar ...

javascripthtmljquerybootstrap-5

What is the process for including an optional ngModelGroup in Angular forms?

I'm encountering an issue with incorporating the optional ngModelGroup in angular forms. Although I am familiar with how to use ngModelGroup in angular forms, I am struggling to figure out a way to make it optional. I have attempted to pass false, nu ...

javascriptangularangular-forms

Encountering issues in transmitting form data to a Node server from Angular

In my Angular application, I am working on creating a registration page with validation. Once the user fills out the form and submits it, the data is sent to the server and saved in MongoDB. This is the approach I have taken: register_user() { const ...

javascriptangulartypescriptexpressmultipartform-data

Linking to an external website using AngularJS for navigation

After developing my angular app, I included an array of menu items that are displayed in the template: <nav id="menu"> <ul> <li ng-repeat="i in menuItems" ui-sref="{{ i | removeSpacesThenLowercase }}" ui-sref-active=" ...

javascriptangularjsangular-ui-routerui-sref

The download of package-lock.json is not initiated for a linked GitHub URL

I currently have two projects on GitHub. One is named "mylibrary" and the other is "test-project." In my "test-project," I have linked "mylibrary" using its GitHub URL in the package.json file as shown below. dependencies: { "mylibrary": "git+ssh://& ...

javascriptnode.jsgithubnpm