代码演示
引入
;
基础用法
通过src
属性设置音频资源的地址
<AudioPlayer =/>
显示音频名称
通过title
属性显示音频名称
<AudioPlayer = ='泡沫'/>
显示作者
通过author
属性显示作者
<AudioPlayer = ='泡沫' ='邓紫棋'/>
自动播放
通过autoplay
设置
<AudioPlayer = ='泡沫' ='邓紫棋' />
进度条是否可拖拽
通过draggable
设置
<AudioPlayer = ='泡沫' ='邓紫棋' = =/>
设置海报
通过poster
设置
AudioPlayer src= title='泡沫' author='邓紫棋' autoplay= draggable poster=/
Props
参数 | 说明 | 类型 | 默认值 | 是否必须 |
---|---|---|---|---|
src | 音频资源的地址 | string |
无 | 是 |
draggable | 是否可以拖动进度条 | boolean |
true | 否 |
title | 音频名称 | string |
无 | 否 |
author | 音频作者 | string |
无 | 否 |
autoplay | 是否自动播放 | boolean |
false |
否 |
poster | 音频海报 | string |
无 | 否 |
onPlay | 当开始/继续播放时触发play事件 | eventHandle |
无 | 否 |
onPause | 当暂停播放时触发 pause 事件 | eventHandle |
无 | 否 |
onEnded | 当播放到末尾时触发 ended 事件 | eventHandle |
无 | 否 |
onTimeUpdate | 当播放进度改变时触发 timeupdate 事件,detail = {currentTime, duration} | eventHandle |
无 | 否 |
onError | 当发生错误时触发 error 事件,detail = {errMsg:MediaError.code} | eventHandle |
无 | 否 |