Skip to content

Conversation

@christriants
Copy link

@christriants christriants commented Nov 18, 2025

Description

Addresses: #8498

This PR adds support for logarithmic (perceptual) volume control to Video.js, providing a more natural audio experience that better matches human perception of loudness. When enabled via the logarithmicVolume option, the volume slider uses decibel-based scaling where linear slider movements produce logarithmic volume changes, making volume adjustments feel more consistent across the entire range.

The Problem:

As discussed in issue #8498, traditional linear volume control doesn't match how humans perceive sound. With linear scaling:

  • Moving from 10% to 20% can feel like a huge jump in loudness
  • Moving from 80% to 90% is barely noticeable
  • Fine control at low volumes is difficult, making it hard to find a comfortable quiet listening level

Specific Changes proposed

Logarithmic volume control solves this by using decibel (dB) scaling, the audio engineering standard that matches human hearing perception (source). This implementation provides finer control at lower volumes where precision matters most - the first 50% of the slider covers roughly 0-6% of actual volume. This solution remains fully backward compatible - linear volume remains the default behavior.

Usage:

const player = videojs('my-video', {
  logarithmicVolume: true,
  logarithmicVolumeRange: 50
});

New VolumeTransfer class:

  • src/js/utils/volume-transfer.js - Volume transfer functions for converting between slider position and player volume
  • includes VolumeTransfer (base class), LinearVolumeTransfer (default, maintains current behavior), and LogarithmicVolumeTransfer (decibel-based scaling)

Updates to VolumeBar:

  • src/js/controls/volume-control/volume-bar.js
  • Added initVolumeTransfer_() to initialize transfer function based on logarithmicVolume option
  • Updated handleMouseMove(), getPercent(), stepForward(), and stepBack() to use transfer functions

New Player Options:

  • Added logarithmicVolume option (boolean, default: false)
    Added logarithmicVolumeRange option (number, default: 50)

Tests:
test/unit/utils/volume-transfer.test.js - Test suite covering both transfer implementations

Test Page:
https://christriants.github.io/video.js/sandbox/logarithmic-volume.html

Requirements Checklist

  • Feature implemented / Bug fixed
  • If necessary, more likely in a feature request than a bug fix
    • Change has been verified in an actual browser (Chrome, Firefox, IE)
    • Unit Tests updated or fixed
    • Docs/guides updated
    • Example created (starter template on JSBin)
    • Has no DOM changes which impact accessiblilty or trigger warnings (e.g. Chrome issues tab)
    • Has no changes to JSDoc which cause npm run docs:api to error
  • Reviewed by Two Core Contributors

@welcome
Copy link

welcome bot commented Nov 18, 2025

💖 Thanks for opening this pull request! 💖

Things that will help get your PR across the finish line:

  • Run npm run lint -- --errors locally to catch formatting errors earlier.
  • Include tests when adding/changing behavior.
  • Include screenshots and animated GIFs whenever possible.

We get a lot of pull requests on this repo, so please be patient and we will get back to you as soon as we can.

@christriants christriants force-pushed the feat/volume-slider-logarithmic branch from 2ebb9a9 to 10ac980 Compare November 18, 2025 14:12
@christriants christriants force-pushed the feat/volume-slider-logarithmic branch 2 times, most recently from 3c3be5d to 90c3f5b Compare November 18, 2025 14:15
@christriants christriants force-pushed the feat/volume-slider-logarithmic branch from 90c3f5b to f7e8515 Compare November 18, 2025 15:13
@christriants christriants force-pushed the feat/volume-slider-logarithmic branch from f7e8515 to 83a499b Compare November 18, 2025 22:09
@codecov
Copy link

codecov bot commented Nov 19, 2025

Codecov Report

❌ Patch coverage is 67.34694% with 16 lines in your changes missing coverage. Please review.
✅ Project coverage is 84.24%. Comparing base (20f8d76) to head (83a499b).
⚠️ Report is 1 commits behind head on main.

Files with missing lines Patch % Lines
src/js/control-bar/volume-control/volume-bar.js 27.27% 16 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #9124      +/-   ##
==========================================
- Coverage   84.89%   84.24%   -0.65%     
==========================================
  Files         120      121       +1     
  Lines        8154     8199      +45     
  Branches     1964     1971       +7     
==========================================
- Hits         6922     6907      -15     
- Misses       1232     1292      +60     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@christriants christriants force-pushed the feat/volume-slider-logarithmic branch from d0a004f to 9a8063f Compare November 19, 2025 20:50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant