reactjs - 如何在 react-wavesurfer for reactJS 中处理多个音频文件实例？

Question

我正在使用 wavesurfer 包播放音频文件。我正在使用状态变量来播放，暂停循环中的音频文件，但是当我按下播放按钮时播放特定文件时遇到问题，它会播放所有文件，因为我正在使用状态变量作为“播放”变量播放。请参见上文代码。

import React, { Component } from 'react';
import Wavesurfer from 'react-wavesurfer';
window.WaveSurfer = require("wavesurfer.js");
let Regions = require("react-wavesurfer/lib/plugins/regions").default;
let Minimap = require("react-wavesurfer/lib/plugins/minimap").default;

class DashboardPage extends Component{
    constructor(props){
        super(props);
    this.state = {
      recordings:objectOfRecordings,
      playing: false,
      pos: 0
    };
    this.handleChange = this.handleChange.bind(this);
    this.handleTogglePlay = this.handleTogglePlay.bind(this);
    this.handlePosChange = this.handlePosChange.bind(this);
    };
   handleTogglePlay() {
    this.setState({
      playing: !this.state.playing
    });
  }
  handlePosChange(e) {
    this.setState({
      pos: e.originalArgs[0]
    });
  }

    render(){
    const { recordings } = this.state;
    return(
        <div>
            <h1>Dashboard</h1>          
          <div className="recording">
            <ul className="list-group">
            {
              recordings &&
              recordings.map((prop,key)=>{
                return (
                  <li className="list-group-item" key={key}>
                    <Wavesurfer
                      audioFile={prop.comment_url}
                      pos={this.state.pos}
                      onPosChange={this.handlePosChange}
                      playing={this.state.playing}
                    />
                    <button onClick={this.handleTogglePlay}>play</button>
                  </li>
                )

              })
            }
            </ul>
          </div>
        </div>
    );
  }
}
export default Dashboard;

请建议我更好的解决方案来播放特定文件。

Answer 1

发生这种情况是因为用于配置多个记录的中心状态存储在具有布尔变量的父组件中。

从这里开始有两个选择：

1. 将正在播放的布尔playing状态和position状态移动到单独的Recording组件内部，因为它们是内部的。但这有一个缺点。在开始下一个之前，您不能停止已经播放的那个，（问题中没有说明，我只是在猜测）

2. 第二个是将正在播放的录音的 ID 存储在playingstate 变量中并使用它来触发wavesurfer。这种方法允许您一次只玩一个。为了单独控制位置，它在一个单独的组件内移动。

例如：

import React, { Component } from 'react';
import Wavesurfer from 'react-wavesurfer';
window.WaveSurfer = require("wavesurfer.js");
let Regions = require("react-wavesurfer/lib/plugins/regions").default;
let Minimap = require("react-wavesurfer/lib/plugins/minimap").default;


class Recording extends Component {
  constructor(props) {
    this.state = {
      pos: 0,
    }
    this.handleTogglePlay = this.handleTogglePlay.bind(this);
    this.handlePosChange = this.handlePosChange.bind(this);
  }
  handleTogglePlay() {
    const { id, onChange } = this.props;
    onChange(id);
  }
  handlePosChange(e) {
    this.setState({
      pos: e.originalArgs[0]
    });
  }
  render() {
    const { data } = this.props;
    return (
      <li className="list-group-item">
         <Wavesurfer
           audioFile={data.comment_url}
           pos={this.state.pos}
           onPosChange={this.handlePosChange}
           playing={this.props.playing}
         />
         <button onClick={this.handleTogglePlay}>play</button>
      </li>
    );
  }  
}
class DashboardPage extends Component{
   constructor(props){
    super(props);
    this.state = {
      playing: -1,
      recordings:objectOfRecordings,
    };
    this.handleChange = this.handleChange.bind(this);
    this.changePlaying = this.changePlaying.bind(this);
   };

   changePlaying(id) {
     this.setState({
       playing: id,
     });
   }

   render(){
    const { recordings } = this.state;
    return(
        <div>
          <h1>Dashboard</h1>          
          <div className="recording">
            <ul className="list-group">
            {
              recordings &&
              recordings.map((prop,key)=>{
                return (
                  <Recording 
                    data={prop}
                    key={key}
                    id={key}
                    playing={key === this.state.playing}
                    onChange={this.changePlaying}
                  />
                )

              })
            }
            </ul>
          </div>
        </div>
    );
  }
}