Skip to content
体验新版
项目
组织
正在加载...
登录
切换导航
打开侧边栏
DCloud
unidocs-zh
提交
b0f6b4a1
unidocs-zh
项目概览
DCloud
/
unidocs-zh
通知
3172
Star
105
Fork
804
代码
文件
提交
分支
Tags
贡献者
分支图
Diff
Issue
93
列表
看板
标记
里程碑
合并请求
67
DevOps
流水线
流水线任务
计划
Wiki
0
Wiki
分析
仓库
DevOps
项目成员
Pages
unidocs-zh
项目概览
项目概览
详情
发布
仓库
仓库
文件
提交
分支
标签
贡献者
分支图
比较
Issue
93
Issue
93
列表
看板
标记
里程碑
合并请求
67
合并请求
67
Pages
DevOps
DevOps
流水线
流水线任务
计划
分析
分析
仓库分析
DevOps
Wiki
0
Wiki
成员
成员
收起侧边栏
关闭侧边栏
动态
分支图
创建新Issue
流水线任务
提交
Issue看板
提交
b0f6b4a1
编写于
7月 10, 2024
作者:
Dcloud_UNI_yuhe
浏览文件
操作
浏览文件
下载
差异文件
Merge branch 'GRC__cheng-master-patch-59139' into 'master'
Update audio.md See merge request
!234
上级
98a0be0d
604d472f
变更
1
隐藏空白更改
内联
并排
Showing
1 changed file
with
77 addition
and
75 deletion
+77
-75
docs/component/audio.md
docs/component/audio.md
+77
-75
未找到文件。
docs/component/audio.md
浏览文件 @
b0f6b4a1
## audio
音频。
**平台差异说明**
|App|HarmonyOS|Web|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|x|√|x|x|x|x|
**注意:**
微信小程序平台自基础库 1.6.0 版本开始,不再维护 audio 组件,推荐使用API方式而不是组件方式来播放音频。API见
[
uni.createInnerAudioContext
](
/api/media/audio-context?id=createinneraudiocontext
)
替代。
app-nvue也不支持此组件。
如果需要带ui的样式,可以自己做,也可以在插件市场搜索相关
[
插件
](
https://ext.dcloud.net.cn/search?q=audio
)
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|id|String||audio 组件的唯一标识符|
|src|String||要播放音频的资源地址|
|loop|Boolean|false|是否循环播放|
|controls|Boolean|false|是否显示默认控件|
|poster|String||默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效|
|name|String|未知音频|默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效|
|author|String|未知作者|默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效|
|@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}|
|@play|EventHandle||当开始/继续播放时触发play事件|
|@pause|EventHandle||当暂停播放时触发 pause 事件|
|@timeupdate|EventHandle||当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}|
|@ended|EventHandle||当播放到末尾时触发 ended 事件|
**MediaError.code**
|返回错误码|描述|
|:-|:-|
|1|获取资源被用户禁止|
|2|网络错误|
|3|解码错误|
|4|不合适资源|
**示例:**
[
查看示例
](
https://hellouniapp.dcloud.net.cn/pages/component/audio/audio
)
```
html
<template>
<view>
<view
class=
"page-body"
>
<view
class=
"page-section page-section-gap"
style=
"text-align: center;"
>
<audio
style=
"text-align: left"
:src=
"current.src"
:poster=
"current.poster"
:name=
"current.name"
:author=
"current.author"
:action=
"audioAction"
controls
></audio>
</view>
</view>
</view>
</template>
```
```
javascript
export
default
{
data
()
{
return
{
current
:
{
poster
:
'
https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png
'
,
name
:
'
致爱丽丝
'
,
author
:
'
暂无
'
,
src
:
'
https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3
'
,
},
audioAction
:
{
method
:
'
pause
'
}
}
}
}
```
![
uniapp
](
https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/audio.png
)
## audio
音频。
**平台差异说明**
|App|HarmonyOS|Web|微信小程序|支付宝小程序|百度小程序|抖音小程序、飞书小程序|QQ小程序|快手小程序|京东小程序|
|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|:-:|
|√|x|√|√|x|√|x|x|x|x|
**注意:**
微信小程序平台自基础库 1.6.0 版本开始,不再维护 audio 组件,推荐使用API方式而不是组件方式来播放音频。API见
[
uni.createInnerAudioContext
](
/api/media/audio-context?id=createinneraudiocontext
)
替代。
app-nvue也不支持此组件。
如果需要带ui的样式,可以自己做,也可以在插件市场搜索相关
[
插件
](
https://ext.dcloud.net.cn/search?q=audio
)
本组件在vue3项目中废弃,只可以在vue2项目中使用
**属性说明**
|属性名|类型|默认值|说明|
|:-|:-|:-|:-|
|id|String||audio 组件的唯一标识符|
|src|String||要播放音频的资源地址|
|loop|Boolean|false|是否循环播放|
|controls|Boolean|false|是否显示默认控件|
|poster|String||默认控件上的音频封面的图片资源地址,如果 controls 属性值为 false 则设置 poster 无效|
|name|String|未知音频|默认控件上的音频名字,如果 controls 属性值为 false 则设置 name 无效|
|author|String|未知作者|默认控件上的作者名字,如果 controls 属性值为 false 则设置 author 无效|
|@error|EventHandle||当发生错误时触发 error 事件,detail = {errMsg: MediaError.code}|
|@play|EventHandle||当开始/继续播放时触发play事件|
|@pause|EventHandle||当暂停播放时触发 pause 事件|
|@timeupdate|EventHandle||当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration}|
|@ended|EventHandle||当播放到末尾时触发 ended 事件|
**MediaError.code**
|返回错误码|描述|
|:-|:-|
|1|获取资源被用户禁止|
|2|网络错误|
|3|解码错误|
|4|不合适资源|
**示例:**
[
查看示例
](
https://hellouniapp.dcloud.net.cn/pages/component/audio/audio
)
```
html
<template>
<view>
<view
class=
"page-body"
>
<view
class=
"page-section page-section-gap"
style=
"text-align: center;"
>
<audio
style=
"text-align: left"
:src=
"current.src"
:poster=
"current.poster"
:name=
"current.name"
:author=
"current.author"
:action=
"audioAction"
controls
></audio>
</view>
</view>
</view>
</template>
```
```
javascript
export
default
{
data
()
{
return
{
current
:
{
poster
:
'
https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/music-a.png
'
,
name
:
'
致爱丽丝
'
,
author
:
'
暂无
'
,
src
:
'
https://web-ext-storage.dcloud.net.cn/uni-app/ForElise.mp3
'
,
},
audioAction
:
{
method
:
'
pause
'
}
}
}
}
```
![
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.
先完成此消息的编辑!
取消
想要评论请
注册
或
登录