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

之所以发生这种情况，是因为用于配置多个记录的中央状态使用布尔变量存储在父组件中。

从这里开始有两个选择：

将正在播放的布尔error: no matching function for call to ‘galg(double (&)(std::vector<double>, c_myclass), std::vector<double>&, c_myclass&)’ err = galg(fun, par, extra); ^ In file included from ... note: candidate: ‘template<class OptionalClass> double galg(std::function<double(std::vector<double>, OptionalClass)>, std::vector<double>&, OptionalClass)’ double galg( ^~~~~~~~~~~ ... note: template argument deduction/substitution failed: ... note: mismatched types ‘std::function<double(std::vector<double>, OptionalClass)>’ and ‘double (*)(std::vector<double>, c_myclass)’ err = galg(fun, par, extra);状态和playing状态移动到单独的position组件内部，因为它们是内部的。但这有一个缺点。

第二个方法是将正在播放的记录的ID存储在Recording状态变量中，并使用它来触发playing。这种方法可以让您一次只玩一次。为了单独控制位置，将其移动到单独的组件内。

例如：

wavesurfer

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

1 个答案: