react-audio-example

HTML

<script src="https://unpkg.com/react-audio-vision"></script>
<div id="app"></div>

CSS

html, body, #app, .demo {
  height: 100%;
  background-color: #000;
}

.demo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.react-audio-vision {
  margin-top: 40px;
}

React

class AudioVisionExample extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      src: 'https://golb-1256296192.cos.ap-shanghai.myqcloud.com/1.mp3',
      pause: false
    }
  }
  
  handleButtonClick() {
    this.setState({
      pause: !this.state.pause
    })
  }
  
  handleFilePick(e) {
    const file = e.target.files[0]
    if (/^audio\//.test(file.type)) {
      this.setState({
        src: file
      })
    } else {
      window.alert('Pick an audio file')
    }
  }
  
  render() {
    const { src, pause } = this.state
    return (
      <div className="demo">
        
        <AudioVision
          // audio source, can be a string (a url that triggers an XMLHttpRequest) or a blob
          // 音频源，字符串（音频的 url 地址，会触发 XMLHttpRequest 请求）或 Blob 类型
          src={src}
          
          // canvas width, number
          // canvas 的宽度，数字类型
          width={250}
          
          // canvas height, number
          // canvas 的高度，数字类型
          height={100}
          
          // number of bars, must be a power of two in the range of [16, 16384]
          // 色块的数量，必须是在 [16, 16384] 范围内的 2 的幂
          bars={128}
          
          // color of bars, can be a string or a string array
          // 色块的颜色，字符串或字符串数组
          barColor={['crimson', 'gold']}
          
          // pause the audio or not, boolean
          // 是否暂停播放，布尔型
          pause={pause}
          
          // audio play volume, number between 0 and 1
          // 音频播放音量，介于 0 和 1 之间的数字
          volume={0.6} />
          <div className="controls">
          <input type="file" onChange={this.handleFilePick.bind(this)} />
          <button onClick={this.handleButtonClick.bind(this)}>{ pause ? 'Resume' : 'Pause' }</button>
        </div>
      </div>
    )
  }
}

ReactDOM.render(<AudioVisionExample />, document.querySelector("#app"))