如何在React中的倒数计时器期间播放音频？

Question

我正在尝试在计时器持续时间内播放音频文件。我目前的结构方式是，音频文件播放1秒钟并切断。如何使音频在整个计时器内播放？

我正在使用倒数计时计时器项目：https://github.com/vydimitrov/react-countdown-circle-timer

我具有renderTime的结构，以使开始按钮在页面加载时出现，并在计时器持续时间结束时再次出现。由于play()功能与“开始”按钮耦合，因此仅在渲染按钮（1秒）的时间内播放音频。

这里是一个沙箱：https://codesandbox.io/s/festive-heisenberg-8ejug

import React, { Component } from "react";
import { CountdownCircleTimer } from "react-countdown-circle-timer";

class Timer extends Component {
    state = {
        isPlaying: false,
        durationSeconds: 31,
        colors: [["#dadfe0", 1]]
    };

    startTimer = () => {
        this.setState({
            isPlaying: true,
            colors: [["#ee5253", 0.33], ["#feca57", 0.33], ["#1abc9c"]]
        });
        const audioEl = document.getElementsByClassName("audio-element")[0]
        audioEl.play();
    };

    resetTimer = () => {
        if (this.state.isPlaying === false) {
            this.setState({
                isPlaying: true,
                colors: [["#ee5253", 0.33], ["#feca57", 0.33], ["#1abc9c"]]
            });
        }
    };

    render() {
        const isPlaying = this.state.isPlaying;

        const durationSeconds = this.state.durationSeconds;

        const colors = this.state.colors;

        const renderTime = value => {
            if (value === 0) {
                return (
                    <div className="timer">
                    <button className="btn-white" onClick={this.resetTimer}>Start</button>
                    </div>
                )
            }

            if (value === 31) {
                return (
                    <div className="timer">
                    <button className="btn-white" onClick={this.startTimer}>Start</button>
                    <audio className="audio-element">
                        <source src="http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Sevish_-__nbsp_.mp3"></source>
                    </audio>
                    </div>
                )
            }

            if (value <= 30) {
                return (
                    <div className="timer">
                        <div className="value">{value}</div>
                    </div>
                )
            }
        };

        return (
            <CountdownCircleTimer
            isPlaying={isPlaying}
            size={240}
            durationSeconds={durationSeconds}
            colors={colors}
            trailColor={"#dadfe0"}
            strokeWidth={20}
            renderTime={renderTime}
            onComplete={() => [false]}
            />
        );
    }
}

    export default Timer;
感谢您提供任何建议！

我正在尝试在计时器持续时间内播放音频文件。我目前的结构方式是，音频文件播放1秒钟并切断。如何使音频播放完整长度...

Answer 1

正如我怀疑的那样，audio元素已被删除。将其添加到此代码块后