Автоматически воспроизводить аудио на сайте после задержки

Question

Я попытался изменить состояние воспроизведения с false на true, а также попытался добавить ComponentDidMount, ComponentDidUpdate, ComponentWillMount, но ничего не получалось.В какой-то момент я продолжал получать сообщение об ошибке.

Он отлично работает при нажатии кнопки воспроизведения и паузы, но я хочу, чтобы он воспроизводился автоматически через 2 секунды при посещении сайта.

Мой код:

import React from "react";
class Music extends React.Component {
  constructor(props) {
    super(props);
    this.state = { play: false };
    this.url = "http://streaming.tdiradio.com:8000/house.mp3";
    this.audio = new Audio(this.url);
    this.togglePlay = this.togglePlay.bind(this);
  }
  //   componentDidMount = () => {
  //     this.togglePlay();
  //   };
  componentDidMount = () => {
    setTimeout(this.setState(this.togglePlay()), 500);
  };
  togglePlay() {
    this.setState({ play: !this.state.play });
    console.log(this.audio);
    this.state.play ? this.audio.play() : this.audio.pause();
  }
  render() {
    return (
      <div>
        <button onClick={this.togglePlay}>
          {this.state.play ? "Pause" : "Play"}
          {/* {this.state.play ? "Play" : "Pause"} */}
        </button>
      </div>
    );
  }
}
export default Music;

Ошибка:

index.js:1582 Uncaught Error: The error you provided does not contain a stack trace.


   at B (index.js:1582)
    at G (index.js:1899)
    at index.js:1914
    at index.js:1933
    at index.js:1414
B @ index.js:1582
G @ index.js:1899
(anonymous) @ index.js:1914
(anonymous) @ index.js:1933
(anonymous) @ index.js:1414
music.js:22 Uncaught (in promise) DOMException
togglePlay @ music.js:22
Music._this.componentDidMount @ music.js:16
commitLifeCycles @ react-dom.development.js:16998
commitAllLifeCycles @ react-dom.development.js:18512
callCallback @ react-dom.development.js:147
invokeGuardedCallbackDev @ react-dom.development.js:196
invokeGuardedCallback @ react-dom.development.js:250
commitRoot @ react-dom.development.js:18717
completeRoot @ react-dom.development.js:20247
performWorkOnRoot @ react-dom.development.js:20170
performWork @ react-dom.development.js:20075
performSyncWork @ react-dom.development.js:20049
requestWork @ react-dom.development.js:19904
scheduleWork @ react-dom.development.js:19711
scheduleRootUpdate @ react-dom.development.js:20415
updateContainerAtExpirationTime @ react-dom.development.js:20441
updateContainer @ react-dom.development.js:20509
push../node_modules/react-dom/cjs/react-dom.development.js.ReactRoot.render @ react-dom.development.js:20820
(anonymous) @ react-dom.development.js:20974
unbatchedUpdates @ react-dom.development.js:20292
legacyRenderSubtreeIntoContainer @ react-dom.development.js:20970
render @ react-dom.development.js:21037
./src/index.js @ index.js:16
__webpack_require__ @ bootstrap:782
fn @ bootstrap:150
0 @ routes.js:17
__webpack_require__ @ bootstrap:782
checkDeferredModules @ bootstrap:45
webpackJsonpCallback @ bootstrap:32
(anonymous) @ main.chunk.js:1

Answer 1

setState метод может использоваться только для установки состояния компонента.если вам нужна дополнительная информация, обратитесь к документации setState.

, если вы хотите чуть позже запустить функцию togglePlay, просто передайте свой метод togglePlay на setTimeout с задержкой в ​​мс.

например:

// this.setState({ play: !this.state.play });
setTimeout(this.togglePlay, 500);

Answer 2

Это может быть немного сложно обернуть голову, но setTimeout принимает функцию и число.То, что вы передали ему, это, по сути, void и 500. Позвольте лучше объяснить это:

function test() {
    return true;
}

setTimeout(test(), 500);

Это может вызвать ошибку, потому что я вызываю функцию, а не передаю функцию.Итак, по сути, я передаю true и 500 в функцию setTimeout.

Вы можете попробовать следующее:

componentDidMount = () => {
    setTimeout(() => this.togglePlay(), 500);
    // Or setTimeout(this.togglePlay, 500); if you get what I'm trying to say
};

Answer 3

Вместо вызова функции тайм-аута, например:

setTimeout(this.setState(this.togglePlay()), 500);

Почему бы вам просто не вызвать функцию togglePlay следующим образом:

setTimeout(this.togglePlay(), 500);

Вот почему вы такжеиспытывает ошибку.