---
name: Audio
title: 音频
category: 媒体组件
owner: chenxiao07
---


## 示例

```atom 基础示例
<template>
    <div class="c-container">
        <audio
            :poster="poster"
            :name="name"
            :author="author"
            :src="src"
            id="myAudio"
            controls="true"
            @error="error"
            @play="audioPlay"
            @pause="audioPause"
            @timeupdate="timeupdate"
            @ended="audioEnded"
        />
    </div>
</template>

<script type="config">
    {
        components: {
            'c-audio': 'components/Audio/Audio',
        },
        data: {
            poster: 'http://c.hiphotos.baidu.com/super/pic/item/8b13632762d0f703e34c0f6304fa513d2797c597.jpg',
            name: '演员',
            author: '薛之谦',
            src: 'http://vd3.bdstatic.com/mda-ic7mxzt5cvz6f4y5/mda-ic7mxzt5cvz6f4y5.mp3'
        }
    }
</script>

<script>
    export default {

        methods: {
            error(e) {
                console.log(e);
            },
            audioPlay(e) {
                console.log('audio play');
                swan.showToast({
                    title: '音频开始播放',
                    duration: 1000
                });
            },
            audioPause(e) {
                console.log('audio pause');
                swan.showToast({
                    title: '音频暂停',
                    duration: 1000
                });
            },
            audioEnded() {
                console.log('audio ended');
                swan.showToast({
                    title: '音频播放完',
                    duration: 1000
                });
            },
            timeupdate() {
                console.log('audio update');
            }
        }
    };
</script>
```## API
### Props


名称 | 类型 | 默认值 | 是否必选 | 描述 | 其他
--- | --- | --- | --- | --- | ----
id | string | - | 可选 | audio&nbsp;组件的唯一标识符 | -
src | string | - | 可选 | 要播放音频的资源地址 | -
loop | boolean | - | 可选 | 是否循环播放 | -
controls | boolean | - | 可选 | 是否显示默认控件 | -
poster | string | - | 可选 | 默认控件上的音频封面的图片资源地址，如果&nbsp;controls&nbsp;属性值为&nbsp;false&nbsp;则设置&nbsp;poster&nbsp;无效 | -
name | string | 未知音频 | 可选 | 默认控件上的音频名字，如果&nbsp;controls&nbsp;属性值为&nbsp;false&nbsp;则设置&nbsp;name&nbsp;无效 | -
author | string | 未知作者 | 可选 | 默认控件上的作者名字，如果&nbsp;controls&nbsp;属性值为&nbsp;false&nbsp;则设置&nbsp;author&nbsp;无效 | -



### Events


- **error**: 当发生错误时触发

名称 | 类型 | 描述
--- | --- | ---
detail | Object | 错误信息
  errMsg | number | 错误码：1&nbsp;网络错误,&nbsp;2&nbsp;解码错误,&nbsp;3&nbsp;解码错误，4&nbsp;不合适资源

- **pause**: 当暂停播放时触发
	无参数

- **play**: 当开始/继续播放时触发
	无参数

- **ended**: 当播放到末尾时触发
	无参数

- **timeupdate**: 当播放进度改变时触发

名称 | 类型 | 描述
--- | --- | ---
detail | Object | 具体信息
  duration | number | 当前音频/视频的长度
  currentTime | number | 当前播放时间点