neumedia-audio-player-m
v1.1.4
Published
仿喜马拉雅音频播放器,播放音频格式 `mp3`。
Downloads
12
Readme
移动端H5音频播放器
仿喜马拉雅音频播放器,播放音频格式 mp3
。
更新历史
| 版本号 | 作者 | 更新记录 | 更新时间 | | ------- | ----------------------- | -------- | ------- | | 1.0.0 | [email protected] | 初始版本 | 2020.07.31 | | 1.0.14 | [email protected] | 引入 font-awsome 图标 | 2020.08.19 | | 1.1.0 | [email protected] | | 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 | 右侧自定义功能按钮 |