Tips for ensuring a seamless audio experience by consistently refilling the buffer/stream without any interruptions or unwanted clicking noises

Is it possible to create a soothing hydrogen sound generator using the web audio API, or am I missing something because of its limitations? I noticed there is no onbufferend or onrequestmoredata functionality, only onended from AudioBufferSourceNode. Can someone confirm if what I'm trying to achieve is feasible?

stackoverflow raised an issue about adding more details, but since my post mainly consists of code, I don't have additional information to provide.

Edit two: Buffer size increased (unnecessarily) and fillAudioBuffer functions offloaded from the main thread. This process works, even though I didn't need to do this in my C++ version. Surprisingly, JavaScript seems slower than expected.

javascriptweb-audio-api

Answer №1

If you're experiencing clicks in your audio playback due to gaps between buffers, here's a potential solution to address this issue:

Try creating two distinct buffers along with accompanying AudioBufferSourceNodes. Assign an onended event handler to each node. Initiate playback of the first buffer and schedule the second buffer to start immediately after the first one finishes.

Upon receiving the onended event, generate a new buffer and source it to commence playing at the conclusion of the second buffer. Implement a fresh onended event handler for this newly created buffer to maintain continuity.

This approach ensures that there will always be a buffer lined up for seamless playback, allowing you to continuously queue up new ones as needed.

To further eliminate any audible transitions between buffers, consider implementing a fade-out/fade-in technique. This can involve gradually decreasing the volume at the end of one buffer (using a gain node) while simultaneously increasing it at the beginning of the next buffer. Alternatively, you could cross-fade the two buffers for a smoother transition.

The fading effects can be achieved through AudioBufferSourceNode AudioParam automations or applied during the buffer filling process for optimal results.

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

Checking at the end of a loop node in JavaScript by reading a file synchronously

const fileSystem = require("fs"); const data = fileSystem.readFileSync("./mytext.txt").toString('utf-8'); const lines = data.split("\n"); while(!data.atEnd()) ^ I'm trying to create a loop that continues until reaching the end of the ...

javascriptnode.js

Having trouble retrieving the DD-MM-YYYY date format in Vue.js from MySQL database

Hi, I am struggling with setting the format of dateCreated (the date when the account was created) to DD-MM-YYYY. In my Vue page, the code looks like this: https://i.sstatic.net/8SSAE.png The issue is that the website displays the date in the format sho ...

javascriptmysqlsqlvue.jsvue-component

Trouble altering material of object using keypress in three.js

I have been attempting to assign colors from an array to my object when a key is pressed, but I am only able to access the first element of the array. Is there another method that could be used for this purpose? One approach I considered was using a rando ...

javascriptthree.js

Double-tap bug with Image Picker in Typescript React Native (non-expo)

Well, here’s the situation - some good news and some bad news. First, the good news is that the code below is functioning smoothly. Now, the not-so-good news is that I find myself having to select the image twice before it actually shows up on the clie ...

javascripttypescriptreact-nativecommand-line-interfacereact-native-image-picker

The perplexing phenomena of Ajax jQuery errors

Hey there! I'm having a bit of trouble with ajax jquery and could use some guidance. $.ajax({ type:"get", url:"www.google.com", success: function(html) { alert("success"); }, error : function(request,status,error) { alert(st ...

javascriptjqueryhtmlajax

Optimizing express server dependencies for a smooth production environment

After developing an application with a React front end and a Node server on the backend, I found myself wondering how to ensure that all dependencies for the server are properly installed when deploying it on a container or a virtual machine. Running npm ...

javascriptnode.jsexpresswebpackdevelopment-environment

Navigate audio tracks with JavaScript

I'm currently facing an issue with using a button to switch between two audio tracks being played in the browser. The method I have implemented switches to the second track, but it doesn't change the audio that is played afterward - instead, it s ...

javascripthtmlaudio

Unable to get the code for automatically refreshing a DIV every 5 seconds to function properly

