react用表格展示音频，如何在播放下一首时将上一首按钮恢复

Question

这是播放第一首时，点击按钮后为暂停

第一首不暂停的情况下，直接点击第二首播放，如何将第一首的按钮恢复呢？

参考组件：https://www.cnblogs.com/cckui/p/12965404.html
如果有其他方法，欢迎留言

Answer 1

得改代码了，提升isPlay属性为property了，然后再提供一个changeIsPlay()的property方法了

import React, {Component} from "react";
import Audio from "./Audio";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            data: [
                {id: 1, isPlay: false, src: 'https://webfs.ali.kugou.com/202210121824/c3d88304a31e785a0996ef5af2cba1e7/KGTX/CLTX001/dd5019b62e6bcee53fe81cfb88fd0e76.mp3'},
                {id: 2, isPlay: false, src: 'https://webfs.ali.kugou.com/202210121824/c3d88304a31e785a0996ef5af2cba1e7/KGTX/CLTX001/dd5019b62e6bcee53fe81cfb88fd0e76.mp3'},
                {id: 3, isPlay: false, src: 'https://webfs.ali.kugou.com/202210121824/c3d88304a31e785a0996ef5af2cba1e7/KGTX/CLTX001/dd5019b62e6bcee53fe81cfb88fd0e76.mp3'},
                {id: 4, isPlay: false, src: 'https://webfs.ali.kugou.com/202210121824/c3d88304a31e785a0996ef5af2cba1e7/KGTX/CLTX001/dd5019b62e6bcee53fe81cfb88fd0e76.mp3'},
            ]
        }
    }

    render() {
        return <>
            {this.state.data.map(item => <div><Audio
                src={item.src}
                isPlay={item.isPlay}
                id={item.id}
                changeState={isPlay =>
                    this.setState({
                        data: [...this.state.data].map(a => ({...a, isPlay: a.id == item.id ? isPlay : false}))
                    })
                }
            />
            </div>)}
        </>
    }
}

import React, { Component } from "react";

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            rateList: [1.0, 1.25, 1.5, 2.0],
            playRate: 1.0,
            isMuted: false,
            volume: 100,
            allTime: 0,
            currentTime: 0,
        };
    }

    componentDidMount() {}

    formatSecond(time) {
        const second = Math.floor(time % 60);
        let minite = Math.floor(time / 60);
        return `${minite}:${second >= 10 ? second : `0${second}`}`;
    }

    // 该视频已准备好开始播放
    onCanPlay = () => {
        const { id } = this.props;
        const audio = document.getElementById(`audio${id}`);
        this.setState({
            allTime: audio.duration,
        });
    };

    playAudio = () => {
        const { id } = this.props;
        const audio = document.getElementById(`audio${id}`);
        audio.play();
        this.props.changeState(true)
    };

    pauseAudio = () => {
        const { id } = this.props;
        const audio = document.getElementById(`audio${id}`);
        audio.pause();
        this.props.changeState(false)
    };

    onMuteAudio = () => {
        const { id } = this.props;
        const audio = document.getElementById(`audio${id}`);
        this.setState({
            isMuted: !audio.muted,
        });
        audio.muted = !audio.muted;
    };

    changeTime = (e) => {
        const { value } = e.target;
        const { id } = this.props;
        const audio = document.getElementById(`audio${id}`);
        this.setState({
            currentTime: value,
        });
        audio.currentTime = value;
        if (value === audio.duration) {
            this.props.changeState(false)
        }
    };

    // 当前播放位置改变时执行
    onTimeUpdate = () => {
        const { id } = this.props;
        const audio = document.getElementById(`audio${id}`);

        this.setState({
            currentTime: audio.currentTime,
        });
        if (audio.currentTime === audio.duration) {
            this.props.changeState(false)
        }
    };

    changeVolume = (e) => {
        const { value } = e.target;
        const { id } = this.props;
        const audio = document.getElementById(`audio${id}`);
        audio.volume = value / 100;

        this.setState({
            volume: value,
            isMuted: !value,
        });
    };

    // 倍速播放
    changePlayRate = (num) => {
        this.audioDom.playbackRate = num;
        this.setState({
            playRate: num,
        });
    };

    render() {
        const { src, id } = this.props;

        const {
            isMuted,
            volume,
            allTime,
            currentTime,
            rateList,
            playRate,
        } = this.state;

        return (
            <div>
                <audio
                    id={`audio${id}`}
                    src={src}
                    ref={(audio) => {
                        this.audioDom = audio;
                    }}
                    preload={"auto"}
                    onCanPlay={this.onCanPlay}
                    onTimeUpdate={this.onTimeUpdate}
                >
                    <track src={src} kind="captions" />
                </audio>

                {this.props.isPlay ? (
                    <div onClick={this.pauseAudio}>暂停</div>
                ) : (
                    <div onClick={this.playAudio}>播放</div>
                )}

                <div>
          <span>
            {this.formatSecond(currentTime) + "/" + this.formatSecond(allTime)}
          </span>
                    <input
                        type="range"
                        step="0.01"
                        max={allTime}
                        value={currentTime}
                        onChange={this.changeTime}
                    />
                </div>

                <div onClick={this.onMuteAudio}>静音</div>

                <div>
                    <span>音量调节：</span>
                    <input
                        type="range"
                        onChange={this.changeVolume}
                        value={isMuted ? 0 : volume}
                    />
                </div>

                <div>
                    <span>倍速播放：</span>
                    {rateList &&
                    rateList.length > 0 &&
                    rateList.map((item) => (
                        <button
                            key={item}
                            style={
                                playRate === item
                                    ? {
                                        border: "1px solid #188eff",
                                        color: "#188eff",
                                    }
                                    : null
                            }
                            onClick={() => this.changePlayRate(item)}
                        >
                            {item}
                        </button>
                    ))}
                </div>
            </div>
        );
    }
}

export default App;