Enhance waveform visualization for worklet-recorder (fixes #375) #422
Conversation
…alization - Enhanced canvas sizing with proper fallback dimensions - Added amplitude multiplier for more dramatic vertical movement - Improved waveform line styling with Material Design blue color - Enhanced scrolling behavior with proper background maintenance - Added better grid line rendering for improved visual reference - Implemented smooth waveform line continuation during scrolling - Fixed Y-axis clamping to prevent drawing outside canvas bounds The waveform now displays more like standard audio software with better amplitude representation and smoother visual continuity.
|
|
|
@mjwilson-google |
|
@mkruisselbrink @zachleat please can you review this pr |
|
Thank you for your work, and sorry about the delay in looking at this. I think we might want to do something different than averaging the amplitude. I will perform a detailed review and give feedback when I have some more time. |
|
@mjwilson-google |
|
@mjwilson-google |
|
Thanks again for your work on this, and your patience waiting for the review.
This GitHub repository is for working on Web Audio sample code. You can email me directly for this sort of question. |
There was a problem hiding this comment.
Thank you for your work on this, it looks like a definite improvement.
The key change I would like to see is to make this a more traditional waveform display, similar to the first example here: https://manual.audacityteam.org/man/audacity_waveform.html
I think this can be done by changing how the lines are drawn, please see code comments.
The current version, both before and after the current form of this PR, shows the average value instead. Averaging isn't a common way to display audio waveforms.
src/library/Waveform.js
Outdated
| // Clamp to canvas bounds to prevent drawing outside | ||
| const clampedY = Math.max(0, Math.min(this.height_, currentY)); | ||
|
|
||
| // Draw the waveform line |
There was a problem hiding this comment.
Here we should draw vertical lines that represent the lowest and highest points the waveform reached in the time range represented by the data array.
We can calculate the minimum and maximum values, then scale them by the height of the waveform display.
Then we can stroke one vertical line at the current X position, between these maximum and minimum values.
src/library/Waveform.js
Outdated
| if (this.canvas_.width < 400) this.canvas_.width = 800; | ||
| if (this.canvas_.height < 200) this.canvas_.height = 400; |
There was a problem hiding this comment.
Are these minimum dimensions necessary? Could this cause layout issues for smaller containers?
There was a problem hiding this comment.
Yes, this waveform display looks more like what I would expect.
There was a problem hiding this comment.
Ok i had commited the changes
please review it
|
@mjwilson-google |
|
@Aditya30ag @mjwilson-google is currently out of office. Thanks for your contribution and patience! |
|
Hello @hoch, |
Overview
This PR resolves issue #375 by significantly improving the waveform visualization in the worklet-recorder application to match standard audio software displays.
Key Improvements
🎨 Enhanced Visual Representation
🔧 Technical Enhancements
📊 Audio Software Comparison
The improved waveform now displays more like standard audio software by:
Testing
Screenshots
The waveform now provides much better visual feedback with enhanced amplitude representation and professional styling that matches industry-standard audio software.
Closes #375