# vue-wavesurfer-player

> Simple Vue wraper for wavesurfer.js

Latest version **0.0.12** (published 2022-07-25) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-wavesurfer-player
pnpm add vue-wavesurfer-player
yarn add vue-wavesurfer-player
bun add vue-wavesurfer-player
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.12 |
| Published | 2022-07-25 |
| First published | 2022-05-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM |
| Dependencies | 2 |
| Unpacked size | 232.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 0 |
| Maintainers | setassan |

## Links

- npm: https://www.npmjs.com/package/vue-wavesurfer-player
- Repository: https://github.com/SetasSan/vue_wavesurfer_player
- Homepage: https://github.com/SetasSan/vue_wavesurfer_player#readme
- Issues: https://github.com/SetasSan/vue_wavesurfer_player/issues
- npm.io page: https://npm.io/package/vue-wavesurfer-player

## Dependencies (2)

- [vue](https://npm.io/package/vue.md) ^3.2.33
- [wavesurfer.js](https://npm.io/package/wavesurfer.js.md) ^6.1.0

## Recent versions

- 0.0.12 (latest) — 2022-07-25
- 0.0.11-n — 2022-07-25
- 0.0.10 — 2022-07-25
- 0.0.9 — 2022-07-25
- 0.0.8 — 2022-07-25
- 0.0.7 — 2022-07-21
- 0.0.6 — 2022-07-21
- 0.0.5 — 2022-07-17
- 0.0.4 — 2022-05-27
- 0.0.3 — 2022-05-26
- 0.0.2 — 2022-05-24
- 0.0.1 — 2022-05-24

## README

Simple Vue wraper for wavesurfer.js

![alt text](https://github.com/SetasSan/vue_wavesurfer_player/blob/master/.github/Player.png?raw=true)


<a href="https://github.com/SetasSan/vue_wavesurfer_player/blob/master/vue_wavesurfer_player/src/App.vue" target="_blank">Example</a>

## Usage
```sh
//main.js
import { createApp } from 'vue'
import App from './App.vue'
import WavesurferPlugin from './WavesurferPlugin';

const app = createApp(App);
app.use(WavesurferPlugin);
app.mount('#app')

import type { WavesurferOptions } from "vue-wavesurfer-player/dist/components/WavesurferOptions";

//import styles
<style>
  @import 'vue-wavesurfer-player/styles.css';
</style>

let options: WavesurferOptions = {
  waveColor: "violet",
  progressColor: "purple",
  scrollParent: false,
  backend: "WebAudio",
  barHeight: .8,
  cursorWidth: 3,
  cursorColor: "#eb7ee9",
  height: 64,
  barWidth: 0.1,
  barGap: 1.5
} as WavesurferOptions;
    
<Wavesurfer
  class="wave-surfer-item"
  :options="wavesurferOption1"
  src="./../soundEffect.wav"
  effectName="Cick effect"
></Wavesurfer>


// or with base64 file
<Wavesurfer
  class="wave-surfer-item"
  :options="wavesurferOption2"
  :srcBase64="fileAsBlob"
  effectName="Cick effect 2"
></Wavesurfer>


by adding: ref="playerRef"
like
<Wavesurfer
  ref="playerRef"
  class="wave-surfer-item"
  :options="wavesurferOption2"
  :srcBase64="fileAsBlob"
  effectName="Cick effect 2"
></Wavesurfer>

you can access functions like:
this.$refs.playerRef.loadBlob(this.fileAsBlob2);
this.$refs.playerRef.loadFile("your_file_url");
this.$refs.playerRef.getDurationInMiliSeconds();
```

---
_Source: https://npm.io/package/vue-wavesurfer-player · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._