npm i wavesurfer.js-vue wavesurfer.js
As a global vue-cli plugin
import Vue from "vue";
import WaveSurferVue from "wavesurfer.js-vue";
Vue.use(WaveSurferVue);
As a nuxt global plugin
// plugins/wavesurfer.js-vue.js
import Vue from "vue";
import WaveSurferVue from "wavesurfer.js-vue";
Vue.use(WaveSurferVue);
// nuxt.config.js
export default {
plugins: ["~/plugins/wavesurfer.js-vue"],
};
As a component plugin
import WaveSurferVue from "wavesurfer.js-vue";
export default {
components: {
WaveSurferVue,
},
};
<template>
<wavesurfer :src="file" :options="options"></wavesurfer>
</template>
<script>
export default {
data() {
return {
options: {},
file: "http://example.com/file.mp3",
};
},
};
</script>
See the list of options in the official documentation
An example implementing the Cursor plugin
<script>
import Cursor from "wavesurfer.js/dist/plugin/wavesurfer.cursor";
export default {
data() {
return {
options: {
plugins: [Cursor.create()],
},
};
},
};
</script>
- Create a wavesurfer.js-vue element and adding a ref to it
- Create a computed property returning the elemenents waveSurfer object
- 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
<wavesurfer.js-vue src="url.mp3" ref="surf"></wavesurfer.js-vue>
<script
export default {
mounted() {
this.player.on('ready', () => {
console.log('ready')
})
},
computed: {
player() {
return this.$refs.surf.waveSurfer
}
}
}
</script>
Based on @hunter-isaiah96 package (https://github.com/hunter-isaiah96/vue-wave-sufver)