Clicking noise in production build of 1.0.0

[hyperh]

So when I build production on 0.9.0, 0.10.0, everything is fine. But when I build production on 1.0.0, the sound has this weird clicking noise. I'm on React ^15.4.1.

webpack.prod.js

const path = require('path');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const InlineEnviromentVariablesPlugin = require('inline-environment-variables-webpack-plugin');
const Dotenv = require('dotenv-webpack');
const nodeExternals = require('webpack-node-externals');
const {
  commonRules: commonRulesBase,
  resolveModules,
  publicPath,
  postcssConfig
} = require('./common.config');
const dotenv = require('dotenv');

dotenv.config();

const assetsPath = path.join(__dirname, '..', 'dist', 'public', 'assets');

const commonRules = [
  ...commonRulesBase,
  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: [
        {
          loader: 'css-loader',
          options: {
            modules: true,
            localIdentName: '[path][name]__[local]___[hash:base64:5]'
          }
        },
        {
          loader: 'postcss-loader',
          options: { plugins: postcssConfig }
        }
      ]
    }),
    include: [path.join(__dirname, '..', 'app')],
    exclude: [path.join(__dirname, '..', 'node_modules')]
  },
  {
    test: /\.css$/,
    use: ExtractTextPlugin.extract({
      fallback: 'style-loader',
      use: ['css-loader']
    }),
    include: [path.join(__dirname, '..', 'node_modules')],
    exclude: [path.join(__dirname, '..', 'app')]
  }
];

module.exports = [
  {
    name: 'client',
    devtool: 'source-map',
    context: path.join(__dirname, '..', 'app'),
    entry: ['babel-polyfill', './client'],
    output: {
      path: assetsPath,
      filename: 'bundle.js',
      publicPath
    },
    module: {
      loaders: commonRules
    },
    plugins: [
      new ExtractTextPlugin({
        filename: 'styles/main.css',
        allChunks: true
      }),
      new InlineEnviromentVariablesPlugin(['NODE_ENV']),
      new Dotenv()
    ],
    resolve: {
      modules: resolveModules
    }
  },
  {
    name: 'SSR',
    context: path.join(__dirname, '..', 'app'),
    entry: './SSR',
    target: 'node',
    output: {
      path: assetsPath,
      filename: 'SSR.js',
      publicPath,
      libraryTarget: 'commonjs2'
    },
    module: {
      loaders: commonRules
    },
    externals: nodeExternals({
      whitelist: [/\.(?!(?:jsx?|json)$).{1,5}$/i]
    }),
    plugins: [
      new ExtractTextPlugin({
        filename: 'styles/main.css',
        allChunks: true
      }),
    ],
    resolve: {
      modules: resolveModules
    }
  }
];

[leoasis]

Can you provide a repository with the code so that I can repro the issue? Or maybe something like a link in codesandbox or somewhere where I can run the code and see what's going on.

[nukeop]

I'm experiencing the same issue after updating to 1.0.0. Looking at the console, it switches position to 0 after every update, abruptly stopping and resuming. I'm using react-sound as a controlled component. Values I'm updating the prop "position" with are in blue:

I have to revert to 0.8.0.

[nukeop]

Reverting to 0.10.0 also works. The issue disappears if I stop updating position manually. There might be a problem with how the position state is updated internally in react-sound.

[leoasis]

@nukeop can you provide a quick repro snippet so I can take a look? Can be a repo, a codesandbox link, or any other thing that I can go and install/use

[nukeop]

I'll try to throw something together later today (I encountered the issue in the music player I'm working on but I doubt you want to download the entire program just to check this issue).

Anyway I'm positive that this isn't a problem on my end as I tried the same steps with react-sound 1.0.0 and 0.10.0 and only saw this happening only with 1.0.0.

[leoasis]

Thanks! I'm willing to fix whatever is broken but just want to have a way to repro it in a somewhat easy way

[nukeop]

https://github.com/nukeop/sound-bug

Clone, npm install, npm run dev, and go to localhost:8080 to see the problem

After changing react-sound to 0.10.0 in package json, npm install again and run it to see the problem disappear.

[leoasis]

Fixed and published in https://github.com/leoasis/react-sound/releases/tag/v1.1.0, let me know if this is all ok now! Thanks for filing the issue and the example!

[nukeop]

Yeah it seems to be fixed now. Thanks for the help.