Error: Invalid value for <ellipse> attribute ry="Infinity" when setting display: none; to Waveform with Envelope plugin
#3856
Labels
Comments
|
The error happens when you set display: none on the container. This triggers a redraw event (because the container has "resized", and it errors because the reported height of the container is 0. This affects the spectrogram plugin implementation too. A minimal implementation: // Spectrogram plugin
import WaveSurfer from 'wavesurfer.js'
import Spectrogram from 'wavesurfer.js/dist/plugins/spectrogram.esm.js'
// Create an instance of WaveSurfer
const ws = WaveSurfer.create({
container: '#waveform',
waveColor: 'rgb(200, 0, 200)',
progressColor: 'rgb(100, 0, 100)',
url: '/examples/audio/audio.wav',
sampleRate: 44100,
})
// Initialize the Spectrogram plugin
ws.registerPlugin(
Spectrogram.create({
labels: true,
height: 200,
splitChannels: true,
scale: 'mel', // or 'linear', 'logarithmic', 'bark', 'erb'
frequencyMax: 8000,
frequencyMin: 0,
fftSamples: 1024,
labelsBackground: 'rgba(0, 0, 0, 0.1)',
}),
)
// Play on click
ws.once('interaction', () => {
document.getElementById('waveform').style.display = 'none'
})
/*
<html>
<div id="waveform"></div>
<p>
📖 <a href="https://wavesurfer.xyz/docs/modules/plugins_spectrogram">Spectrogram plugin docs</a>
</p>
</html>
*/
It may be possible to prevent the error with a 'redraw' handler, but I haven't figured out how. |
We should probably fix the math and handle a zero container size. |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Bug description
I get an error/warning in my browser console
Error: Invalid value for <ellipse> attribute ry="Infinity"when adding adisplay:none;styling to the waveform player which uses the envelope plugin. The error is shown for every x and y point in the envelope, so e.g. the minimal example below generates 6 errors.It seems like the points get assigned new coordinates with a value of Infinity, but I can't find out why or where.
It does not break anything else though. The hiding and unhiding works fine and all points on the envelope and waveform keep working as expected.
Environment
Minimal code snippet
In a Svelte component + TailwindCSS ('hidden' class adds
display:none;to an element)Expected result
No errors
Obtained result
Screenshots
The text was updated successfully, but these errors were encountered: