如果数据增加，如何自动生成声音代码

Question

我有包含动态布尔值的人员数据。该值是自动生成的，每次可以为真或假。

网页每5秒获取一次数据并渲染。如果每个人的值都为假，则播放声音。

如果数据增加我会遇到问题，我必须手动添加代码来渲染和播放声音。

这是代码：

import React, { Component } from 'react';
import { render } from 'react-dom';
import Sound from './Mp3';

const data = [
  {
    id: '1',
    name: 'peter',
    value: true
  },
  {
    id: '2',
    name: 'john',
    value: false
  }
];

class App extends Component {
  state = {
    results: [],
    playSoundPeter: false,
    playSoundJohn: false
  }

  componentDidMount() {
    this.getData()
    // get data every 5 sec
    setInterval(this.getData, 5000);
  }

  getData = () => {
    // generate random value
    data[0].value = Math.random() >= 0.5;
    data[1].value = Math.random() >= 0.5;

    // set results state to data
    this.setState({ results: data });

    // extract array results
    for (let i = 0; i < this.state.results.length; i++) {
      // set playSoundPeter state to true if
      // data value equal to false & vice versa
      if (this.state.results[0].value === false) {
        this.setState({ playSoundPeter: true });
      } else {
        this.setState({ playSoundPeter: false });
      }

      // set playSoundJohn state to true if
      // data value equal to false & vice versa
      if (this.state.results[1].value === false) {
        this.setState({ playSoundJohn: true });
      } else {
        this.setState({ playSoundJohn: false });
      }
    }
  }

  render() {
    const { results, playSoundPeter, playSoundJohn } = this.state;
    return (
      <div>
        {results.map(item => {
          return (
            <div key={item.id}>
              <div>
                Name: {item.name}
              </div>
              <div>
                Value: {item.value.toString()}
              </div>
              <br />
            </div>
          )
        })}
        <div>
          Peter sound: {(playSoundPeter) ? 'true' : 'false'}
        </div>
        <div>
          John sound: {(playSoundJohn) ? 'true' : 'false'}
        </div>
        {(playSoundPeter) ? <audio src={Sound} autoPlay /> : ''}
        {(playSoundJohn) ? <audio src={Sound} autoPlay /> : ''}
      </div>
    );
  }
}

render(<App />, document.getElementById('root'));

这是demo

在上面的代码中，如果数据增加或减少，我必须手动添加或删除：

播放声音状态
条件语句 & setState
div真假值
音频声音

如何在数据增加时自动生成声音代码？

已解决 已更新 demo

Answer 1

不要在此处使用 <audio ...> 标签；使用 new Audio() 代替

render 不关心声音，getData 关心

class App extends Component {
  state = {
    results: [],
  }

  componentDidMount() {
    this.getData()
    // get data every 5 sec
    setInterval(this.getData, 5000);
  }

  getData = () => {
    // generate random value
    data[0].value = Math.random() >= 0.5;
    data[1].value = Math.random() >= 0.5;

    // set results state to data
    this.setState({ results: data });  

    // your condition here. If John or Peter value is false
    if (data.some(d => d.false)) {
      var audio = new Audio('audio_file.mp3');
      audio.play();
    }
  }

一个提示。将计时器 ID 分配给某个变量并在 componentWillUnmount

如果数据增加，如何自动生成声音代码

How to auto generate sound code if data increases

javascript

html5-audio

reactjs