反应：如何播放声音？

Question

有一个(%i1) log((A^n)/(B^n)), logexpand=super; (%o1) log(A) n - log(B) n (%i2) %, logcontract; A (%o2) log(-) n B 元素具有一个子<button>元素。按钮的<audio>被传递到id函数中，该函数选择playSound()元素的src。但是，当尝试使用<audio>播放声音时，会出现错误：sound.play();。

单击按钮时如何播放声音？任何帮助将不胜感激。

index.js：

sound.play is not a function

index.html：

import React from 'react';
import ReactDOM from 'react-dom';
//import './style.css';


class DrumMachine extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
    this.playSound = this.playSound.bind(this);
    this.handleKeyPress = this.handleKeyPress.bind(this);

  }

  componentDidMount() {
    document.addEventListener('keydown', this.handleKeyPress);
  }

  componentWillUnmount() {
    document.removeEventListener('keydown', this.handleKeyPress);
  }

  handleKeyPress(e) {
    if (e.keyCode === this.props.keyCode) {
      this.playSound();
    }
  }

  playSound(id) {
    let sound = document.getElementById(id).childNodes[0].src;
    console.log(sound)
    sound.play();
  }

  render() {
    return (
      <div id="drum-machine">
      <h1 id="title">Drum Machine</h1>
      <div id="display"></div>
      <div>
      <button id="81" className="drum-pad" onClick={e => this.playSound(e.target.id)}><audio className="clip" id="Q" src='https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'></audio> Q </button>
      </div>
      </div>
    );
  }
}

ReactDOM.render(<DrumMachine />, document.getElementById("app"));