audioMotion-analyzer
audioMotion-analyzer copied to clipboard
hvianna
canvas height growing indefinitely while using <div> but not when using <span> (setup: bun+vite)
I cannot understand what's going on here. When I use a
bun and vite and I run the project using bunx --bun vite
I have tried with firefox and edge, same behavior. I have attached a video for you to see, at the end.
Thanks for the help!
here are my files to reproduce:
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<script type="module" src="/main2.js"></script>
</head>
<body>
<span id="ai"></span>
</body>
</html>
my main2.js
import AudioMotionAnalyzer from "audiomotion-analyzer";
let ai = document.getElementById("ai");
if (ai) {
const audioMotion = new AudioMotionAnalyzer(ai);
}
and my package.json
{
"name": "neocertif",
"private": true,
"version": "0.0.1",
"type": "module",
"scripts": {
"dev": "bunx --bun vite",
"build": "bunx --bun vite build",
"preview": "vite preview"
},
"devDependencies": {
"vite": "^5.2.0"
},
"dependencies": {
"@codemirror/lang-python": "^6.1.6",
"audiomotion-analyzer": "^4.4.0",
"codemirror": "^6.0.1",
"prismjs": "^1.29.0"
}
}
https://github.com/hvianna/audioMotion-analyzer/assets/8048877/11986f00-531e-482a-86ee-b74ab730bc2f
ok I have found THE sentence that explains my problem :
Nominal dimensions of the analyzer.
Setting one or both properties to undefined (default) will trigger the fluid/responsive behavior and the analyzer will try to adjust to the container’s height and/or width. In that case, it’s important that you constrain the dimensions of the container via CSS to prevent the canvas from growing indefinitely.
Yes, you can either set a desired height for the analyzer, or constrain your container's height.
Does this information solve the issue for you?
