@meersagor/wavesurfer-vue 0.0.1 → 0.0.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/README.md
CHANGED
|
@@ -1,46 +1,117 @@
|
|
|
1
|
-
# @wavesurfer
|
|
1
|
+
# @meersagor/wavesurfer-vue
|
|
2
2
|
|
|
3
|
-
|
|
3
|
+
[](https://www.npmjs.com/package/@meersagor/wavesurfer-vue)
|
|
4
4
|
|
|
5
|
-
|
|
5
|
+
A Vue 3 component for [wavesurfer.js](http://github.com/katspaugh/wavesurfer.js). This component simplifies the usage of wavesurfer.js in Vue.js, with all familiar wavesurfer options available as Vue props.
|
|
6
6
|
|
|
7
|
-
[
|
|
7
|
+
You can subscribe to various [wavesurfer events](https://wavesurfer.xyz/docs/types/wavesurfer.WaveSurferEvents) via props. Simply prepend an event name with 'on', e.g., `ready` -> `@ready`. Each event receives a wavesurfer instance as the first argument.
|
|
8
8
|
|
|
9
|
-
## Type Support for `.vue` Imports in TS
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
## Installation
|
|
12
11
|
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)`
|
|
18
|
-
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette.
|
|
19
|
-
|
|
20
|
-
## Customize configuration
|
|
21
|
-
|
|
22
|
-
See [Vite Configuration Reference](https://vitejs.dev/config/).
|
|
23
|
-
|
|
24
|
-
## Project Setup
|
|
12
|
+
With yarn:
|
|
13
|
+
```bash
|
|
14
|
+
yarn add @meersagor/wavesurfer-vue
|
|
15
|
+
```
|
|
25
16
|
|
|
26
|
-
|
|
27
|
-
|
|
17
|
+
With npm:
|
|
18
|
+
```bash
|
|
19
|
+
npm i @meersagor/wavesurfer-vue
|
|
28
20
|
```
|
|
29
21
|
|
|
30
|
-
|
|
22
|
+
## Usage
|
|
23
|
+
|
|
24
|
+
As a component:
|
|
25
|
+
|
|
26
|
+
```vue
|
|
27
|
+
<script setup lang="ts">
|
|
28
|
+
import { ref } from 'vue'
|
|
29
|
+
import type WaveSurfer from 'wavesurfer.js'
|
|
30
|
+
import { WaveSurferPlayer } from '@meersagor/wavesurfer-vue'
|
|
31
|
+
|
|
32
|
+
|
|
33
|
+
const options = ref({
|
|
34
|
+
height: 48,
|
|
35
|
+
waveColor: 'gray',
|
|
36
|
+
progressColor: 'red',
|
|
37
|
+
barGap: 5,
|
|
38
|
+
barWidth: 5,
|
|
39
|
+
barRadius: 8,
|
|
40
|
+
duration: 80,
|
|
41
|
+
// cursorWidth: 0,
|
|
42
|
+
url: "https://revews-bucket.s3.ap-southeast-1.amazonaws.com/a06mmMU3sgnzuUkH4OiHvyuUgCFdLSnJaDLBao7y.webm",
|
|
43
|
+
})
|
|
44
|
+
|
|
45
|
+
const currentTime = ref<string>('00:00')
|
|
46
|
+
const totalDuration = ref<string>('00:00')
|
|
47
|
+
const waveSurfer = ref<WaveSurfer | null>(null)
|
|
48
|
+
|
|
49
|
+
const formatTime = (seconds: number): string => [seconds / 60, seconds % 60].map((v) => `0${Math.floor(v)}`.slice(-2)).join(':')
|
|
50
|
+
|
|
51
|
+
const timeUpdateHandler = (time: number) => {
|
|
52
|
+
currentTime.value = formatTime(time)
|
|
53
|
+
}
|
|
54
|
+
const readyHandler = (duration: any) => {
|
|
55
|
+
totalDuration.value = formatTime(duration)
|
|
56
|
+
}
|
|
57
|
+
const readyWaveSurferHandler = (ws: WaveSurfer) => {
|
|
58
|
+
waveSurfer.value = ws
|
|
59
|
+
}
|
|
60
|
+
</script>
|
|
61
|
+
|
|
62
|
+
<template>
|
|
63
|
+
<main>
|
|
64
|
+
<h1>WaveSurferPlayer Using Components </h1>
|
|
65
|
+
<WaveSurferPlayer :options="options" @timeupdate="(time: number) => timeUpdateHandler(time)"
|
|
66
|
+
@ready="(duration: number) => readyHandler(duration)" @waveSurfer="(ws: WaveSurfer) => readyWaveSurferHandler(ws)" />
|
|
67
|
+
<p> currentTime: {{ currentTime }}</p>
|
|
68
|
+
<p>totalDuration:{{ totalDuration }}</p>
|
|
69
|
+
<button @click="waveSurfer?.playPause()" :style="{ minWidth: '5em' }">
|
|
70
|
+
Play
|
|
71
|
+
</button>
|
|
72
|
+
</main>
|
|
73
|
+
</template>
|
|
74
|
+
```
|
|
31
75
|
|
|
32
|
-
|
|
33
|
-
|
|
76
|
+
Alternatively, as a vue composable method:
|
|
77
|
+
|
|
78
|
+
```vue
|
|
79
|
+
<script setup lang="ts">
|
|
80
|
+
import { ref } from 'vue'
|
|
81
|
+
import {useWaveSurfer} from '@meersagor/wavesurfer-vue'
|
|
82
|
+
const containerRef = ref<HTMLElement | null>(null)
|
|
83
|
+
const options = ref({
|
|
84
|
+
height: 48,
|
|
85
|
+
waveColor: 'gray',
|
|
86
|
+
progressColor: 'red',
|
|
87
|
+
barGap: 5,
|
|
88
|
+
barWidth: 5,
|
|
89
|
+
barRadius: 8,
|
|
90
|
+
duration: 80,
|
|
91
|
+
url: "https://revews-bucket.s3.ap-southeast-1.amazonaws.com/a06mmMU3sgnzuUkH4OiHvyuUgCFdLSnJaDLBao7y.webm",
|
|
92
|
+
})
|
|
93
|
+
|
|
94
|
+
const {waveSurfer, currentTime, totalDuration} = useWaveSurfer({containerRef, options: options.value})
|
|
95
|
+
|
|
96
|
+
const formatTime = (seconds: number):string => [seconds / 60, seconds % 60].map((v) => `0${Math.floor(v)}`.slice(-2)).join(':')
|
|
97
|
+
</script>
|
|
98
|
+
|
|
99
|
+
<template>
|
|
100
|
+
<main>
|
|
101
|
+
<h1>WaveSurferPlayer Using Composeable Method </h1>
|
|
102
|
+
<div ref="containerRef"></div>
|
|
103
|
+
<p>currentTime: {{formatTime(currentTime)}}</p>
|
|
104
|
+
<p>totalDuration:{{formatTime(totalDuration)}}</p>
|
|
105
|
+
<button @click="waveSurfer?.playPause()">
|
|
106
|
+
Play
|
|
107
|
+
</button>
|
|
108
|
+
</main>
|
|
109
|
+
</template>
|
|
34
110
|
```
|
|
35
111
|
|
|
36
|
-
|
|
112
|
+
## Docs
|
|
37
113
|
|
|
38
|
-
|
|
39
|
-
npm run build
|
|
40
|
-
```
|
|
114
|
+
https://wavesurfer.xyz
|
|
41
115
|
|
|
42
|
-
|
|
116
|
+
If you have any specific preferences or additional changes you'd like, feel free to PR
|
|
43
117
|
|
|
44
|
-
```sh
|
|
45
|
-
npm run lint
|
|
46
|
-
```
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("wavesurfer.js")):typeof define=="function"&&define.amd?define(["exports","vue","wavesurfer.js"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l["@meersagor/wavesurfer-vue"]={},l.Vue,l.WaveSurfer))})(this,function(l,e,d){"use strict";const f=({containerRef:n,options:r})=>{const t=e.ref(null),o=()=>{n.value&&(t.value=d.create({container:n.value,...r}))},a=()=>{t.value&&(t.value.destroy(),t.value=null)};return e.onMounted(()=>{o()}),e.onUnmounted(()=>{a()}),{waveSurfer:t}},v=n=>{const r=e.ref(!1),t=e.ref(!1),o=e.ref(0),a=e.ref(0),u=()=>{r.value=!1,t.value=!1,o.value=0},s=W=>{r.value=!0,t.value=!1,o.value=0,a.value=W},i=()=>{t.value=!0},m=()=>{t.value=!1},S=()=>{n.value&&(o.value=n.value.getCurrentTime())},h=()=>{r.value=!1,t.value=!1};return e.onMounted(()=>{n.value&&(n.value.on("load",u),n.value.on("ready",s),n.value.on("play",i),n.value.on("pause",m),n.value.on("timeupdate",S),n.value.on("destroy",h))}),e.onUnmounted(()=>{n.value&&n.value.unAll()}),{isReady:r,isPlaying:t,currentTime:o,totalDuration:a}},c=({containerRef:n,options:r})=>{const{waveSurfer:t}=f({containerRef:n,options:r}),{isReady:o,totalDuration:a,isPlaying:u,currentTime:s}=v(t);return{waveSurfer:t,isReady:o,totalDuration:a,isPlaying:u,currentTime:s}},p=["audioprocess","click","dblclick","decode","drag","finish","init","interaction","load","loading","pause","play","ready","redraw","redrawcomplete","scroll","seeking","timeupdate","zoom"],y=e.defineComponent({__name:"WaveSurferPlayer",props:{options:{}},setup(n){const r=n,t=e.ref(null),{waveSurfer:o}=c({containerRef:t,options:r.options}),a=e.getCurrentInstance();return e.onMounted(()=>{p.forEach(u=>{var s;(s=o.value)==null||s.on(u,(...i)=>{a==null||a.emit(u,...i)})}),a==null||a.emit("waveSurfer",o.value)}),(u,s)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:t},null,512))}});l.WaveSurferPlayer=y,l.useWaveSurfer=c,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
package/package.json
CHANGED
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
{
|
|
2
2
|
"author": "Meer Sagor",
|
|
3
3
|
"name": "@meersagor/wavesurfer-vue",
|
|
4
|
-
"version": "0.0.
|
|
4
|
+
"version": "0.0.2",
|
|
5
5
|
"description": "Vue3 component for wavesurfer.js",
|
|
6
6
|
"private": false,
|
|
7
7
|
"type": "module",
|
|
8
|
-
"license":"GPL-2.0",
|
|
8
|
+
"license": "GPL-2.0",
|
|
9
9
|
"files": [
|
|
10
10
|
"dist"
|
|
11
11
|
],
|
|
@@ -17,12 +17,12 @@
|
|
|
17
17
|
"url": "https://github.com/meer-sagor/wavesufer-vue/issues"
|
|
18
18
|
},
|
|
19
19
|
"homepage": "https://wavesurfer.xyz",
|
|
20
|
-
"main": "./dist/@wavesurfer-vue.umd.cjs",
|
|
21
|
-
"module": "./dist/@wavesurfer-vue.js",
|
|
20
|
+
"main": "./dist/@meersagor-wavesurfer-vue.umd.cjs",
|
|
21
|
+
"module": "./dist/@meersagor-wavesurfer-vue.js",
|
|
22
22
|
"exports": {
|
|
23
23
|
".": {
|
|
24
|
-
"import": "./dist/@wavesurfer-vue.js",
|
|
25
|
-
"require": "./dist/@wavesurfer-vue.umd.cjs"
|
|
24
|
+
"import": "./dist/@meersagor-wavesurfer-vue.js",
|
|
25
|
+
"require": "./dist/@meersagor-wavesurfer-vue.umd.cjs"
|
|
26
26
|
}
|
|
27
27
|
},
|
|
28
28
|
"types": "./dist/index.d.ts",
|
|
@@ -45,7 +45,7 @@
|
|
|
45
45
|
"type-check": "vue-tsc --build --force",
|
|
46
46
|
"lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs,.ts,.tsx,.cts,.mts --fix --ignore-path .gitignore",
|
|
47
47
|
"format": "prettier --write src/",
|
|
48
|
-
"link-pack": "(yarn --global unlink '@wavesurfer
|
|
48
|
+
"link-pack": "(yarn --global unlink '@meersagor/wavesurfer-vue' || true) && yarn --global link"
|
|
49
49
|
},
|
|
50
50
|
"dependencies": {
|
|
51
51
|
"vue": "^3.3.11",
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
(function(l,e){typeof exports=="object"&&typeof module<"u"?e(exports,require("vue"),require("wavesurfer.js")):typeof define=="function"&&define.amd?define(["exports","vue","wavesurfer.js"],e):(l=typeof globalThis<"u"?globalThis:l||self,e(l["@wavesurfer/vue"]={},l.Vue,l.WaveSurfer))})(this,function(l,e,d){"use strict";const f=({containerRef:n,options:r})=>{const t=e.ref(null),o=()=>{n.value&&(t.value=d.create({container:n.value,...r}))},a=()=>{t.value&&(t.value.destroy(),t.value=null)};return e.onMounted(()=>{o()}),e.onUnmounted(()=>{a()}),{waveSurfer:t}},v=n=>{const r=e.ref(!1),t=e.ref(!1),o=e.ref(0),a=e.ref(0),u=()=>{r.value=!1,t.value=!1,o.value=0},s=W=>{r.value=!0,t.value=!1,o.value=0,a.value=W},i=()=>{t.value=!0},m=()=>{t.value=!1},S=()=>{n.value&&(o.value=n.value.getCurrentTime())},h=()=>{r.value=!1,t.value=!1};return e.onMounted(()=>{n.value&&(n.value.on("load",u),n.value.on("ready",s),n.value.on("play",i),n.value.on("pause",m),n.value.on("timeupdate",S),n.value.on("destroy",h))}),e.onUnmounted(()=>{n.value&&n.value.unAll()}),{isReady:r,isPlaying:t,currentTime:o,totalDuration:a}},c=({containerRef:n,options:r})=>{const{waveSurfer:t}=f({containerRef:n,options:r}),{isReady:o,totalDuration:a,isPlaying:u,currentTime:s}=v(t);return{waveSurfer:t,isReady:o,totalDuration:a,isPlaying:u,currentTime:s}},p=["audioprocess","click","dblclick","decode","drag","finish","init","interaction","load","loading","pause","play","ready","redraw","redrawcomplete","scroll","seeking","timeupdate","zoom"],y=e.defineComponent({__name:"WaveSurferPlayer",props:{options:{}},setup(n){const r=n,t=e.ref(null),{waveSurfer:o}=c({containerRef:t,options:r.options}),a=e.getCurrentInstance();return e.onMounted(()=>{p.forEach(u=>{var s;(s=o.value)==null||s.on(u,(...i)=>{a==null||a.emit(u,...i)})}),a==null||a.emit("waveSurfer",o.value)}),(u,s)=>(e.openBlock(),e.createElementBlock("div",{ref_key:"containerRef",ref:t},null,512))}});l.WaveSurferPlayer=y,l.useWaveSurfer=c,Object.defineProperty(l,Symbol.toStringTag,{value:"Module"})});
|
|
File without changes
|