search

minht11 / local-music-pwa

Lightweight on device music player PWA.
https://snaeplayer.com/
MIT License
154 stars 20 forks source link

Add logarithmic volume control #36

Closed boukew99 closed 4 months ago

boukew99 commented 4 months ago

Creating a volume control that corresponds well with human perception involves applying a logarithmic function. This is because human perception of volume is roughly logarithmic rather than linear.

I had this in my old audio-station project. But I prefer using PWA Snae now! It was unexpectedly good! Thx.

I don't have time to test it, since I am unfamilair with Typescript, but it should work since it is just a transformation of value to powValue. Feel free to refactor it.

netlify[bot] commented 4 months ago

Deploy Preview for heuristic-ptolemy-02be89 ready!

Name Link
Latest commit e6f993db9af22e86b01dd6477ebadf181c9eab71
Latest deploy log https://app.netlify.com/sites/heuristic-ptolemy-02be89/deploys/663cd059ffdc9200082eb9bf
Deploy Preview https://deploy-preview-36--heuristic-ptolemy-02be89.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site configuration.

minht11 commented 4 months ago

HI, thanks for PR. I think this is a good idea. Please check preview deployment volume slider is broken.

boukew99 commented 4 months ago

The volume works now. However the volume slider feedback is now also not linear anymore and arrow key to the left also does not work anymore.

minht11 commented 4 months ago

@boukew99 You should probably leave volume slider state as is and instead set logarithm the value on the audio element itself here https://github.com/minht11/local-music-pwa/blob/406fcbc12ba16d1d792373eda84979c02f5320f8/src/audio/create-audio-player.ts#L159-L163 so UI components can still rely on volume being 0-100.

boukew99 commented 4 months ago

Thanks I was looking for that. So SideEffects is like a Solid.js thing? It works as expected now, linear slider, logarithmic volume.

boukew99 commented 4 months ago

Worth noting Solid.js is used in the Readme?

minht11 commented 4 months ago

@boukew99 are you still planing to work on this?

Thanks I was looking for that. So SideEffects is like a Solid.js thing?

Yes createEffect is Solid.js in some ways similar to React useEffect.

Worth noting Solid.js is used in the Readme?

I am not sure adding to readme is warranted since almost every file has solidjs import and I am rewriting whole app to Svelte anyway.

boukew99 commented 4 months ago

Yeah I added it on my branch, but I don't know how to append it to this PR. The deploy is the latest commit on my branch though it seems.

boukew99 commented 4 months ago

Made a new PR #38 to hopefully do it right.