mirror of https://github.com/captbaritone/webamp.git synced 2026-07-27 03:54:24 +00:00

No description

html5 javascript port reimplementation webaudio-api winamp

Find a file

Eris Lund e242054ec6 Improved Winamp Visualizer by @x2nie (#1260 ) * Improved Winamp Visualizer by @x2nie This contains work started by @x2nie and continued by me. There's a lot that's either broken and/or unfinished. The main goal of this PR is to improve the visualizer of Webamp, bringing improvements to the Oscilloscope and Spectrum analyzer rendering. Improving the Oscilloscope was achieved by taking the rendering code from the Equalizer and implanting it into the small visualizer box done by x2nie, improving the Spectrum Analyzer involved ditching the Web Audio API in favor of FFTNullsoft, providing a much more accurate representation of the audio. The spectrum analyzer code (at least for the thicker bands) was redone that makes use of reverse engineered code from Winamp 2.65, more specifically how the bar chunking is achieved as well as how the peaks are calculated (this is broken). * Fixed analyzer responding to data immediately Various code comments explaining the purpose behind the new implementation Peaks are no longer visible at the bottom * Added support for windowshade mode (colors are broken) Replaced old Visualizer in the Playlist Editor in favor of the new Visualizer * Fixed analyzer exceeding bounds in unwindowshaded mode * Removed paintFrameThin() since it's now no longer needed (processing happens in paintFrameWide()) Also removed paintWavSolid() since that too is now processed in paintWavLine Removed variables no longer in use Adjusted how the FFT data is first processed in Vis.tsx and how that affects the thin and wide modes (they should now be consistent in volume) * Add proper windowshade mode visualizer support (adapts correctly to doublesize too!) Proper color handling for the Spectrum Analyzer if in windowshade and double size mode Removed comemnts/functions no longer in use * Visualizer is now pushed down by 2 pixels if not in double size mode Fixed "doubled" not being able to be used outside of Vis.tsx Set up base for eventual additional parameters that can be passed to the visualizer Consolidate paintWavDot into paintWavLine Remove dispose() * Fixed accidentally setting oscStyle to "dots" for testing (oops) * New (non-working) parameter: "sa", dictates vis mode Allowed "mode" to be modifiable Adjusted frequency scaling of the FFT * Maybe fix deploy issues? * Replace rangeByAmplitude with a colorIndex function Attempt at addressing a few comments from the PR review * Missed a few variables that weren't in camelCase Finetuned the data going into timeToFrequencyDomain * Move FFT stuff into VisPainter.ts Attempt at addressing more of the PR review * Moved the FFT to be part of BarPaintHandler, instead of being global Added checking for the state of the Main Window so that the Playlist Editor visualizer no longer bugs out like it did (incorrectly showing the small visualizer, or showing the full capacity of it) Changed the global variable `i` to be `chunk` to avoid potential issues Ensure `y` is scaled down (in the y axis) correctly when in windowshade mode Skip rendering of the Oscilloscope in the windowshade mode to avoid it drawing out of bounds Missed a few variables that werent in camelCase (again) * Missed implementing the solid mode drawing a pixel instead of a filled line if x is 0 and if visualizer is small * Readded drawing the visualizer background Prevent saPeaks from going "out of bounds" when the main window is in windowshade mode * Missed accounting for the Playlist Editor Visualizer w.r.t to the background if Main Window was not visible, in windowshade mode and not in double size * Addressing comments of the recent review Fixes FFT being corrupted when multiple instances of Webamp exist and are playing at the same time Fixes multiple Webamp instances fighting over what the current state of the Main Window really is Moved a lot of global mutable variables to instead be owned by BarPaintHandler and PaintWavHandler Renamed visualizer functions since they now handle a lot of things * Make canvas required * Ensure bars are split only in "wide" bandwidth * Some small FFTNullsoft cleanup * Call ``painter.prepare()`` only when doublesize is engaged/disengaged * Confirmed order of Visualization modes VisPaintHandler is an abstract class (is that how you do it?) Instead of logging to console about paintBarLine reusing code from "Fire mode", it's been replaced with a code comment * move ``processFFT()`` out of ``Painter.prepare()`` It never had a place there anyway		2025-01-11 21:35:32 -08:00
.github/workflows	Shorter hashes?	2024-10-02 19:38:01 -07:00
.yarn/releases	Try locking Yarn version (#1066 )	2021-02-13 19:50:09 -08:00
config	Get Jest tests passing	2024-03-01 15:30:09 -08:00
examples	Upgrade webpack in example	2024-10-02 21:25:58 -07:00
packages	Improved Winamp Visualizer by @x2nie (#1260 )	2025-01-11 21:35:32 -08:00
.editorconfig	Format css according to prettier default config	2018-10-20 10:12:19 -07:00
.eslintignore	Try harder to use monorepo version	2022-09-20 22:07:45 -07:00
.eslintrc	Upgrade eslint	2022-05-07 12:35:48 -07:00
.gitattributes	Update .gitattributes	2023-03-27 20:26:22 -07:00
.gitignore	First attempt at adopting Parcel (#1186 )	2023-01-20 11:15:39 -08:00
.parcelrc	First attempt at adopting Parcel (#1186 )	2023-01-20 11:15:39 -08:00
.prettierignore	Fix prettier ignore	2024-03-01 23:50:31 -08:00
.yarnrc	Try locking Yarn version (#1066 )	2021-02-13 19:50:09 -08:00
deploy.sh	First attempt at adopting Parcel (#1186 )	2023-01-20 11:15:39 -08:00
LICENSE.txt	Fix links in root README	2020-07-03 22:02:09 -07:00
netlify.toml	Normalize on pointer events since they should work for both mobile and desktop (#1253 )	2024-04-21 12:49:06 -07:00
package-lock.json	0.0.0-next-87012d8d	2024-10-02 09:01:51 -07:00
package.json	0.0.0-next-87012d8d	2024-10-02 09:01:51 -07:00
pnpm-lock.yaml	Revert "Change polyfill (#1278 )"	2024-10-06 12:16:35 -07:00
pnpm-workspace.yaml	Checkpoint of pnpm adoption	2024-05-28 21:51:23 +01:00
README.md	Remove tests badge (This is in the github ui now)	2024-10-06 11:07:48 -07:00
yarn.lock	Upgrade Grats and adopt new patterns	2024-12-15 22:39:16 -08:00

README.md

Webamp

A reimplementation of Winamp 2.9 in HTML5 and JavaScript with full skin support. As seen on TechCrunch, Motherboard, Gizmodo, Hacker News (1, 2, 3, 4), and elsewhere.

Check out this Twitter thread for an illustrated list of features. Works in modern versions of Edge, Firefox, Safari and Chrome. IE is not supported.

Add Webamp to Your Site

Here is the most minimal example of adding Webamp to a page:

<div id="app"></div>
<script src="https://unpkg.com/webamp"></script>
<script>
    const app = document.getElementById("app")
    const webamp = new Webamp();
    webamp.renderWhenReady(app);
</script>

For more examples, including how to add audio files, check out examples/ directory and the API documentation.

About This Repository

Webamp uses a monorepo approach, so in addition to the Webamp NPM module, this repository contains code for a few closely related projects and some pieces of Webamp which are published as standalone modules:

packages/webamp: The Webamp NPM module
packages/webamp/demo: The demo site which lives at webamp.org
packages/ani-cursor: An NPM module for rendering animiated .ani cursors as CSS animations
packages/skin-database: The server component of https://skins.webamp.org which also runs our Twitter bot, and a Discord bot for our community chat
packages/skin-museum-client: The front-end component of https://skins.webamp.org.
packages/winamp-eqf: An NPM module for parsing and constructing Winamp equalizer preset files (.eqf)
packages/archive-org-webamp-integration-tests: An integration that confirms that archive.org's Webamp integration is working as expected
packages/webamp-modern: A prototype exploring rendering "modern" Winamp skins in the browser
examples: A few examples showing how to use the NPM module

Community

Join our community chat on Discord: https://discord.gg/fBTDMqR

Related communites:

Winamp Community Update Pack - "New plug-ins to add additional features to Winamp as well as replacement plug-ins to provide better implementations of some of the plug-ins natively included with Winamp". (Forum / Discord server)

In the Wild

An incomplete list of websites using Webamp:

Internet Archive - The Internet Archive lets you preview winamp skins and listen to audio tracks using Webamp
Winampify.io - An online Spotify client using Webamp
Webamp Desktop - An Electron app version of Webamp
98.js.org - A Windows 98 clone in JavaScript (GitHub)
winxp.now.sh - A Windows XP clone in JavaScript with React (GitHub)
Try Andy's Desk - A quirky Windows themed desktop experience.
www.dkdomino.zone - Someone's personal music player

Thanks

Butterchurn, the amazing Milkdrop 2 WebGL implementation. Built and integrated into Webamp by: jberg
Research and feature prototyping: @PAEz
Beta feedback, catching many small UI inconsistencies: LuigiHann
Beta feedback and insider answers to obscure Winamp questions: Darren Owen
Donating the webamp NPM module name: Dave Eddy

Thank you to Justin Frankel and everyone at Nullsoft for Winamp which inspired so many of us.

License

While the Winamp name, interface, and, sample audio file are surely property of Nullsoft, the code within this project is released under the MIT License. That being said, if you do anything interesting with this code, please let me know. I'd love to see it.