Waveurfer.js的Vue包装器

Wavesfer-Vue (wavesurfer-vue)

Vue Wrapper for wavesurfer.js.

Waveurfer.js的Vue包装器。

安装 (Installation)

npm install vue-wavesurfer

模组 (Module)

As a global vue-cli plugin

作为全球vue-cli插件

import Vue from 'vue'
import VueWaveSurfer from 'vue-wavesurfer'

Vue.use(VueWaveSurfer)

As a nuxt global plugin

作为nuxt全局插件

// plugins/vue-wavesurfer.js
import Vue from 'vue'
import VueWaveSurfer from 'wavesurfer-vue'

Vue.use(VueWaveSurfer)

// nuxt.config.js
export default {
  plugins: [
    '~/plugins/vue-wavesurfer'
  ]
}

As a component plugin

作为组件插件

import VueWaveSurfer from 'vue-wavesurfer'
export default {
  components: {
    VueWaveSurfer
  }
}

用法 (Usage)

<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 implenting the Cursor plugin

实例化Cursor插件

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

翻译自: https://vuejsexamples.com/vue-wrapper-for-wavesurfer-js/