Neumedia-audio-player-m NPM

移动端H5音频播放器

仿喜马拉雅音频播放器，播放音频格式 mp3。

更新历史

版本号	作者	更新记录	更新时间
1.0.0	huang.liang@neusoft.com	初始版本	2020.07.31
1.0.14	huang.liang@neusoft.com	引入 font-awsome 图标	2020.08.19
1.1.0	huang.liang@neusoft.com		2021.06.10

安装

npm install neumedia-audio-player-m

导入

import AudioPlayer from 'neumedia-audio-player-m';

export default {
    components: {
        AudioPlayer
    }
}

使用

<audio-player
    ref="audioPlayer"
    color="#FFFFFF",
    v-model="http://tbwysx.cn/test/yaochun.mp3"
    :duration="123"
    poster="http://tbwysx.cn/test/yaochun.jpeg"
    @handle-backward="handleBackwardClick"
    @handle-forward="handleForwardClick"
>
    <template v-slot:image></template>
    <template v-slot:left-extra></template>
    <template v-slot:right-extra></template>
</audio-player>

API

Props

说明	说明	类型	默认值
v-model	音频文件	String	''
color	文字颜色	String	'#000000'
background	背景样式	String	'#FFFFFF'
poster	封面图片url	String	''
duration	时长（秒）	Number	0

Events

事件名	说明	回调参数
handle-backward	点击“回退”时的触发	player: 播放器对象
handle-forward	点击“前进”时触发	player: 播放器对象

APIs

接口名	说明	参数
play()	开始播放
pause()	停止播放
forward(int seconds)	快进seconds秒	秒数
backward(int seconds)	后退seconds秒	秒数

Slots

名称	说明
image	音频封面图片
button-play	自定义播放按钮
button-pause	自定义暂停按钮
button-backward	自定义后退按钮
button-forward	自定义前进按钮
left-extra	左侧自定义功能按钮
right-extra	右侧自定义功能按钮