如何在 React 中播放声音

Question

单击提交按钮时，我正在尝试播放一段鸟鸣声的短 mp3。我的文件夹中有 mp3 文件和其他组件。它被称为啁啾.mp3。我该怎么做呢？我想要每次点击的声音。我不希望用户在完成播放之前再次单击时能够暂停声音。

这个答案并不真正适用于我的情况，并且对额外功能做出反应的新手让我感到困惑：How do I play a sound in React

    import React, { Component } from 'react'



export class AddChirp extends Component {
    state = {
        userName: '',
        chirp: ''
    }


    onSubmit = (e) => {
        e.preventDefault();
        this.props.addChirp(this.state.userName, this.state.chirp);
        this.setState({ chirp: '', userName: '' });
    }

    onChange = (e) => this.setState({ [e.target.name]: e.target.value });

    render() {
        return (
            <form onSubmit={this.onSubmit} >
                <input
                    className="col-2 p-3 mb-3 mt-3 bg-danger text-dark"
                    type="text"
                    name="userName"
                    placeholder="Username"
                    value={this.state.userName}
                    onChange={this.onChange}
                ></input>

                <input
                    className="col-9 p-3 mb-3 mt-3 bg-danger text-dark"
                    type="text"
                    name="chirp"
                    placeholder="Chirp"
                    value={this.state.chirp}
                    onChange={this.onChange}
                ></input>

                <button className=" col-1 btn btn-danger p-3 mb-4 mt-3">Submit</button>
            </form>
        )
    }
}

export default AddChirp

Answer 1

好的，所以在拔掉我的头发并且在这里没有得到真正的帮助之后，这是我想出的有效解决方案。希望这可以帮助任何偶然发现此问题并有类似问题的人。

import ChirpMP3 from './chirps.mp3'



export class AddChirp extends Component {
    state = {
        userName: '',
        chirp: ''
    }

    onSubmit = (e) => {
        e.preventDefault();
        this.props.addChirp(this.state.userName, this.state.chirp);
        this.setState({ chirp: '', userName: '' });
    }

    onChange = (e) => this.setState({ [e.target.name]: e.target.value });

    onClick =()=>{
        var ChirpChirp = new Audio (ChirpMP3);
        ChirpChirp.play();
    }

    render() {
        return (
            <form onSubmit={this.onSubmit} >
                <input
                    className="col-2 p-3 mb-3 mt-3 bg-danger text-dark"
                    type="text"
                    name="userName"
                    placeholder="Username"
                    value={this.state.userName}
                    onChange={this.onChange}
                ></input>

                <input
                    className="col-9 p-3 mb-3 mt-3 bg-danger text-dark"
                    type="text"
                    name="chirp"
                    placeholder="Chirp"
                    value={this.state.chirp}
                    onChange={this.onChange}
                ></input>


                <button onClick={this.onClick} className=" col-1 btn btn-danger p-3 mb-4 mt-3">Submit</button>
            </form>
        )
    }
}

export default AddChirp