www.html5rocks.com | .... a top-notch resource for web developers | Awesome List library

Trying in JS to create a single oscillator, with a smooth, non-clicking frequency tone that rapidly turns on and off. Timing for web audio discussed by [Chris Wallace][1]. A timing scheduler can be found by [Aqilah Misuary][2]. This example produces a correct-sounding tone based on the frequency. However, a noticeable click is present. Fixing clicks has been addressed by a posting on [Stack Overflow][3].

First code snippet is based on the Code Pen version (see link 2), changing frequency to 432 Hz.

Second code snippet: Adapted JS (see links 2 and 3) from these resources, adding ramping, using the 432 Hz frequency,I can get the clicking to stop, but my frequency sound is now blunted, no longer has the correct 432 Hz frequency sound. I suspect that I am doing something wrong, not using the timing or settings correctly. I've tried various timings and settings and even "initial" instead of "exponential" ramping, but none have fixed the issue: clicking gone but frequency sound is now blunted, doesn't retain the correct sound based on the frequency chosen and that would be heard if ramping is not used, leaving the clicking. I must be doing something wrong?

Any way to fix the clicking without blunting the sound? [1]: https://www.html5rocks.com/en/tutorials/audio/scheduling/ [2]: https://codepen.io/aqilahmisuary/pen/ONEKVM [3]: Web audio "Click" sound even when using exponentialRampToValueAtTime

I'm making a game made of bare JavaScript code and I want to manipulate audio in JavaScript. Specifically, I want to let the page start playing music when some div element is clicked and when using some function in the JavaScript code.

I know audio tag of HTML5 has a limitation that a music file associated with Audio element cannot be played without user clicking the play button of the audio element, so I cannot do like this:

I programmmed a website which uses text to speech engine to generate audio files.

Then these mp3 files are started using Web Audio API.

Everything works fine when hearing aufio from speakers on a computer or on a smart phone.

However, as soon as I connect my bluetooth helmet to the smart phone, the audio is not played.

Is it a famous issue that Web Audio API doesn't work with bluetooth devices, or does the issue come from my code?

Do I need to change the context's destination ? How can I set it to buetooth? (ex : https://www.html5rocks.com/en/tutorials/webaudio/intro/)

I am using fancybox 3, there is no problem, the thing I want to do is to click on "card-body" and I want the relevant "card" to be opened. I have a situation like that I do not want to be repeated fancybox.

It works in the link I gave below, but it doesn't work when I do.

Example

I found this guide showcasing image filters/effects using canvas and JavaScript: https://www.html5rocks.com/en/tutorials/canvas/imagefilters

Though, I don’t have any idea on how to implement it. I’m not good with JavaScript (I’m a graphic designer), so I’m not even understanding the syntax. I extracted this code from the page, but I don’t know if it’s complete or how to use it:

I tried searching for an answer but could not find a viable one.

Is there a simple way to position the subtitles below the HLML5 video frame?

In other words, I do not want the subtitles / captions to appear inside the video frame itself. I want them to appear approximately 1/2 inch below the video frame.

Currently the subtitles are in a standard .srt file, but I can adapt the subtitles to a method that works for this.

I am also currently using HTML element.

The image below represents what I want to accomplish.

There is a video example here Example by Sam Dutton, but the code he references to Eric Bidelman is a dead link.

On the example page Sam Dutton shows snippets of code, but I can make anything out of it.

Play the example video on the example page to see what I am talking about.

Thank you in advance.

This may seem like a strange question but I'm trying to understand what exactly my code is doing memory wise in order to make it as efficient as possible.

When a database request is made such as req = objectStore.getAll( keyRange ); and the IDBRequest object is returned and the result provided later to the result property of the object, where is the object created? Is it just like any other JS object, allocated and released by the GC; and the variable req is just a reference to it, such that once the reference is broken the GC 'knows' the object is unreachable and releases the memory?

If many such requests are made over a short interval of time, is there a way to not consume additional RAM for each result?

For example, the process I'm interested in is a button click invokes two promises(one write and one read) through a Promise.allSettled, one that writes the current state to the database, and another that retrieves new data and builds a document fragment from it. If both fulfill, the fragment replaces a node in the DOM.

If a user rapidly clicks through this data, every read/getAll returns an IDBRequest with a result that is an array of objects, and that appears to consume more and more RAM until the GC runs. I can observe that the memory is eventually released, but was wondering if there is a way to not have that happen. Since I know what those objects are in terms of maximum size, could I write the IDBRequest to an exsiting object that is like a template object and only ever need one or two of them, such as one for current and one for the new request, rather than continually adding new objects until the GC releases those deemed unreachable?

Thank you for considering my question.

Thanks for the answer concerning where the IDBRequest object is allocated and advice concerning avoidance of memory leaks. Just to add further explanantion of what I was observing and wondering if it were possible, I'm adding this note.

There isn't a single global variable declared in my code, all exist within functions or are properties of a function object; and I set tem to null at the close of every function just in case I missed some scope/closure hidden reference. After finally getting a large portion of I/O within indexedDB working, I started to consider what would happen as a user worked within my application for an hour or two. Would memory use continually increase in the long term, even though I observed no issues during all the building and testing?

