{"id":18964,"library":"audio-worklet-loader","title":"audio-worklet-loader","description":"Webpack loader for Audio Worklet processors, enabling bundling and module resolution for .worklet.js and .worklet.ts files. Version 1.1.0 is stable but explicitly does not support Webpack 4. It can inline worklet code as a Blob to avoid separate chunks, with fallback modes for bundling. This loader fills a niche for web audio applications needing AudioWorklet support in Webpack 5, similar to worker-loader but for audio worklets.","status":"active","version":"1.1.0","language":"javascript","source_language":"en","source_url":"https://github.com/leviance/audio-worklet-loader","tags":["javascript","webpack","audio worklet","audio worklet loader","audio worklet processor"],"install":[{"cmd":"npm install audio-worklet-loader","lang":"bash","label":"npm"},{"cmd":"yarn add audio-worklet-loader","lang":"bash","label":"yarn"},{"cmd":"pnpm add audio-worklet-loader","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Peer dependency required; loader only works with Webpack 5, Webpack 4 not supported.","package":"webpack","optional":false}],"imports":[{"note":"The loader must be applied via inline syntax or webpack config rule; otherwise the import returns the raw module, not the worklet URL.","wrong":"import workletURL from './processor.worklet.js';","symbol":"default (import from worklet file)","correct":"import workletURL from 'audio-worklet-loader!./processor.worklet.js';"},{"note":"Use 'loader' not 'use' in rule; 'use' is for multiple loaders and may cause unexpected behavior. Also ensure loader is applied before ts-loader for .worklet.ts files.","wrong":"module.exports = { module: { rules: [ { test: /\\.worklet\\.js$/, use: 'audio-worklet-loader' } ] } };","symbol":"webpack rule for .worklet.js","correct":"module.exports = { module: { rules: [ { test: /\\.worklet\\.js$/, loader: 'audio-worklet-loader' } ] } };"},{"note":"The inline option accepts string 'fallback' or 'no-fallback', not boolean. Missing or invalid value defaults to undefined (no inlining).","wrong":"options: { inline: true }","symbol":"options inline","correct":"loader: 'audio-worklet-loader', options: { inline: 'no-fallback' }"}],"quickstart":{"code":"// webpack.config.js\nconst path = require('path');\n\nmodule.exports = {\n  entry: './index.js',\n  output: {\n    path: path.resolve(__dirname, 'dist'),\n    filename: 'bundle.js',\n  },\n  module: {\n    rules: [\n      {\n        test: /\\.worklet\\.js$/i,\n        loader: 'audio-worklet-loader',\n        options: { inline: 'no-fallback' },\n      },\n    ],\n  },\n  target: 'web',\n  mode: 'development',\n};\n\n// index.js\nasync function main() {\n  const audioCtx = new AudioContext();\n  const workletUrl = require('audio-worklet-loader!./random-noise.worklet.js');\n  await audioCtx.audioWorklet.addModule(workletUrl);\n  const node = new AudioWorkletNode(audioCtx, 'random-noise');\n  node.connect(audioCtx.destination);\n}\nmain();","lang":"javascript","description":"Minimal Webpack config using audio-worklet-loader with inline option, and an async function that loads an AudioWorklet from the bundled URL."},"warnings":[{"fix":"Use Webpack 5 (>=5.0.0) exclusively.","message":"Webpack 4 is not supported. Do not attempt to use this loader with Webpack 4; it will fail.","severity":"breaking","affected_versions":"1.0.0 - 1.1.0"},{"fix":"Order rules so audio-worklet-loader is first for .worklet.ts files, then ts-loader for other .ts files.","message":"The loader must appear before ts-loader in the rules array when processing .worklet.ts files, otherwise TypeScript compilation will break.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Pass { inline: 'no-fallback' } in options object.","message":"Inline option values are case-sensitive strings: 'fallback' or 'no-fallback'. Using boolean true or misspelling will cause the option to be ignored (no inlining).","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Use import workletURL from 'audio-worklet-loader!./file.worklet.js'; for modern ES modules.","message":"The require() usage in older examples is not technically deprecated but ESM imports are preferred. The loader works with both import and require.","severity":"deprecated","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-25T00:00:00.000Z","next_check":"2026-07-24T00:00:00.000Z","problems":[{"fix":"Ensure webpack config has a rule: { test: /\\.worklet\\.js$/, loader: 'audio-worklet-loader' }","cause":"The rule for .worklet.js files is not correctly defined or the loader is not applied.","error":"Error: Module parse failed: Unexpected token (1:0) in ... The loader may need to be configured."},{"fix":"Check that the rule matches the file extension and the loader is applied. Use 'fallback' mode or omit inline to always get a URL.","cause":"The inline import returned undefined because inline option 'no-fallback' was used but the file wasn't actually inlined (maybe misconfiguration).","error":"TypeError: Cannot read properties of undefined (reading 'addModule') - workletUrl is undefined"},{"fix":"Verify the loader is applied in webpack config and the import path includes the loader prefix: 'audio-worklet-loader!./file.worklet.js'","cause":"The worklet URL returned by the loader is not a proper blob or file URL; likely the loader didn't process the file.","error":"Uncaught DOMException: Failed to execute 'addModule' on 'AudioWorklet': '...url...' is not a valid URL."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}