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;
Hooks 版本（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 的评论：
不幸的是，如果我使用多个这些组件，那么每当我开始播放另一个组件时，来自其他组件的音乐都不会停止播放 - 有什么关于此问题的简单解决方案的建议吗？
不幸的是，没有直接的解决方案使用我们用来实现单个Player 组件的确切代码库。原因是您必须以某种方式将单人游戏状态提升到 MultiPlayer 父组件，以便 toggle 函数能够暂停与您直接交互的玩家以外的其他玩家。
一种解决方案是修改钩子本身以同时管理多个音频源。这是一个示例实现：
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 道具构建；urls 道具是一个字符串数组（您的 MP3 URL））
- 一个跟踪每个玩家状态的数组
toggle 方法根据以下逻辑更新播放器状态数组：
- 如果当前有一个播放器处于活动状态（即音频正在播放）并且该活动播放器不是toggle方法所针对的播放器，则将该播放器的播放状态恢复为false，并将目标播放器的播放状态设置为true [您点击了在另一个音频流已经在播放时“播放”]
- 如果当前活动的玩家是切换方法的目标玩家，只需将目标玩家的播放状态恢复为 false [您点击了“暂停”]
- 如果当前没有播放器处于活动状态，只需将目标播放器的状态设置为 true [您在当前没有播放音频流时单击了“播放”]
请注意，toggle 方法被柯里化以接受源播放器的索引（即单击相应按钮的子组件的索引）。
实际的音频对象控制发生在 useEffect 中，就像在原始挂钩中一样，但稍微复杂一些，因为我们必须在每次更新时遍历整个音频对象数组。
类似地，音频流“结束”事件的事件侦听器在第二个 useEffect 中处理，就像在原始挂钩中一样，但更新为处理音频对象数组而不是单个此类对象。
最后，从父MultiPlayer 组件（包含多个播放器）调用新钩子，然后使用 (a) 包含播放器当前状态及其源流 URL 的对象映射到单个 Players (b) 使用玩家索引柯里化的切换方法。
CodeSandbox demo