I filled the database with 500 data packets, meaning it takes more than one DB object to build a new DOM node; it is anywhere from 15 to 60 objects per node, depending upon what the user builds. So, I made every one of the 500 packets to be comprised of 60 objects and made those objects overly large in size for the testing, far greater than expected during appropriate use of the tool.

Then through a setInterval, the save-state, get-and-build promises were invoked every 500ms from packet 1 to 500; and I observed the data usage at the maro level only. The result appears to be that at any one time, there can be about one hundred of these packets in RAM between the GC runs. As the packets are retrieved, and nodes built and replaced, the RAM usage steadily increases and drops about five times during the traversal from packet 1 to 500. The max level of each increase prior to the drop is a little higher than the previous one. About 45 seconds or so after completion, the memory returns to just about where it was when the setInterval commenced.

Thus, fortunately, I don't think there is a memory leak. However, RAM usage is much as described in this article about using object pools. I'm interested in the graphs under the heading "Reduce Memory Churn, Reduce Garbage Collection taxes"--that saw-tooth pattern that consumes far more memory than is ever needed at any one time, when it could be like the second graph that is smaller, level, and requires fewer GC runs in total.

And the first answer to this SO question, at almost the very end, writes that this causes the GC to have to trace more objects also.

I'm not sure if the GC will run at a lower total RAM consumption or will wait until some maximum level is reached. Of course, I can test that on my machine, but that isn't very definitive overall.

I'm not building a game and a pause for a GC run isn't an issue; and a user should never click through 500 data packets in 250 seconds total and there will never be 500 packets of such a ridiculous size. Perhaps, that test was unrealistic; but the objective was to attempt to exacerbate the effect of using the tool for an extended period of time and generating many, many small objects throughout. Even a get/put for a minor edit creates a new object each time. These are concepts that I hadn't considered before and was just focused on how to get the I/O working accurately first.

When you consider how many objects sit around in RAM for a little while at least, waiting to be garbage collected, it seems reaonsable to simply hold the current packet at all times, such that a get operation is not required for an edit. Just edit the object in RAM and use a put operation only. Then all those get request result objects for edits are never created. But that doesn't eliminate the need for objects to hold the newly requested full data packets.

I understand that the browser's GC process is supposed to make all of this easier but it seems that, by doing so, it takes a lot out of the coders' control; and the advice that I see on SO in other questions is usually to not worry about it unless you experience an issue. I'm just an amateur at best but I'd prefer to understand what is happening in the background and code from the start with that in mind; and perhaps there is some stubbornness on my part that, regardless of how powerful the processor and size of RAM, my little tool ought to use as little resources as necessary or I haven't done my job.

I don't know if an object pool is a good technique anyway, but, even if it were, it appears that it would be an impossibility when it comes to retrieving data from indexedDB because the IDBRequest object is always created anew and could never be written to an existing object.

Thanks again for the explanation.

I understand that memory allocation and release is controlled by the browser; but can allocated memory ever be programmatically re-used in JavaScript?

For example, suppose a function (getData) property (data) is used to store the results of an indexedDB getAll request, as ( I realize you'd never write code like this)

getData.data = objectStore.getAll( keyRange ).result;

Can subsequent invocations of getData re-use the memory already allocated from the previous invocation or will the browser always allocate a new area of memory to hold the result and just point getData.data to it, and later release the memory that held the previous results?

Thank you.

A reason for asking is from observing how memory is used in my application. This getData-type function may be invoked several hundred times in a user session and, as it is now, the RAM consumed continues to increase until a certain point is reached and then it is released. That is how the GC is supposed to work, I realize, but if the already allocated memory could be re-used, the applciation would never need to consume that much RAM at any given point.

I don't think there is a way to accomplish what I was considering because indexedDB will always allocate memory when it retrieves the objects from the object store. The getAll request will return a request object, the result of which will be an array of objects and, even if it were possible to write that result to an already exisiting array or object, nothing would be gained. All my code really only references or points to the result of the request; and the temporary increasing use of RAM usage will always continue until the GC runs, because the database request cannot be directly written to a specific area of memory from its 'creation' so to speak. The request object, including the result, will exist somewhere in RAM before object pooling or any other approach could be attempted.

The testing I mentioned in the comments was unrealistic, being comprised of 500 invocations of getData separated by only 500ms per invocation and the data retrieved in each invocation was far larger than would ever exist in the application under expected use. So, RAM usage had time to increase significantly before the GC ran. The RAM usage rose and fell several times as the 500 invocations processed in turn, each episode, I assume, being a run of the GC. I like the flat RAM usage graph in the object pooling article here which minimizes GC runs; but it doesn't appear achievable when using indexedDB.

In the code below I'm successfully changing the color of the left and right arrows based on how far a div (shadeFinder) has scrolled on the x axis. I want to add throttling to this code. Can someone explain how? I have the example from w3Schools below but finding it hard to merge it into my code.