我如何在 React 中播放声音

Question

我正在尝试在单击提交按钮时播放鸟鸣的 mp3 短片。我的文件夹中有 mp3 文件和其他组件。它叫做 Chirps.mp3。我该怎么做呢？每次单击时我都想要声音。我不希望用户在播放结束前再次点击可以暂停声音。

这个答案并不真正适用于我的情况，而且作为新手对额外功能做出反应让我感到困惑：

    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

我如何在 React 中播放声音

How do I play a sound in React

javascript

mp3

jsx

reactjs