Audio src example

by Dan Bovey

HTML

<script src="https://unpkg.com/react@latest/dist/react-with-addons.js"></script>
<script src="https://unpkg.com/react-dom@latest/dist/react-dom.js"></script>
<div id="container"></div>

CSS

audio, p, button {
  display: block;
}

Babel + JSX

class App extends React.Component {
  constructor(props) {
    super(props);
    
    this.state = { step: 0 };
  }
  
  nextStep() {
    this.setState({ step: this.state.step + 1 });
  }
  
  reset() {
    this.setState({ step: 0 });
  }
  
  render() {
    const step = this.state.step;
  	return (
    	<div>
          {step == 0 ? (
            <audio
              controls="controls"
              src="http://www.tutorialrepublic.com/examples/audio/birds.mp3"
            />
          ) : step == 1 ? (
            <audio
            controls="controls"
            src="http://www.tutorialrepublic.com/examples/audio/wind.mp3"
            />
          ) : null}
          <p>{step}</p>
          <button onClick={this.nextStep.bind(this)}>next step</button>
          <button onClick={this.reset.bind(this)}>reset</button>
    	</div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('container'));