Как я могу воспроизвести аудио на время таймера обратного отсчета в React? - PullRequest
Новая
       13

Как я могу воспроизвести аудио на время таймера обратного отсчета в React?

0 голосов
/ 26 марта 2020

Я пытаюсь воспроизвести аудиофайл на время таймера. То, как у меня сейчас это структурировано, аудиофайл воспроизводится в течение 1 сек c и отключается. Как я могу воспроизвести звук для полной длины таймера?

Я использую проект таймера обратного отсчета: 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 Ответ

0 голосов
/ 02 апреля 2020

Как я и подозревал, элемент 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

...