Как воспроизвести звук в React

Question

Я пытаюсь воспроизвести короткий mp3 щебетание птицы, когда нажата кнопка отправки. У меня есть файл mp3 в моей папке с остальными компонентами. Это называется Chirps.mp3. Как бы я go об этом? Я хочу звук каждый раз, когда на него нажимают. Я не хочу, чтобы у пользователя была возможность приостановить звук, если щелкнуть его еще раз, прежде чем он завершит воспроизведение.

Этот ответ не относится к моей ситуации, и я не знаю, как реагировать на дополнительные функции, которые меня смущали : Как воспроизвести звук в 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