Vue Wrapper for wavesurfer.js

Vue Wrapper for wavesurfer.js

Vue Wrapper for wavesurfer.js. Contribute to hunter-isaiah96/vue-wave-sufver development by creating an account on GitHub.

Installation

source-shell
npm i vue-wave-surfer

or

source-shell
yarn add vue-wave-surfer

Module

As a global vue-cli plugin

source-js
import Vue from 'vue'
import VueWaveSurfer from 'vue-wave-surfer'

Vue.use(VueWaveSurfer)

As a nuxt global plugin

source-js
// plugins/vue-wave-surfer.js
import Vue from 'vue'
import VueWaveSurfer from 'vue-wave-surfer'

Vue.use(VueWaveSurfer)
source-js
// nuxt.config.js
export default {
  plugins: [
    '~/plugins/vue-wave-surfer'
  ]
}

As a component plugin

source-js
import VueWaveSurfer from 'vue-wave-surfer'
export default {
  components: {
    VueWaveSurfer
  }
}

Usage

text-html-vue
<template>
  <vue-wave-surfer :src="file" :options="options"></vue-wave-surfer>
</template>
<script>
export default {
  data() {
    return {
      options: {
      },
      file: 'http://example.com/file.mp3'
    }
  }
}
</script>

Options

See the list of options in the official documentation

Using Plugins

An example implementing the Cursor plugin

text-html-vue
<script>
import Cursor from 'wavesurfer.js/dist/plugin/wavesurfer.cursor';
export default {
  data() {
    return {
      options: {
        plugins: [
          Cursor.create()
        ]
      }
    }
  }
}
</script>

Capturing Events

  1. Create a vue-wave-surfer element and adding a ref to it
  2. Create a computed property returning the elemenents waveSurfer object
  3. Access waveSurfer events and methods in the mounted() function

This is a client-only module so be sure to wrap it in a client-only tag if using nuxt

text-html-vue
<vue-wave-surfer src="url.mp3" ref="surf"></vue-wave-surfer>
<script
export default {
  mounted() {
    this.player.on('ready', () => {
      console.log('ready')
    })
  },
  computed: {
    player() {
      return this.$refs.surf.waveSurfer
    }
  }
}
</script>

Github

hunter-isaiah96/vue-wave-sufver

vuejs javascript vue-js

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

Vue ShortKey plugin for Vue.js

Vue-ShortKey - The ultimate shortcut plugin to improve the UX .Vue-ShortKey - plugin for VueJS 2.x accepts shortcuts globaly and in a single listener.

A Vue.js wrapper component for Grid.js

A Vue wrapper component for Grid.js. Grid.js is a Free and open-source HTML table plugin written in TypeScript. It works with most JavaScript frameworks.

Vue.js image clipping Components using Vue-Rx

vuejs-clipper .Vue.js image clipping components using Vue-Rx. Add image clipping components to your Vue application in nothing flat. Touch devices supported and fully responsive.

Vue.js JWT Authentication with Vuex and Vue Router

Build a Vue.js JWT Authentication application using Vuex, Vue Router, VeeValidate - JWT authentication with Vue, Vuex, Vue Router that supports VeeValidate

Vue.js JWT Authentication with Vuex and Vue Router

Vue Vuex JWT Auth .Vue.js JWT Authentication with Vuex and Vue Router