WIP: Modernize howler.js to use native ES modules, export TypeScript definitions, and use a modern build system

[Greenheart]

Hi! Thanks for creating and maintaining this library for so many years! It's clear this has provided immense value to developers all over the world 😄

However, I need native ESM modules for one of my projects, which got me thinking. I didn't want to develop another library like howler.js from scratch (because of all the browser quirks you've already solved and tested here). But I couldn't stick to using the Common JS exports of [email protected].

So I spent this entire day refactoring the core howler.js library into native ES modules, ES classes, upgraded to a modern build system using esbuild, slightly improved the test setup using vite, added native TypeScript definition files, and kept the original public API as well as private implementation details almost entirely intact.

And... After many many hours, on literally the second test run, I got the full test suite for both Web Audio and HTML5 to run successfully!!! This is a extremely promising start 😄

This was made possible thanks to the mostly complete TS definitions from @types/howler, the JS Doc comments and good initial structure in the howler.js codebase, and most importantly - the immense value from using the TypeScript compiler to provide hints during refactoring projects like this one. TypeScript provided a clear progress to see what remained to fix, which was really nice.

Next steps

• Refactor the spatial audio plugin + tests using the same process
• Add support for multiple build exports, to allow users to choose
• Add minified builds and export equivalent ESM versions of the 2.x build output in /dist.
• Cleanup the core modules. Especially around how they currently abuse TypeScript inline type conversions to just get this compiling. However, this kind of defeats the purpose of using TypeScript, and I'm sure the current code of this PR could be improved. But this is acceptable as a WIP state.
• Update examples
• Update documentation, README and similar.
• Discuss how to prepare for a 3.0 release - how to deal with potential breaking changes and provide migration instructions.
• Discuss future possible refactoring - modernize the codebase on the implementation level as well, to export a minimal build for modern browsers only. This would greatly reduce the bundle size for a clear majority of users, and improve performance.

I'd be happy to keep improving this, but I'll need help to test, review and prepare for the 3.0 release. Any feedback and help would be greatly appreciated! :)

[Greenheart]

Muting with Web Audio API doesn't work in Firefox 93 for windows.

Interestingly enough, the 2.x version of the library + tests doesn't work in Firefox either!

In Chrome 94, both the 2.x and 3.x versions work as expected.

Could this be a general bug that is related to the implementation details, rather than the refactoring?

[profispojka]

This is great. It seems to me that howler.js is dead, but if you will continue this work, it would be useful to many. It might not get merged into Howler.js, but if not, I personally will make a new fork of howler.js (with many unmerged PR there also merged, but yours especially as starting point). So please continue, your work will help many.

[goldfire]

@profispojka By no means is howler.js dead. It is a mature library that doesn't need lots of changes all the time, but that doesn't mean work isn't continuing on it.

[profispojka]

Thanks for answering my comment, @goldfire. Sorry to make an incorrect assumption about the state of the library. I checked PRs and some of them were waiting for your action for years, so I assumed Howler is dead. Still many great features (for me essential ones) are unmerged, so a new fork might be a way for me.

[7ombie]

It is a mature library that doesn't need lots of changes all the time.

@goldfire - Six months later, and Howler still doesn't work properly in modern browsers. It clearly needs a lot of changes at this time.

[profispojka]

Hi @7ombie . I have forked the project and published a npm package called loudest. I have merged some pending pull requests, mainly effects, but any new PRs and overall support would be welcomed. @Greenheart

[7ombie]

Hey @profispojka - Nice work.

My issue was the lack of a modern ES6 module. Like many people, I'm a web developer, but not a JavaScript programmer. We don't really use Node, NPM, Webpack or anything like that.

It seemed odd for a project that promotes its use in the browser, but can't be imported (implying the need for a major refactoring), to claim that "it's a mature library that doesn't need changes all the time".

[beefchimi]

In case it will be of interest to anyone in this thread:

I have my own library called earwurm, which is written in TypeScript and packaged for both umd.js and es.js. It does not have the full feature set that Howler has... one day I hope to implement more features. But for now, if all you need is a way to fetch and play .webm files, it is working really well.

[AlexanderMelde]

@goldfire This feature would still be very useful when using howler in typescript projects, do you think there is any chance of implementing this into the main branch someday? :)