# MAudio 音频播放

- 来源：[E10 UI 组件库](https://www.e-cology.com.cn/ui/mobile/audio/freepass)
- 平台：移动端
- 维护者：屈正巍
- Issue：http://gitlab.ecology10.cn/FRONTEND/weapp-ui/-/issues?state=all&search=[Audio]

## 代码演示

### 基础用法

直接引入组件进行使用

```jsx
import { Component } from 'react';
import { MAudio, MButton, constantsM } from '@weapp/ui';

const prefixCls = `${constantsM.uiMClsPrefix}-demo-m-audio`;

class AudioDemo extends Component<any, any> {

  showAudio = () => {
    MAudio.showAudio('')
  }

  render() {
    return (
      <div className={prefixCls}>
        <h4>基础用法</h4>
        <MAudio
          controls
          src={''}
        />
        <h4>通过MAudio.showAudio方法打开</h4>
        <MButton onClick={this.showAudio}>预览音频</MButton>
      </div>
    );
  }
}

export default AudioDemo;
```

### 音频弹层

将播放器放于弹层中，可使用customRender自定义渲染触发器

```jsx
import { Component } from 'react'
import { MAudio, constantsM } from '@weapp/ui'

const prefixCls = `${constantsM.uiMClsPrefix}-demo-m-audio`;

class AudioDemo extends Component<any, any> {

  customRender = (_this: any, content: any) => {
    return <button>自定义触发器</button>
  }

  render() {
    return (
      <div className={prefixCls}>
        <MAudio
          isDialog
          controls
          src={''}
        />
        <br />
        <br />
        <MAudio
          isDialog
          controls
          src={''}
          customRender={this.customRender}
        />
      </div>
    );
  }
}

export default AudioDemo;
```

### videojs

引入三方媒体插件

```jsx
import { Component } from 'react';
import { MAudio, constantsM } from '@weapp/ui';
const prefixCls = `${constantsM.uiMClsPrefix}-demo-m-audio`;

class AudioDemo extends Component<any, any> {

  render() {
    return (
      <div className={prefixCls}>
        <MAudio
          controls
          useVideoJs
          src={''}
        />
      </div>
    );
  }
}

export default AudioDemo;
```

## API

### 使用vidoejs说明：

```typescript
1.如果采用videojs模式，可以参考demo4中，采用ref的形式拿到Audio中的player，并调用相对应的方法对视频播放进行控制
```

### 参数说明如下：

| 参数 | 说明 | 类型 | 是否必填 | 默认值 |
| --- | --- | --- | --- | --- |
| className | 自定义类名 | string | 否 |  |
| style | 自定义样式 | CSSProperties | 否 |  |
| isDialog | 是否为弹出音频 | boolean | 否 | false |
| src | 音频地址 | string | 否 |  |
| controls | 是否提供用户控制 | boolean | 否 | true |
| autoPlay | 是否马上自动开始播放 | boolean | 否 | false |
| loop | 是否循环播放 | boolean | 否 | false |
| muted | 是否默认静音 | boolean | 否 | false |
| preload | 预加载配置项 | 'auto/metadata/none' | 否 | 'auto' |
| dialogProps | dialog 弹框参数 | boolean | 否 |  |
| onClose | 弹窗关闭回调 | () => void | 否 |  |
| onOpen | 弹窗打开回调 | () => void | 否 |  |
| useVideoJs | 是否采用三方的video.js | boolean | 否 |  |
| videoJsOptions | 三方的video.js配置options | VideoJsPlayerOptions | 否 |  |
### Audio.showAudio

通过 function 调用方式预览音频

```typescript
//其中otherParams为需要传递的参数
function showAudio(src?: string, otherParams?: AudioProps){
  ...
}
```
