提交 604d472f 编写于 作者: Dcloud_UNI_yuhe's avatar Dcloud_UNI_yuhe

Update audio.md

上级 bcdc0f0f
## audio ## audio
音频。 音频。
**平台差异说明** **平台差异说明**
|App|HarmonyOS|Web|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序| |App|HarmonyOS|Web|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:| |:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|x|√|x|x|x|x| |√|x|√|√|x|√|x|x|x|x|
**注意:** 微信小程序平台自基础库 1.6.0 版本开始,不再维护 audio 组件,推荐使用API方式而不是组件方式来播放音频。API见 [uni.createInnerAudioContext](/api/media/audio-context?id=createinneraudiocontext) 替代。 **注意:** 微信小程序平台自基础库 1.6.0 版本开始,不再维护 audio 组件,推荐使用API方式而不是组件方式来播放音频。API见 [uni.createInnerAudioContext](/api/media/audio-context?id=createinneraudiocontext) 替代。
app-nvue也不支持此组件。 app-nvue也不支持此组件。
如果需要带ui的样式,可以自己做,也可以在插件市场搜索相关[插件](https://ext.dcloud.net.cn/search?q=audio) 如果需要带ui的样式,可以自己做,也可以在插件市场搜索相关[插件](https://ext.dcloud.net.cn/search?q=audio)
**属性说明** 本组件在vue3项目中废弃,只可以在vue2项目中使用
|属性名|类型|默认值|说明| **属性说明**
|:-|:-|:-|:-|
|id|String||audio 组件的唯一标识符| |属性名|类型|默认值|说明|
|src|String||要播放音频的资源地址| |:-|:-|:-|:-|
|loop|Boolean|false|是否循环播放| |id|String||audio 组件的唯一标识符|
|controls|Boolean|false|是否显示默认控件| |src|String||要播放音频的资源地址|
|poster|String||默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效| |loop|Boolean|false|是否循环播放|
|name|String|未知音频|默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效| |controls|Boolean|false|是否显示默认控件|
|author|String|未知作者|默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效| |poster|String||默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效|
|@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}| |name|String|未知音频|默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效|
|@play|EventHandle||当开始/继续播放时触发play事件| |author|String|未知作者|默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效|
|@pause|EventHandle||当暂停播放时触发 pause 事件| |@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}|
|@timeupdate|EventHandle||当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}| |@play|EventHandle||当开始/继续播放时触发play事件|
|@ended|EventHandle||当播放到末尾时触发 ended 事件| |@pause|EventHandle||当暂停播放时触发 pause 事件|
|@timeupdate|EventHandle||当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}|
**MediaError.code** |@ended|EventHandle||当播放到末尾时触发 ended 事件|
|返回错误码|描述| **MediaError.code**
|:-|:-|
|1|获取资源被用户禁止| |返回错误码|描述|
|2|网络错误| |:-|:-|
|3|解码错误| |1|获取资源被用户禁止|
|4|不合适资源| |2|网络错误|
|3|解码错误|
**示例:** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/audio/audio) |4|不合适资源|
```html **示例:** [查看示例](https://hellouniapp.dcloud.net.cn/pages/component/audio/audio)
<template>
<view> ```html
<view class="page-body"> <template>
<view class="page-section page-section-gap" style="text-align: center;"> <view>
<audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio> <view class="page-body">
</view> <view class="page-section page-section-gap" style="text-align: center;">
</view> <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
</view> </view>
</template> </view>
``` </view>
</template>
```
```javascript
export default {
data() { ```javascript
return { export default {
current: { data() {
poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png', return {
name: '致爱丽丝', current: {
author: '暂无', poster: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png',
src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3', name: '致爱丽丝',
}, author: '暂无',
audioAction: { src: 'https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3',
method: 'pause' },
} audioAction: {
} method: 'pause'
} }
} }
``` }
}
![uniapp](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/audio.png) ```
![uniapp](https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/audio.png)
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册