the wrapper of wavesurfer.js for vue
npm install wavesurfer.vuewavesurfer.vue は wavesurfer.js を vue で使用するためのラッパーです.
Web Audio API および HTML5 Canvas の上に構築されたカスタマイズ可能な音声波形の視覚化を提供します.
以下のコマンドより導入可能です.
``bash`
$ yarn add wavesurfer.vue
wavesurfer.vue はプラグインとして作成されています.main.ts
利用を開始するには に以下の記述を行います.
`typescript
import { createApp } from 'vue'
import WaveSurfer from "wavesurfer.vue";
import App from './App.vue'
const app = createApp(App)
app.use(WaveSurfer)
app.mount('#app')
`
WaveSurfer コンポーネントは以下のように利用します.
`vue
autoScroll
progressColor="#555"
cursorColor="#333"
:cursorWidth="1"
:hideScrollbar="false"
:minPxPerSec="100"
:source="source"
/>
`
このライブラリで用意しているいくつかのコンポーネントには
Vutify3 という UI キットを利用しています.
これらのツールを利用する場合,
以下のコマンドから環境構築を行うことがおすすめされています.
`{bash}`
yarn create vuetify
これを前提に利用を開始する場合には,
まず, src/plugins/vutify.ts において,
Vutify3 の全ての機能を有効にする必要があります.
具体的には以下のように設定を行ってください.
`{typescript}
/**
* plugins/vuetify.ts
*
* Framework documentation: https://vuetifyjs.com
*/
// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
// Composables
import { createVuetify } from 'vuetify'
// https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
export default createVuetify({
components,
directives,
theme: {
themes: {
light: {
colors: {
primary: '#1867C0',
secondary: '#5CBBF6',
},
},
},
},
})
``
その上で, src/plugins/index.ts において,
Wavsurfer.vue を有効にします.
`{typescript}./src/main.ts
/**
* plugins/index.ts
*
* Automatically included in
*/
// Plugins
import WaveSurfer from "wavesurfer.vue";
import vuetify from './vuetify'
...
export function registerPlugins (app: App) {
app
.use(vuetify)
...
.use(WaveSurfer)
}
`
`bash`
yarn install
#### Compiles and hot-reloads for development
`bash``
yarn dev