vue-player-audio
Advanced tools
Comparing version 0.0.1 to 0.1.0
{ | ||
"name": "vue-player-audio", | ||
"description": "上传文件、本地展示(Vue组件)", | ||
"description": "播放音频文件,支持设置播放时间区间(Vue组件)", | ||
"repository": { | ||
"type": "git", | ||
"url": "git@github.com:realgeoffrey/vue-input-file.git" | ||
"url": "git@github.com:realgeoffrey/vue-player-audio.git" | ||
}, | ||
"keywords": [ | ||
"vue", | ||
"input-file", | ||
"upload-file" | ||
"audio" | ||
], | ||
"author": "realgeoffrey", | ||
"license": "MIT", | ||
"homepage": "https://github.com/realgeoffrey/vue-input-file#readme", | ||
"homepage": "https://github.com/realgeoffrey/vue-player-audio#readme", | ||
"bugs": { | ||
"url": "https://github.com/realgeoffrey/vue-input-file/issues" | ||
"url": "https://github.com/realgeoffrey/vue-player-audio/issues" | ||
}, | ||
"main": "dist/vue-input-file.cjs.js", | ||
"module": "dist/vue-input-file.esm.js", | ||
"unpkg": "dist/vue-input-file.iife.js", | ||
"jsdelivr": "dist/vue-input-file.iife.js", | ||
"main": "dist/vue-player-audio.cjs.js", | ||
"module": "dist/vue-player-audio.esm.js", | ||
"unpkg": "dist/vue-player-audio.iife.js", | ||
"jsdelivr": "dist/vue-player-audio.iife.js", | ||
"scripts": { | ||
@@ -28,6 +27,6 @@ "build": "rollup --config ./build/rollup.config.js " | ||
"devDependencies": { | ||
"@babel/core": "^7.7.2", | ||
"@babel/preset-env": "^7.7.1", | ||
"@babel/core": "^7.7.5", | ||
"@babel/preset-env": "^7.7.6", | ||
"babelrc-rollup": "^3.0.0", | ||
"rollup": "^1.27.2", | ||
"rollup": "^1.27.9", | ||
"rollup-plugin-babel": "^4.3.3", | ||
@@ -39,3 +38,3 @@ "rollup-plugin-commonjs": "^10.1.0", | ||
}, | ||
"version": "0.0.1" | ||
"version": "0.1.0" | ||
} |
111
README.md
# vue-player-audio | ||
播放音频文件,设定播放时间区间(Vue组件) | ||
播放音频文件,支持设置播放时间区间(Vue组件) | ||
1. npm:<https://www.npmjs.com/package/vue-player-audio> | ||
2. demo:<https://realgeoffrey.github.io/vue-player-audio/demo/index.html> | ||
### 安装 | ||
1. Node.js安装 | ||
```bash | ||
npm install vue-player-audio --save | ||
``` | ||
2. 浏览器引用 | ||
```html | ||
<!-- 需要先引入vue:<script src="//unpkg.com/vue"></script> --> | ||
<script src="//unpkg.com/vue-player-audio"></script> | ||
``` | ||
### 注册组件 | ||
1. Node.js注册 | ||
1. 全局注册 | ||
```javascript | ||
import Vue from 'vue' | ||
import vuePlayerAudio from 'vue-player-audio' | ||
// 全局注册 | ||
Vue.use(vuePlayerAudio, { component: 'PlayerAudio' }) // 组件名默认是:vue-player-audio | ||
// 或:Vue.component('PlayerAudio', vuePlayerAudio) | ||
``` | ||
2. 局部注册 | ||
```javascript | ||
import vuePlayerAudio from 'vue-player-audio' | ||
export default { | ||
components: { | ||
// 局部注册 | ||
PlayerAudio: vuePlayerAudio | ||
} | ||
} | ||
``` | ||
2. 浏览器注册 | ||
1. 全局注册 | ||
```html | ||
<!-- 需要先引入vue:<script src="//unpkg.com/vue"></script> --> | ||
<!-- 需要先引入vue-player-audio:<script src="//unpkg.com/vue-player-audio"></script> --> | ||
<script> | ||
// 全局注册 | ||
Vue.use(vuePlayerAudio, { component: 'vue-player-audio' }) // 组件名默认是:vue-player-audio | ||
// 或:Vue.component('vue-player-audio', vuePlayerAudio) | ||
</script> | ||
``` | ||
2. 局部注册 | ||
```html | ||
<!-- 需要先引入vue:<script src="//unpkg.com/vue"></script> --> | ||
<!-- 需要先引入vue-player-audio:<script src="//unpkg.com/vue-player-audio"></script> --> | ||
<script> | ||
new Vue({ | ||
components: { | ||
// 局部注册 | ||
'vue-player-audio': vuePlayerAudio | ||
} | ||
}) | ||
</script> | ||
``` | ||
### 用法 | ||
1. 参数 | ||
```vue | ||
<PlayerAudio | ||
:audio-src="音频src(必填)" | ||
:start-second="开始秒数(0)" | ||
:end-second="结束秒数,0表示直到音频结束,起码播放1秒(0)" | ||
:autoplay="自动播放(false)" | ||
:loop="循环播放(false)" | ||
:loop-gap-millisecond="循环播放间隔时间-毫秒,起码间隔50毫秒(50)" | ||
:controls="展示控制面板(false)" | ||
:preload="预加载模式,none、metadata、auto('metadata')" | ||
/> | ||
``` | ||
>因为兼容性问题,`end-second`与`start-second`最少间隔1秒,`loop-gap-millisecond`最少设置50毫秒。 | ||
2. 插槽 | ||
```vue | ||
<PlayerAudio | ||
:audio-src="音频src(必填)" | ||
v-slot="audioData" | ||
> | ||
<br> | ||
是否在播放:{{ audioData.isPlaying }} | ||
<br> | ||
当前时间:{{ audioData.currentSecond }} | ||
<br> | ||
最大时间:{{ audioData.maxSecond }} | ||
<br> | ||
</PlayerAudio> | ||
``` |
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Empty package
Supply chain riskPackage does not contain any code. It may be removed, is name squatting, or the result of a faulty package publish.
Found 1 instance in 1 package
40588
19
92
112
0