Javascript 在游戏中播放声音

如何在React中的父元素上单击audio onClick播放声音。我不确定什么是正确的方法。有人建议我使用REF，但以什么方式？把它们放在哪里？在包含音频标签或音频标签本身的div上？但当我点击时，我点击的是div，而不是音频标签。那么，当您单击音频的父级时，如何播放音频中的声音呢？ 这是我的密码：

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

class DrumMachine  extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            pressedKey: null,
            display: null,
            sliderVal: 50,
            volume: 0.5,
            mySwitch: true,
            mySwitchBox: true,
            prevVolume:  0.5,
            fancy: false,
        };
        this.handleClick = this.handleClick.bind(this);
        this.keyPress = this.keyPress.bind(this);
        this.handleVolume = this.handleVolume.bind(this);
        this.onOff = this.onOff.bind(this);
        this.fancyToggle = this.fancyToggle.bind(this);
        this.myRef = React.createRef();
        this.mySwitchOn = React.createRef();
        this.mySwitchOff = React.createRef();

        //Refs of audio elements.
        this.Q = React.createRef();
        this.W = React.createRef();
        this.E = React.createRef();
        this.A = React.createRef();
        this.S = React.createRef();
        this.D = React.createRef();
        this.Z = React.createRef();
        this.X = React.createRef();
        this.C = React.createRef();

        //Refs of divs who are parents of audio.
        this.H1 = React.createRef();
        this.H2 = React.createRef();
        this.H3 = React.createRef();
        this.H41 = React.createRef();
        this.H6 = React.createRef();
        this.Dsc_Oh = React.createRef();
        this.Kick_n_Hat = React.createRef();
        this.RP4_KICK_1 = React.createRef();
        this.Cev_H2 = React.createRef();

        this.myRange = React.createRef();

        this.sounds = {
            sound1: null,
            sound2: null,
            sound3: null,
            sound4: null,
            sound5: null,
            sound6: null,
            sound7: null,
            sound8: null,
            sound9: null
        };

        this.parents = {
            parent1: null,
            parent2: null,
            parent3: null,
            parent4: null,
            parent5: null,
            parent6: null,
            parent7: null,
            parent8: null,
            parent9: null
        };

        this.tracks = {
            track1: ["https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3", "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"],
            track2: ["https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3"],
        };

        this.Id = {
            id1: ["Heater-1", "Heater-2", "Heater-3", "Heater-4", "Clap", "Open-HH", "Kick n' Hat", "Kick", "Closed-HH"],
            id2: ["Chord-1", "Chord-2", "Chord-3", "Shaker", "Open-HH", "Closed-HH", "Punchy-Kick", "Side-Stick", "Snare"],
        };

    }

    componentDidMount() {
        window.addEventListener("keydown", this.keyPress);

        this.sounds = {
            sound1: ReactDOM.findDOMNode(this.Q.current),
            sound2: ReactDOM.findDOMNode(this.W.current),
            sound3: ReactDOM.findDOMNode(this.E.current),
            sound4: ReactDOM.findDOMNode(this.A.current),
            sound5: ReactDOM.findDOMNode(this.S.current),
            sound6: ReactDOM.findDOMNode(this.D.current),
            sound7: ReactDOM.findDOMNode(this.Z.current),
            sound8: ReactDOM.findDOMNode(this.X.current),
            sound9: ReactDOM.findDOMNode(this.C.current)
        };

        this.parents = {
            parent1: ReactDOM.findDOMNode(this.H1.current),
            parent2: ReactDOM.findDOMNode(this.H2.current),
            parent3: ReactDOM.findDOMNode(this.H3.current),
            parent4: ReactDOM.findDOMNode(this.H41.current),
            parent5: ReactDOM.findDOMNode(this.H6.current),
            parent6: ReactDOM.findDOMNode(this.Dsc_Oh.current),
            parent7: ReactDOM.findDOMNode(this.Kick_n_Hat.current),
            parent8: ReactDOM.findDOMNode(this.RP4_KICK_1.current),
            parent9: ReactDOM.findDOMNode(this.Cev_H2.current)
        };
    }

    componentWillUnmount() {
        window.removeEventListener("keydown", this.keyPress);

        this.sounds = {
            sound1: ReactDOM.findDOMNode(this.Q.current),
            sound2: ReactDOM.findDOMNode(this.W.current),
            sound3: ReactDOM.findDOMNode(this.E.current),
            sound4: ReactDOM.findDOMNode(this.A.current),
            sound5: ReactDOM.findDOMNode(this.S.current),
            sound6: ReactDOM.findDOMNode(this.D.current),
            sound7: ReactDOM.findDOMNode(this.Z.current),
            sound8: ReactDOM.findDOMNode(this.X.current),
            sound9: ReactDOM.findDOMNode(this.C.current)
        };

        this.parents = {
            parent1: ReactDOM.findDOMNode(this.H1.current).id,
            parent2: ReactDOM.findDOMNode(this.H2.current).id,
            parent3: ReactDOM.findDOMNode(this.H3.current).id,
            parent4: ReactDOM.findDOMNode(this.H41.current).id,
            parent5: ReactDOM.findDOMNode(this.H6.current).id,
            parent6: ReactDOM.findDOMNode(this.Dsc_Oh.current).id,
            parent7: ReactDOM.findDOMNode(this.Kick_n_Hat.current).id,
            parent8: ReactDOM.findDOMNode(this.RP4_KICK_1.current).id,
            parent9: ReactDOM.findDOMNode(this.Cev_H2.current).id
        };
    }

    keyPress(event){

        let myKey = event.key;
        let displayId;

        switch (myKey.toUpperCase()) {
            case this.Q.current.id:
                this.sounds.sound1.volume = this.state.volume;
                this.sounds.sound1.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent1.id;
                }

                break;
            case this.W.current.id:
                this.sounds.sound2.volume = this.state.volume;
                this.sounds.sound2.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent2.id;
                }

                break;
            case this.E.current.id:
                this.sounds.sound3.volume = this.state.volume;
                this.sounds.sound3.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent3.id;
                }

                break;
            case this.A.current.id:
                this.sounds.sound4.volume = this.state.volume;
                this.sounds.sound4.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent4.id;
                }

                break;
            case this.S.current.id:
                this.sounds.sound5.volume = this.state.volume;
                this.sounds.sound5.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent5.id;
                }

                break;
            case this.D.current.id:
                this.sounds.sound6.volume = this.state.volume;
                this.sounds.sound6.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent6.id;
                }

                break;
            case this.Z.current.id:
                this.sounds.sound7.volume = this.state.volume;
                this.sounds.sound7.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent7.id;
                }

                break;
            case this.X.current.id:
                this.sounds.sound8.volume = this.state.volume;
                this.sounds.sound8.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent8.id;
                }

                break;
            case this.C.current.id:
                this.sounds.sound9.volume = this.state.volume;
                this.sounds.sound9.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent9.id;
                }

                break;
            default:

        }

        this.setState({
            display: displayId,
        });

    }

    handleClick(e){

        let displayId;

        switch (e.target.id) {
            case this.H1.current.id:
                this.sounds.sound1.volume = this.state.volume;
                this.sounds.sound1.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent1.id;
                }

                break;
            case this.H2.current.id:
                this.sounds.sound2.volume = this.state.volume;
                this.sounds.sound2.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent2.id;
                }

                break;
            case this.H3.current.id:
                this.sounds.sound3.volume = this.state.volume;
                this.sounds.sound3.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent3.id;
                }

                break;
            case this.H41.current.id:
                this.sounds.sound4.volume = this.state.volume;
                this.sounds.sound4.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent4.id;
                }

                break;
            case this.H6.current.id:
                this.sounds.sound5.volume = this.state.volume;
                this.sounds.sound5.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent5.id;
                }

                break;
            case this.Dsc_Oh.current.id:
                this.sounds.sound6.volume = this.state.volume;
                this.sounds.sound6.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent6.id;
                }

                break;
            case this.Kick_n_Hat.current.id:
                this.sounds.sound7.volume = this.state.volume;
                this.sounds.sound7.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent7.id;
                }

                break;
            case this.RP4_KICK_1.current.id:
                this.sounds.sound8.volume = this.state.volume;
                this.sounds.sound8.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent8.id;
                }

                break;
            case this.Cev_H2.current.id:
                this.sounds.sound9.volume = this.state.volume;
                this.sounds.sound9.play();

                if(this.state.volume===0){
                    displayId = null;
                }
                else{
                    displayId = this.parents.parent9.id;
                }

                break;
            default:

        }

        this.setState({
            display: displayId,
        });

    }

    handleVolume(e){

        this.setState({
            volume: e.target.value/100,
            sliderVal: e.target.value,
            prevVolume: e.target.value/100,
        });

    }

    onOff(e){

        if(this.state.mySwitch){
            this.setState({
                mySwitch: !this.state.mySwitch,
                mySwitchBox: !this.state.mySwitchBox,
                volume: 0,
            });
        }
        else{
            this.setState({
                mySwitch: !this.state.mySwitch,
                mySwitchBox: !this.state.mySwitchBox,
                volume: this.state.prevVolume,
            });
        }

    }


    fancyToggle(e){
        this.setState({
            fancy: e.target.checked
        });

    }

    render(){

        const displayId = this.state.display ? this.state.display : "No sound";
        const mySwitch = this.state.mySwitch ? "switchOn" : "switchOff";
        const mySwitchBox = this.state.mySwitchBox ? "switchBoxOn" : "switchBoxOff";
        const switchText = this.state.mySwitch ? "On" : "Off";
        const fancyId = this.state.fancy ? this.Id.id2.map(item2 => item2.replace("-"," ")) : this.Id.id1.map(item1 => item1.replace("-"," "));
        const track = this.state.fancy ? this.tracks.track2 : this.tracks.track1;

        console.log("***");
        console.log(fancyId);
        console.log(track);
        console.log("***");

        return(

            <div id="drum-machine" className="grid-container cent" ref={this.myRef}>
                <div id="display" className="item1">{displayId}</div>

                <div id={fancyId[0]} ref={this.H1} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    Q<audio id="Q" ref={this.Q} className="clip">
                        <source src={track[0]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div id={fancyId[1]} ref={this.H2} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    W<audio id="W" ref={this.W} className="clip">
                        <source src={track[1]}></source>
                    </audio>
                </div>

                <div id={fancyId[2]} ref={this.H3} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    E<audio id="E" ref={this.E} className="clip">
                        <source src={track[2]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div id={fancyId[3]} ref={this.H41} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    A<audio id="A" ref={this.A} className="clip">
                        <source src={track[3]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div id={fancyId[4]} ref={this.H6} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    S<audio id="S" ref={this.S} className="clip">
                        <source src={track[4]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div id={fancyId[5]} ref={this.Dsc_Oh} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    D<audio id="D" ref={this.D} className="clip">
                        <source src={track[5]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div id={fancyId[6]} ref={this.Kick_n_Hat} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    Z<audio id="Z" ref={this.Z} className="clip">
                        <source src={track[6]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div id={fancyId[7]} ref={this.RP4_KICK_1} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    X<audio id="X" ref={this.X} className="clip">
                        <source src={track[7]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div id={fancyId[8]} ref={this.Cev_H2} className="drum-pad btn btn-warning" onClick={this.handleClick}>
                    C<audio id="C" ref={this.C} className="clip">
                        <source src={track[8]} type="audio/mp3"></source>
                    </audio>
                </div>

                <div className="item3">
                    <input id="switch" type="checkbox" onChange={this.fancyToggle}/>
                    <div className="wrap">
                    <label htmlFor="switch"><span className="rib"></span><span className="rib"></span><span className="rib"></span></label>
                    </div>
                </div>

                <div className="item2">
                    <input type="range" min="1" max="100" value={this.state.sliderVal} className="slider" id="myRange" ref={this.myRange} onChange={this.handleVolume}/>
                    <div className="vol">Volume {this.state.sliderVal}</div>
                </div>

                <div id="sw"  className={mySwitchBox} onClick={this.onOff}>
                    <div className={mySwitch} ref={this.mySwitchOn}>{switchText}</div>
                </div>

            </div>

        );

    }

}

ReactDOM.render(<DrumMachine/>, document.getElementById('root'));

从“React”导入React；
从“react dom”导入react dom；
导入'bootstrap/dist/css/bootstrap.min.css'；
导入“/style.css”；
类DrumMachine扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
按键：空，
显示：空，
幻灯片：50，
体积:0.5,，
我的开关：是的，
mySwitchBox：没错，
预测量：0.5，
幻想：错，
};
this.handleClick=this.handleClick.bind（this）；
this.keyPress=this.keyPress.bind（this）；
this.handleVolume=this.handleVolume.bind（this）；
this.onOff=this.onOff.bind（this）；
this.fancyToggle=this.fancyToggle.bind（this）；
this.myRef=React.createRef（）；
this.myswitch=React.createRef（）；
this.mySwitchOff=React.createRef（）；
//参考音频元素。
this.Q=React.createRef（）；
this.W=React.createRef（）；
this.E=React.createRef（）；
this.A=React.createRef（）；
this.S=React.createRef（）；
this.D=React.createRef（）；
this.Z=React.createRef（）；
this.X=React.createRef（）；
this.C=React.createRef（）；
//作为音频之父的div的ref。
this.H1=React.createRef（）；
this.H2=React.createRef（）；
this.H3=React.createRef（）；
this.H41=React.createRef（）；
this.H6=React.createRef（）；
this.Dsc_Oh=React.createRef（）；
this.Kick_n_Hat=React.createRef（）；
this.RP4_KICK_1=React.createRef（）；
this.Cev_H2=React.createRef（）；
this.myRange=React.createRef（）；
这个。听起来={
声音1:null，
声音2:null，
声音3:null，
声音4:null，
声音5:null，
声音6:null，
声音7:null，
声音8:null，
声音9:null
};
这是我的父母={
parent1:null，
parent2:null，
parent3:null，
parent4:null，
parent5:null，
parent6:null，
parent7:null，
parent8:null，
parent9:null
};
这是一个很好的例子{
轨道1:[”https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-3.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-4_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Heater-6.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Dsc_Oh.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Kick_n_Hat.mp3", "https://s3.amazonaws.com/freecodecamp/drums/RP4_KICK_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Cev_H2.mp3"],
轨道2:[”https://s3.amazonaws.com/freecodecamp/drums/Chord_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_2.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Chord_3.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Give_us_a_light.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Dry_Ohh.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Bld_H1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/punchy_kick_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/side_stick_1.mp3", "https://s3.amazonaws.com/freecodecamp/drums/Brk_Snr.mp3"],
};
此.Id={
id1:[“加热器-1”、“加热器-2”、“加热器-3”、“加热器-4”、“鼓掌”、“打开HH”、“踢帽子”、“踢”、“关闭HH”]，
id2:[“和弦-1”、“和弦-2”、“和弦-3”、“震动器”、“打开HH”、“关闭HH”、“强力踢”、“侧杆”、“圈套”]，
};
}
componentDidMount（）{
window.addEventListener（“keydown”，this.keyPress）；
这个。听起来={
声音1:ReactDOM.findDOMNode（此.Q.current），
sound2:ReactDOM.findDOMNode（此.W.current），
sound3:ReactDOM.findDOMNode（此.E.current），
sound4:ReactDOM.findDOMNode（此.A.current），
sound5:ReactDOM.findDOMNode（此.S.current），
sound6:ReactDOM.findDOMNode（此.D.current），
sound7:ReactDOM.findDOMNode（此.Z.current），
sound8:ReactDOM.findDOMNode（this.X.current），
sound9:ReactDOM.findDOMNode（this.C.current）
};
这是我的父母={
parent1:ReactDOM.findDOMNode（this.H1.current），
parent2:ReactDOM.findDOMNode（this.H2.current），
parent3:ReactDOM.findDOMNode（this.H3.current），
parent4:ReactDOM.findDOMNode（this.H41.current），
parent5:ReactDOM.findDOMNode（this.H6.current），
parent6:ReactDOM.findDOMNode（this.Dsc\u Oh.current），
parent7:ReactDOM.findDOMNode（this.Kick\n\u Hat.current），
parent8:ReactDOM.findDOMNode（this.RP4\u KICK\u 1.current），
parent9:ReactDOM.findDOMNode（this.Cev_H2.current）
};
}
组件将卸载（）{
window.removeEventListener（“keydown”，this.keyPress）；
这个。听起来={
声音1:ReactDOM.findDOMNode（此.Q.current），
sound2:ReactDOM.findDOMNode（此.W.current），
sound3:ReactDOM.findDOMNode（此.E.current），
sound4:ReactDOM.findDOMNode（此.A.current），
sound5:ReactDOM.findDOMNode（此.S.current），
sound6:ReactDOM.findDOMNode（此.D.current），
sound7:ReactDOM.findDOMNode（此.Z.current），
sound8:ReactDOM.findDOMNode（this.X.current），
sound9:ReactDOM.findDOMNode（this.C.current）
};
这是我的父母={
constructor () {
  super()
  this.state = {
    currentAudioFile: 0,
  }
  this.audiofiles = [
    {
      label: 'Heater-1',
      url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-1.mp3'
    },
    {
      label: 'Heater-2',
      url: 'https://s3.amazonaws.com/freecodecamp/drums/Heater-2.mp3'
    },
    ...
  ]
}

render () {
  return (
    <div>
      <audio id="Player" controls>
        <source src={this.audiofiles[this.state.currentAudioFile].url} type="audio/mp3"></source>
      </audio>
      <ul>
        {
          this.audiofiles.map((item,i) => (
            <li>
              <span
                onClick={() => {
                  this.setState({
                    currentAudioFile: i,
                  })
                }}
              >
                {item.label}
              </span>
            </li>
          ))
        }
      </ul>
    </div>
  )
}