react 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