rc-audio
v2.0.5react audio组件
音频播放器
何时使用
- 播放音频的时候
浏览器支持
IE 9+
安装
npm install rc-audio --save
运行
# 默认开启服务器,地址为 :http://local:8000/
# 能在ie9+下浏览本站,修改代码后自动重新构建,且能在ie10+运行热更新,页面会自动刷新
npm run start
# 构建生产环境静态文件,用于发布文档
npm run site
代码演示
在线示例:https://mraiguo.github.io/rc-audio/site
基本
基本用法。
import "rc-audio/lib/style/";
import Audio from 'rc-audio'
class App extends React.Component {
render() {
return (
<div>
<Audio
autoPlay
muted
currentTime={10}
showProgressBarInfo={false}
onEnded={() => {console.log('播放结束')}}
onSeeked={() => {console.log('跳转播放')}}
src={() => '//cdncs.101.com/v0.1/static/fish/media/%E7%89%9B%E5%A5%B6%E5%92%96%E5%95%A1%20-%20%E6%98%8E%E5%A4%A9%E4%BD%A0%E5%A5%BD.mp3'}
/>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
切换歌曲
切换多首歌曲。
import "rc-audio/lib/style/";
import Audio from 'rc-audio'
const songs = [
{
url: '//cdncs.101.com/v0.1/static/fish/media/%E7%89%9B%E5%A5%B6%E5%92%96%E5%95%A1%20-%20%E6%98%8E%E5%A4%A9%E4%BD%A0%E5%A5%BD.mp3',
title: '明天你好'
},
{
url: '//cdncs.101.com/v0.1/static/fish/media/%E4%B8%80%E4%B8%AA%E4%BA%BA.mp3',
title: '一个人'
},
{
url: '//cdncs.101.com/v0.1/static/fish/media/%E4%BC%A4%E5%BF%83%E5%A4%AA%E5%B9%B3%E6%B4%8B.mp3',
title: '伤心太平洋'
}
]
class App extends React.Component {
state = {
song: songs[0]
}
index = 0
nextSong = () => {
if (this.index >= songs.length - 1) {
this.index = 0
} else {
this.index++
}
this.setState({
song: songs[this.index]
})
}
render() {
return (
<div>
<Audio
volume={0.2}
autoPlay={true}
showProgressBarInfo={false}
src={this.state.song.url}
onEnded={this.nextSong}
/>
<br />
<button onClick={this.nextSong}>换一首</button>
<br />
<br />
<span>正在播放:{this.state.song.title}</span>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
进度条标记
给进度条某些时间点标记。
import "rc-audio/lib/style/";
import Audio from 'rc-audio'
class App extends React.Component {
render() {
return (
<div>
<Audio
volume={0.6}
cuePoints={[ {time: 30, title: '标题1'}, {time: 60, title: '标题2'}, {time: 150, title: '标题3'} ]}
onCuePoints={(cuePoint, audio) => {console.log(cuePoint, audio)}}
showBufferProgress={false}
src={'//cdncs.101.com/v0.1/static/fish/media/%E7%89%9B%E5%A5%B6%E5%92%96%E5%95%A1%20-%20%E6%98%8E%E5%A4%A9%E4%BD%A0%E5%A5%BD.mp3'}
>
Your browser does not support the audio element.
</Audio>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
自定义图标
给进度条某些时间点标记。
import "rc-audio/lib/style/";
import Audio from 'rc-audio'
class App extends React.Component {
render() {
return (
<div>
<Audio
playIcon={<span>播放</span>}
pauseIcon={<span>暂停</span>}
src={'//cdncs.101.com/v0.1/static/fish/media/%E7%89%9B%E5%A5%B6%E5%92%96%E5%95%A1%20-%20%E6%98%8E%E5%A4%A9%E4%BD%A0%E5%A5%BD.mp3'}
>
Your browser does not support the audio element.
</Audio>
</div>
);
}
}
ReactDOM.render(<App />, mountNode);
API
参数 | 说明 | 类型 | 默认值 |
---|---|---|---|
src | 音频链接 | string | function | 无 |
currentTime | 初始音频播放位置,单位为秒,注意:注意:ie9下初始化设置currentTime会报错,所以此参数ie9下无效 | number | 无 |
volume | 初始音量,范围为0到1 | number | 无 |
muted | 是否静音 | boolean | 无 |
showProgressBarInfo | hover在进度条的时候是否显示进度信息 | boolean | true |
cuePoints | 在进度条上标记,time为要标记的时间点, title为标记hover时显示的文本 | Array<{ time: number, title: string }> | [] |
showBufferProgress | 显示缓冲进度 | boolean | true |
onEnded | 结束播放时触发 | function | 无 |
onSeeked | 跳转播放时触发 | function | 无 |
onCuePoints | 播放到标记的时间触发,参数为cuePoint和audio对象;cuePoint是cuePoints被触发的时间点对应的对象,增加的index属性是对应cuePoints的数组索引 | function | 无 |
更多参数参考:https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/audio