audio

音频。

平台差异说明

5+AppH5微信小程序支付宝小程序百度小程序头条小程序
√√√x√x

注意： 微信小程序平台自基础库 1.6.0 版本开始，不再维护 audio 组件，建议在微信小程序平台使用 uni.createInnerAudioContext 替代。

属性说明

属性名类型默认值说明
idStringaudio 组件的唯一标识符
srcString要播放音频的资源地址
loopBooleanfalse是否循环播放
controlsBooleanfalse是否显示默认控件
posterString默认控件上的音频封面的图片资源地址，如果 controls 属性值为 false 则设置 poster 无效
nameString未知音频默认控件上的音频名字，如果 controls 属性值为 false 则设置 name 无效
authorString未知作者默认控件上的作者名字，如果 controls 属性值为 false 则设置 author 无效
@errorEventHandle当发生错误时触发 error 事件，detail = {errMsg: MediaError.code}
@playEventHandle当开始/继续播放时触发play事件
@pauseEventHandle当暂停播放时触发 pause 事件
@timeupdateEventHandle当播放进度改变时触发 timeupdate 事件，detail = {currentTime, duration}
@endedEventHandle当播放到末尾时触发 ended 事件

MediaError.code

返回错误码描述
1获取资源被用户禁止
2网络错误
3解码错误
4不合适资源

示例：

  1. <template>
  2.     <view>
  3.         <view class="page-body">
  4.             <view class="page-section page-section-gap" style="text-align: center;">
  5.                 <audio style="text-align: left" :src="current.src" :poster="current.poster" :name="current.name" :author="current.author" :action="audioAction" controls></audio>
  6.             </view>
  7.         </view>
  8.     </view>
  9. </template>
  1. export default {
  2.     data() {
  3.         return {
  4.             current: {
  5.                 poster: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.jpg',
  6.                 name: '致爱丽丝',
  7.                 author: '暂无',
  8.                 src: 'https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3',
  9.             },
  10.             audioAction: {
  11.                 method: 'pause'
  12.             }
  13.         }
  14.     }
  15. }

uniapp

发现错误？想参与编辑？在 GitHub 上编辑此页面！