RangeError: options.width should be a strictly positive integer value. [0]

[yanbeixiang]

I throw the following exception when I use it. Do you know what the reason is?

[chrisn]

This happens because the width of the container element for the overview waveform view is zero.

Take a look here and here. Are you passing your own template?

[yanbeixiang]

@chrisn thanks.

still have a question

[zachsa]

This happens because the width of the container element for the overview waveform view is zero.

Take a look here and here. Are you passing your own template?

I get the same error, and the waveform container definitely has width (set to 100%). When I use the document inspector the canvas element clearly has space.

[chrisn]

Hi @zachsa, I'd like to track down what's causing this. Are there any more details, or maybe a minimal example you can share?

[zachsa]

Hi @zachsa, I'd like to track down what's causing this. Are there any more details, or maybe a minimal example you can share?

Hi @chrisn. I'm using it in a react component like this:

class PeaksJs extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      myAudioContext: new window.AudioContext(),
      peaks: null
    }
  }

  componentDidMount() {
    this.state.peaks = Peaks.init({
      container: document.querySelector('#peaks-js-container'),
      mediaElement: document.querySelector('audio'),
      audioContext: this.state.myAudioContext,
      logger: console.error.bind(console),
      height: 125,
      ...
    })
  }

  render() {
    return <div style={{width: '100%'}}>
            <Cell size={12}>
              <Card>
                <div id="peaks-js-container">
                  <audio controls id="audio">
                    <source src="/141.mp3" />
                    This browser does not support audio. Please use a recent version of Chrome
                  </audio>
                </div>
              </Card>            
            </Cell>
        </div>
  }
}

The Grid/Cells come from a 'react-md' - this is a component library: https://react-md.mlaursen.com/getting-started/prerequisites. I think that the grid is achieved via flex-box.

Hope this is helpful - let me know if you would like more information.

[loretoparisi]

I get the same error

peaks.min.js:1 Uncaught RangeError: options.width should be a strictly positive integer value. [0]
    at module.exports.resample (peaks.min.js:1)
    at Peaks.<anonymous> (peaks.min.js:1)
    at Peaks.EventEmitter.emit (peaks.min.js:1)
    at peaks.min.js:1

I'm running a HTML audio tag, and using range query when scrubbing, but the problem comes out at load time, so before any scrubbing.

[slowpiou]

hey guys,

Is that possible that this error is related to the data input? I create a 'peaks.json' via audiowaveform with a 61Mo mp3 file, it's ok. But with a 64Mo mp3 file or higher, I got the same error.