Question

我正在尝试使用React.js制作音乐播放器

主要组件是一个表容器，其中包含有关歌曲的数据（名称，艺术家，时长）。表格的每一行都有一个播放/暂停按钮。

我还有另一个组件，可以使用以下代码实际播放歌曲

import React from 'react';
import { connect } from 'react-redux';
import './styles.css';


class BottomBar extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            play: false
        };
    }

    render() {
        return (
            <audio controls controlsList='nodownload' autoPlay className='container'>
                <source src={this.props.songs.url} type='audio/mpeg'></source>
            </audio>
        )
    }
}

const mapStateToProps = state => {
    return { ...state };
}

export default connect(mapStateToProps)(BottomBar);

这是该组件的渲染位置...

import React, { Component } from 'react';
import Table from './containers/table';
import Bottombar from './containers/bottombar';
import { connect } from 'react-redux';

class App extends Component {
  render() {
    return (
      <div>
        <Table />
        { this.props.songs.currentPlaying ? <Bottombar /> : null }
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { ...state };
}

export default connect(mapStateToProps)(App);

按下播放按钮时，歌曲的网址将更新。但是，如何停止播放旧歌曲并开始新歌曲？现在，如果正在播放一首歌曲，而用户想播放另一首歌曲，则他/她必须先暂停当前歌曲，然后单击新歌曲的播放按钮...但是，我希望能够停止播放当用户按下另一首歌曲的播放按钮并将音频切换到正在播放的歌曲时播放的当前歌曲（this.props.songs.currentSong是指当前播放的歌曲，如果没有正在播放的歌曲，则为未定义）。

Answer 1

一种阻止播放其他音频对象的快速解决方案是执行以下操作：

function stopAnyCurrentlyPlayingAudio() {

    for(const audio of document.querySelectorAll('audio')) {
        audio.pause()
        // audio.currentTime = 0; // Do this to reset play head, simulate "stop"
    }
}

从技术上讲，您可以从应用程序中的任何位置使用/调用此功能，以停止当前播放音频。

更新

或者，您可以实现以下内容，以便播放音频对象会导致其他任何已经播放的音频暂停：

function stopAnyOtherCurrentlyPlayingAudio(event) {

    for(const audio of document.querySelectorAll('audio')) {

        // Only pause audio objects that are not the audio object 
        // clicked by the user
        if(audio !== event.currentTarget) {

            audio.pause()
            // audio.currentTime = 0; // Do this to reset play head,
            // simulate "stop"
        }
    }
}

然后，当您在<BottomBar />组件中渲染音频对象时，只需添加以下onplay事件监听器：

render() {
    return (
        <audio controls controlsList='nodownload' autoPlay
             className='container' 

             {/* [ADD THIS] */}
             onplay={ event => stopAnyOtherCurrentlyPlayingAudio(event) }>

            <source src={this.props.songs.url} type='audio/mpeg'> 
            </source>
        </audio>
    )
}

点击按钮后加载并播放另一首歌曲

1 个答案:

更新