react中一个音频或视频播放的时候其他音视频暂停播放

又来记录了

需求：一个音频或视频播放的时候，除了这个播放的音频或视频，其他的音频和视频都要暂停播放。

思路：

1.首先获取所有的音视频ID，存到一个数组。获取播放的ID。

2.把获取播放的ID从所有的音视频ID中去除，放到differenceSet数组中。

3.用循环挨个把differenceSet中的ID关闭。

*具体的1、2、3实现可在代码中找到

代码：

import React, { Component } from 'react';

export default class Test extends Component {

    constructor(props) {
        super(props);
        this.state = {
            contents: [3, 2, 8],    //button按钮的内容
            ids: [] //所有button的ID集合
        }
    }

    componentDidMount() {
        this.setState({
        }, () => {
            this.audiod()
        })
    }

    audiod(id) {
        console.log('id', id);
        let divid = [id]    //获取播放的ID，必须加数组里，要不然后面includes(x)会报undefined错
        this.state.ids = [...new Set(this.state.ids)]   //用setState({})好像不管用，先用这个代替
        let differenceSet = [...this.state.ids].filter(x => !divid.includes(x)) //思路2
        console.log('newids', differenceSet);
        if (differenceSet.length > 0) { //思路3
            for (let i = 0; i < differenceSet.length; i++) {
                let audioIds = document.getElementById(differenceSet[i])
                console.log('audioIds', audioIds);
                /**
                 * 以下是音频的处理，因为我没找到合适的音频做示范，所以就注掉了，视频同理
                */
                // if (audioIds.nodeName === 'AUDIO') {
                //     if (audioIds.id == id) continue;
                //     audioIds.pause()
                // }
            }
        }
    }

    render() {
        return (
            <div>
                {
                    this.state.contents.map((content, id) => {
                        this.state.ids.push(id) //思路1
                        return (
                            //真正用的时候把button标签删了，把audio标签放开，因为我没找到合适的音频做示范，所以先用button代替
                            <button id={id} onClick={() => this.audiod(id)}>
                                {content}
                            </button>
                            /**
                             * 以下是音频的标签，因为我没找到合适的音频做示范，所以就注掉了，视频同理
                            */
                            // <audio id={id}
                            //        src={视频的地址}
                            //        onPlay={() => this.audiod(id)}
                            //        controls
                            // />
                        )
                    })
                }
            </div>
        )
    }
}

大体效果图：（刚开始没点按钮，所以id是undefined，后来依次点的2 2 8 3）