neumedia-audio-player-m

仿喜马拉雅音频播放器,播放音频格式 `mp3`。
805
Install
npm install neumedia-audio-player-m
Latest Version:1.1.4
Vue:2
Last Updated:Jun 10, 2021
Links: npm
Maintainer: hliang-321

移动端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 右侧自定义功能按钮

Version History

Version Released Vue License
1.1.4 ^2.6.11
1.1.3 ^2.6.11
1.1.2 ^2.6.11
1.1.1 ^2.6.11
1.1.0 ^2.6.11