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

【问题标题】：How can I make audio play for duration of a countdown timer in React?如何在 React 中的倒数计时器期间播放音频？
【发布时间】：2020-03-26 11:15:58
【问题描述】：

我正在尝试在计时器期间播放音频文件。我目前采用这种结构的方式，音频文件播放 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;

感谢您提供的任何建议！

【问题讨论】：

我相信这是因为您要么丢失了对 audio-element 的引用，要么因为您的 const audioEl 超出了范围，但我可能是错的。你能把它做成沙箱吗？
感谢@LoXatoR！我在上面的问题中添加了一个沙箱链接。
你解决了吗？
感谢您的帮助！我将音频元素添加到 app.js，然后在 renderTime 常量中添加了一个暂停功能，以在计时器完成时停止音频。
太棒了！希望我对您有所帮助:)

标签： reactjs audio timer mp3 countdown

【解决方案1】：

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

  if (value <= 30) {
        return (
          <div className="timer">
            <div className="value">{value}</div>
            <audio className="audio-element">
              <source src="http://commondatastorage.googleapis.com/codeskulptor-demos/DDR_assets/Sevish_-__nbsp_.mp3" />
            </audio>
          </div>
        );
      }

你可以看到它一直播放到指定的时间。

代码沙盒 - https://codesandbox.io/s/goofy-cookies-q03ro

【讨论】：