Giters

anthumchris / fetch-stream-audio

Low Latency web audio playback examples for decoding audio streams in chunks with Fetch & Streams APIs

Home Page:https://fetch-stream-audio.anthum.com

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Using webpack instead of parcel

kboniadi opened this issue · comments

commented

I'm having trouble getting the example code to work when using webpack. This is what I've tried:

package.json:

{
  "name": "fetch-stream-audio",
  "private": true,
  "main": "app.js",
  "scripts": {
    "dev": "./scripts/dev.sh",
    "build": "./scripts/build.sh",
    "clean": "rm -rf build dist",
    "clean-all": "rm -rf .cache build dist node_modules package-lock.json",
    "build-webpack": "webpack --config webpack.config.js",
    "start": "webpack-dev-server"
  },
  "devDependencies": {
    "@babel/core": "^7.0.0-0",
    "@babel/plugin-proposal-class-properties": "^7.7.4",
    "@babel/plugin-transform-runtime": "^7.7.6",
    "babel-eslint": "^10.0.3",
    "cssnano": "^4.1.10",
    "eslint": "^7.1.0",
    "opus-stream-decoder": "^1.2.6",
    "parcel-bundler": "^1.12.4",

    "file-loader": "^5.0.2",
    "webpack": "^4.41.5",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.10.1",
    "worker-loader": "^2.0.0"
  },
  "dependencies": {
    "@babel/runtime": "^7.7.7",
    "lit-html": "^1.1.2",
    "tinyh264": "0.0.6",

    "wasm-loader": "^1.3.0",
    "babel-loader": "^8.2.2"
  }
}

webpack.conf.js:

const path = require('path')

module.exports = {
    mode: "development",
    entry: './src/js/app.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
    },
    resolve: {
        extensions: ['.mjs', '.wasm', '.js', '.json']
    },
    module: {
        rules: [
            {
                test: /\.wasm$/,
                loaders: ['wasm-loader']
            },
            {
                test: /\.mjs$/,
                exclude: /node_modules/,
                // type: "javascript/auto",
                use: {loader: 'babel-loader'}
            },
            {
                test: /\.worker\.js$/,
                use: {loader: 'worker-loader'}
            },
            {
                test: /\.(asset)$/i,
                use: [
                    {
                        loader: 'file-loader',
                        options: {
                            name: '[contenthash].wasm'
                        }
                    },
                ],
            }
        ]
    }
}

index.html was copied to /dist/

<html>
  <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="icon" href="./favicon.ico">
  <meta property="og:image" content="https://fetch-stream-audio-stage.anthum.com/images/icon-share.png">

  <meta name="descripton" content="Low-latency, high quality web audio playback examples with Opus, Streams, and Fetch APIs">
  <meta name="twitter:description" content="Low-latency, high quality web audio playback examples with Opus, Streams, and Fetch APIs">
  <meta property="og:description" content="Low-latency, high quality web audio playback examples with Opus, Streams, and Fetch APIs">

  <title>Streams Audio Playback Examples</title>
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=UA-50610215-8"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'UA-50610215-8');
  </script>
  <script defer src="main.js"></script>                        <!--  I made this change -->
  <link rel="stylesheet" href="../src/css/app.css">       <!--  I made this change -->
</head>
<body>
  <header>
    <h1>Streams Audio Playback Examples</h1>
    <p>Low latency playback of audio chunks using the Fetch, Streams, and Web Audio APIs.</p>
  </header>
  <main>
  </main>
  <footer>
    <a href="https://github.com/AnthumChris/fetch-stream-audio">View on GitHub</a>
  </footer>
</body>
</html>

This is the error I'm getting in chrome console when running "yarn start"

image

Any help would be greatly appreciated.

commented

Hi, @kboniadi. Unfortunately, this may be a good question for StackOverflow, since it's WebPack-specific. I've been moving away from WebPack over the years to reduce simplicity. Would it be ok if we closed this issue? This is not something I'll have time to support at the moment.

commented

Thanks @anthumchris for getting back to me. Yes you can close this issue, and thanks I will probably follow up with a stackoverflow post.