music-tempo | Finding out tempo of the music | Audio Utils library
kandi X-RAY | music-tempo Summary
kandi X-RAY | music-tempo Summary
Javascript-library for finding out tempo (BPM) of a song and beat tracking. It uses an algorithm "Beatroot" authored by Simon Dixon.
Support
Quality
Security
License
Reuse
Top functions reviewed by kandi - BETA
- An Agent .
- Initializes controls .
- Constructor for the constant rate .
- Draw a waveform
- Upgrade an element to be upgraded or upgraded .
- Draws the spectrum .
- Registers a registered component .
- Creates a new color .
- Draw scale lines of scales .
- Computes the spectrum of the spectrum
music-tempo Key Features
music-tempo Examples and Code Snippets
Community Discussions
Trending Discussions on music-tempo
QUESTION
void element.offsetWidth;
is a curious line of code that would seem to do nothing, but is required for a CSS animation to work. What does this line do and why is it needed?
If the entire line is commented out, the animation happens once but does not repeat. (It still works if the void
is removed.)
The full code/demo is live here; I tried to copy the relevant excerpts below:
script.js:
...ANSWER
Answered 2020-Mar-14 at 19:30When you make changes to the dom, such as classList.remove('anim')
, this can result in a cascade of changes to the page. Rendering those changes can be expensive, and since it's pretty common that you'll change multiple things in a row, browsers try to batch up accumulated changes and only perform the calculation at the end of what you're doing.
So if that weird line wasn't there, then here's what would happen:
- You remove the class. The browser notes this, but doesn't redraw the screen yet
- You add the class. The browser notes this, but doesn't redraw the screen yet
- Your function finishes, and the browser decides to do the necessary calculations to make the page match what you've asked for... but nothing has changed! You've put the page back into the same state it had before the click handler began. Since nothing has changed, the display stays the same; no animation runs.
What that extra line of code is doing is asking the browser to give you information about the dom. But in order to know what the offsetWidth is, the browser has to abandon its plan of batching the changes and perform the reflow of the page right now. The current state has no run-animation class, which is a change, and so the animation gets reset. And later when the function finishes, it performs the calculations again and sees that you've made yet another change, relative to when it provided you with the offsetWidth, so it applies that too.
In short: You're forcing the browser to do extra work, and it just so happens that in this case that is desirable. In most cases, forcing the browser to do extra work is a bad thing. Most of the time you want to avoid querying the dom in this way, since it can reduce performance.
Another way to get this to work would be to remove the class now, and then add the class a short time later, as in:
Community Discussions, Code Snippets contain sources that include Stack Exchange Network
Vulnerabilities
No vulnerabilities reported
Install music-tempo
Support
Reuse Trending Solutions
Find, review, and download reusable Libraries, Code Snippets, Cloud APIs from over 650 million Knowledge Items
Find more librariesStay Updated
Subscribe to our newsletter for trending solutions and developer bootcamps
Share this Page