javascript - 在 React.js 中播放声音

Question

import React, { Component } from 'react'
import { Button, Input, Icon,Dropdown,Card} from 'semantic-ui-react'
import { Link } from 'react-router-dom'
import $ from 'jquery'
import styles from './Home.scss'
import Modal from './Modal.jsx'
import MakeChannelModal from './MakeChannelModal.jsx'

class Music extends React.Component {
    constructor(props) {
    super(props);
    this.state = {

      play: false,
      pause: true

    };

    this.url = "http://streaming.tdiradio.com:8000/house.mp3";
    this.audio = new Audio(this.url);

  }

  play(){
    this.setState({
      play: true,
      pause: false
    });
    console.log(this.audio);
    this.audio.play();
  }
  
  pause(){
  this.setState({ play: false, pause: true });
    this.audio.pause();
  }
  
  render() {
    
  return (
    <div>
      <button onClick={this.play}>Play</button>
      <button onClick={this.pause}>Pause</button>
    </div>
    );
  }
}


export default Music

这是我在我的 React 应用程序中使用 url (this.url) 播放声音的代码。当我按下播放按钮时，它给我一个错误

Uncaught TypeError: Cannot read property 'setState' of undefined

我不确定为什么会这样，因为我没有看到任何未定义的状态。一种;;状态已经宣布。

我是 React 新手，所以我可能会遗漏一些非常重要的东西。

请帮忙!

Answer 1

ES6 类属性语法

class Music extends React.Component {
  state = {
    play: false
  }
  audio = new Audio(this.props.url)

  componentDidMount() {
    audio.addEventListener('ended', () => this.setState({ play: false }));
  }
  
  componentWillUnmount() {
    audio.removeEventListener('ended', () => this.setState({ play: false }));  
  }

  togglePlay = () => {
    this.setState({ play: !this.state.play }, () => {
      this.state.play ? this.audio.play() : this.audio.pause();
    });
  }

  render() {
    return (
      <div>
        <button onClick={this.togglePlay}>{this.state.play ? 'Pause' : 'Play'}</button>
      </div>
    );
  }
}

export default Music;

Hook 版本(React 16.8+):

import React, { useState, useEffect } from "react";

const useAudio = url => {
  const [audio] = useState(new Audio(url));
  const [playing, setPlaying] = useState(false);

  const toggle = () => setPlaying(!playing);

  useEffect(() => {
      playing ? audio.play() : audio.pause();
    },
    [playing]
  );

  useEffect(() => {
    audio.addEventListener('ended', () => setPlaying(false));
    return () => {
      audio.removeEventListener('ended', () => setPlaying(false));
    };
  }, []);

  return [playing, toggle];
};

const Player = ({ url }) => {
  const [playing, toggle] = useAudio(url);

  return (
    <div>
      <button onClick={toggle}>{playing ? "Pause" : "Play"}</button>
    </div>
  );
};

export default Player;

2020 年 3 月 16 日更新:多个并发玩家

回应@Cold_Class 的评论:

Unfortunately if I use multiple of these components the music from the other components doesn't stop playing whenever I start another component playing - any suggestions on an easy solution for this problem?

不幸的是，没有直接的解决方案可以使用我们用来实现单个 Player 组件的确切代码库。原因是您必须以某种方式将单人游戏状态提升到 MultiPlayer 父组件，以便 toggle 功能能够暂停您直接暂停的其他玩家与之互动。

一种解决方案是修改 Hook 本身以同时管理多个音频源。这是一个示例实现:

import React, { useState, useEffect } from 'react'

const useMultiAudio = urls => {
  const [sources] = useState(
    urls.map(url => {
      return {
        url,
        audio: new Audio(url),
      }
    }),
  )

  const [players, setPlayers] = useState(
    urls.map(url => {
      return {
        url,
        playing: false,
      }
    }),
  )

  const toggle = targetIndex => () => {
    const newPlayers = [...players]
    const currentIndex = players.findIndex(p => p.playing === true)
    if (currentIndex !== -1 && currentIndex !== targetIndex) {
      newPlayers[currentIndex].playing = false
      newPlayers[targetIndex].playing = true
    } else if (currentIndex !== -1) {
      newPlayers[targetIndex].playing = false
    } else {
      newPlayers[targetIndex].playing = true
    }
    setPlayers(newPlayers)
  }

  useEffect(() => {
    sources.forEach((source, i) => {
      players[i].playing ? source.audio.play() : source.audio.pause()
    })
  }, [sources, players])

  useEffect(() => {
    sources.forEach((source, i) => {
      source.audio.addEventListener('ended', () => {
        const newPlayers = [...players]
        newPlayers[i].playing = false
        setPlayers(newPlayers)
      })
    })
    return () => {
      sources.forEach((source, i) => {
        source.audio.removeEventListener('ended', () => {
          const newPlayers = [...players]
          newPlayers[i].playing = false
          setPlayers(newPlayers)
        })
      })
    }
  }, [])

  return [players, toggle]
}

const MultiPlayer = ({ urls }) => {
  const [players, toggle] = useMultiAudio(urls)

  return (
    <div>
      {players.map((player, i) => (
        <Player key={i} player={player} toggle={toggle(i)} />
      ))}
    </div>
  )
}

const Player = ({ player, toggle }) => (
  <div>
    <p>Stream URL: {player.url}</p>
    <button onClick={toggle}>{player.playing ? 'Pause' : 'Play'}</button>
  </div>
)


export default MultiPlayer

使用 MultiPlayer 组件的 App.js 示例:

import React from 'react'
import './App.css'
import MultiPlayer from './MultiPlayer'

function App() {
  return (
    <div className="App">
      <MultiPlayer
        urls={[
          'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3',
          'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-2.mp3',
          'https://www.soundhelix.com/examples/mp3/SoundHelix-Song-3.mp3',
        ]}
      />
    </div>
  )
}

export default App

想法是管理 2 个并行数组:

• 您的音频源(根据您传递给父组件的 urls Prop 构建；urls Prop 是一个字符串数组(您的 MP3 网址))
• 一个跟踪每个玩家状态的数组

toggle 方法根据以下逻辑更新播放器状态数组:

• 如果当前有一个播放器处于事件状态(即音频正在播放)并且此事件播放器不是切换方法的目标播放器，则将该播放器的播放状态恢复为 false，并将目标播放器的播放状态设置为 true [您单击在“播放”时另一个音频流已经在播放]
• 如果当前事件的玩家是切换方法的目标玩家，只需将目标玩家的播放状态恢复为 false [您点击了“暂停”]
• 如果当前没有播放器处于事件状态，只需将目标播放器的状态设置为 true [您在当前没有播放音频流时单击“播放”]

请注意，toggle 方法被柯里化(Currying)以接受源播放器的索引(即点击相应按钮的子组件的索引)。

实际的音频对象控制发生在 useEffect 中，就像在原始钩子(Hook)中一样，但稍微复杂一些，因为我们必须在每次更新时遍历整个音频对象数组。

类似地，音频流“结束”事件的事件监听器在第二个 useEffect 中处理，就像在原始 Hook 中一样，但更新为处理音频对象数组而不是单个此类对象。

最后，新的 Hook 从父 MultiPlayer 组件(持有多个玩家)调用，然后使用 (a) 包含的对象映射到各个 Player播放器的当前状态及其源流 URL 和 (b) 与播放器索引一起使用的切换方法。

CodeSandbox demo