My Inquiry Regarding DIV Refresh I am having issues with the code below that is supposed to automatically refresh the DIV id refreshDiv every 5 seconds, but it is not working as expected. <div id ="refreshDiv" class="span2" style="text-align:left;"&g ...

javascriptajaxjquery

What is the best way to load varying datasets into a chart without relying on the observer "trickery" with vuecharts.js?

I am currently utilizing charts.js for Vue and facing an issue with pushing a variable number of datasets (including background color, data, and label) to a chart. I expect the data object to be logged as shown in this link, but unfortunately, the datasets ...

javascriptvue.jschart.jsobserversvue-chartjs

Contentful - Unfortunately, this does not meet the criteria for valid JSON

https://i.sstatic.net/CLsT1.jpg My content model includes a field that holds a JSON object. However, when I attempt to input an array into this field, I receive an error stating This is not valid JSON. https://i.sstatic.net/uOVK6.png In another screensh ...

javascriptarraysjsonreactjs

Why does the Hamburger Menu shift my website's logo when it opens?

I'm in the process of implementing a hamburger menu on my website. My attempts have involved adjusting the positioning of both the #logo and .topnav elements. Code Snippet source function myFunction() { var x = document.getElementById("myTopn ...

javascripthtmlcss

The inclusion of HttpClient is causing issues with the functionality of my component

Currently, I am facing an issue with my Angular service called ConnexionService. The problem arises when I try to incorporate CSV files into this service using HttpClient. Strangely, the component associated with this service fails to display once HttpClie ...

javascriptangulartypescript

AngularJS: Implementing bidirectional data binding between two separate controllers using a common service

I'm currently working on establishing a two-way data binding connection between two separate controllers and a shared service in AngularJS: app.factory("sharedScope", function($rootScope) { var scope = $rootScope.$new(true); scope.data = "ini ...

javascriptangularjsangularjs-scopeangularjs-controller

Problem arising from animation not commencing at expected starting point

Creating a feature on an app that involves breathing exercises using CSS animations. The challenge I'm facing is ensuring the words "exhale" and "inhale" appear synchronously with the animation of a circle shrinking and enlarging. However, the animati ...

javascripthtmlcssanimation

Axios - Error: Promise Rejected - The request was unsuccessful with a 500 status code

The Axios post request in my code for adding new articles is not going through, and I am encountering an error: Failed to load resource: the server responded with a status of 500 (Internal Server Error) createError.js:17 Uncaught (in promise) Error: Requ ...

javascriptnode.jsreactjsaxios

Modify the text within the HTML button's class attribute

I've been attempting to change the text on a button in my aspx file by calling code behind, but so far I haven't had any luck. HTML: <button class="radius button" runat="server" id="buttonUpload" onServerClick="buttonUpload_Click" ...

javascripthtmlasp.net

Explaining Vue.js actions and mutations in detail

Can someone help clarify the relationship between these functions for me? I'm currently learning about Vue.js and came across an action that commits a mutation. The Action: updateUser({commit}, user) { commit('setUser', {userId: user[&ap ...

javascriptvue.js

What is the most efficient way to update a counter when a button is clicked in React and display the result on a different page?

Just delving into the world of React and Javascript, I decided to challenge myself by creating a Magic 8 Ball application. Currently, I have set up two main pages: The magic 8 ball game page A stats page to showcase information about the magic 8 ball qu ...

javascriptnode.jsreactjsclient-server

Unable to activate the 'Click' function in Angular/Typescript after selecting element with 'document.querySelector'

In my Angular 8 Project, there is an element on a page with a unique string attached to the attribute 'data-convo-id'. This element has a click function that loads data based on the data attribute specified above. However, without direct access ...

javascriptangulartypescript

Employing a pair of distinct ajax requests

When making two different ajax calls, the first one connects to a method of a web service. If it receives a null value for a specific field, then it should call another method from the same web service. Here is the code snippet: $.ajax({ url: "webservices ...

javascriptjqueryajaxjson