Use audio visualization plugin wavesurfer.js in Vue

Links to invite

website

Basic usage

parameter

Simple Timeline plug-in

Customize the Timeline plug-in

methods

The event

Regions plug-in

First, basic usage

1. Download wavesurfer. Js

$ npm install wavesurfer.js --save
# or 
$ yarn add wavesurfer.js
Copy the code

2. The import

Import in the module

<script>
  import WaveSurfer from 'wavesurfer.js'
  import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline'/ / Timeline plug-in
  import Region from 'wavesurfer.js/dist/plugin/wavesurfer.regions'/ / regions plug-in.export default {}
</script>
Copy the code

3. Create a container

<template>
  <div>
      <! -- Timeline container -->
      <div id="timeline" ref="timeline" />
      <! -- Audio container -->
      <div id="waveform" ref="waveform" />
  </div>
</template>
Copy the code

4. Create an instance

data(){
    return{
        wavesurfer: ' '.speed: 1}},methods:{
...
this.wavesurfer = WaveSurfer.create({
    container: this.$refs.waveform,// Bind the container, the first way
    // container: document.querySelector('#waveform'),// the second method
    // container: '#waveform',// the third way
    audioRate: this.speed,// Control playback speed
    forceDecode: true.waveColor: '#A8DBA8'.progressColor: '#3B8686'.backend: 'MediaElement'
})
this.wavesurfer.load('https://mindflowai-open.oss-cn-hangzhou.aliyuncs.com/505/6mariyokwzjuqjql.wav')// Load the audio. }Copy the code

Timeline plug-in

1. Import the plug-in

. import Timeline from 'wavesurfer.js/dist/plugin/wavesurfer.timeline' ...Copy the code

2. Simple timeline example

.this.wavesurfer = WaveSurfer.create({
    container: this.$refs.waveform,
    ...
    plugins: [
        Timeline.create({
            container: this.$refs.timeline,,// Bind the container
            labelPadding: 2})]})...Copy the code

More parameters

3. Customize complex timelines

. Timeline.create({container: '#timeline'.secondaryColor: '#FF0000'.// Secondary time label color, red
    secondaryFontColor: '#FF0000'.secondaryLabelInterval: this._secondaryLabelInterval,
    primaryColor: '#3498DB'.// The main time label color, blue
    primaryFontColor: '#D3498DB'.primaryLabelInterval: this._primaryLabelInterval,
    formatTimeCallback: this._formatTimeCallback,
    timeInterval: this._timeInterval,
    labelPadding: 2})...Copy the code

4. Rewrite the`formatTimeCallback`methods

Rewrite timeline time format:

_formatTimeCallback(seconds, pxPerSec) {
    seconds = Number(seconds)
    var minutes = Math.floor(seconds / 60)
    seconds = seconds % 60
    var secondsStr = Math.round(seconds).toString()
    if (pxPerSec >= 25 * 10) {
        secondsStr = seconds.toFixed(2)}else if (pxPerSec >= 25 * 1) {
        secondsStr = seconds.toFixed(1)}if (minutes > 0) {
    	if (seconds < 10) {
            secondsStr = '0' + secondsStr
        }
     	return `${minutes}:${secondsStr}`
    }
    return secondsStr
}
Copy the code

5. Rewrite the`timeInterval`methods

Number of rewrite intervals, duration in minutes:

/ * * *@param pxPerSec
* @return The value in minutes */
_timeInterval(pxPerSec) {
    var retval = 1
    if (pxPerSec >= 100) { / / 0.5, 1,1.5, 2,... , 9.5, 10
        retval = 0.5
    } else if (pxPerSec >= 80) { / / 1, 2,... , 9, 10
        retval = 1
    } else if (pxPerSec >= 60) { / / 2,4,6,8,10
        retval = 2
    } else if (pxPerSec >= 40) { / / 5, 10
        retval = 1
    } else if (pxPerSec >= 20) {
        retval = 5
    } else {
        retval = Math.ceil(0.5 / pxPerSec) * 60
    }
    return retval
},
Copy the code

6. Rewrite the`primaryLabelInterval`methods

Number of main time tags overwritten:

_primaryLabelInterval(pxPerSec) {
    var retval = 1
    if (pxPerSec >= 100) {
        retval = 2
    } else if (pxPerSec >= 80) {
        retval = 1
    } else if (pxPerSec >= 60) {
        retval = 1
    } else if (pxPerSec >= 40) {
        retval = 5
    } else if (pxPerSec >= 20) {
        retval = 2
    } else {
        retval = 1
    }
    return retval
},
Copy the code

7. Rewrite the`secondaryLabelInterval`methods

Number of minor time tags overwritten:

_secondaryLabelInterval(pxPerSec) {
    if (pxPerSec >= 20 && pxPerSec < 40) {
        return 12
    } else if (pxPerSec >= 0 && pxPerSec < 20) {
        return 10
    } else {
        return Math.floor(10 / this._timeInterval(pxPerSec))
    }
},
Copy the code

8. `timeInterval`with`primaryLabelInterval`and`secondaryLabelInterval`Relationship between

If the pxPerSec passed in is greater than or equal to 100, _timeInterval(100) returns 0.5 and _primaryLabelInterval(100) returns 2. At this point, the time interval of the main label is 1 second (0.5*2) and consists of two 0.5’s. _secondaryLabelInterval(100) Returns 10 1s.

Three, methods,

1. Play

//play()
this.wavesurfer.play()
Copy the code

2. The suspended

//pause()
this.wavesurfer.pause()
Copy the code

3. Go back to the start and stop

 //stop()
 this.wavesurfer.stop()
Copy the code

4. The replay

//play([start[,end]]), this.wavesurfer.play(0)Copy the code

5. The zoom

//zoom(pxPerSec)
this.wavesurfer.zoom(Number(this.valueZoom))
Copy the code

6. Playback speed

//setPlaybackRate(rate)
this.wavesurfer.setPlaybackRate(this.speed)
Copy the code

7. Adjust your voice

/ / setVolume (newVolume) - set the volume to a new value [0.. 1] (0 = mute, 1 = maximum) enclosing wavesurfer. SetVolume (Number (0.01). This valueRound *)Copy the code

8. Format time

changeTime(seconds) {
    seconds = Number(seconds)
    var minutes = Math.floor(seconds / 60)
    seconds = seconds % 60
    var secondsStr = Math.round(seconds).toString()
    secondsStr = seconds.toFixed(2)
    if (minutes > 0) {
        return `${minutes < 10 ? '0' + minutes : minutes}:${seconds < 10 ? '0' + secondsStr : secondsStr}`
    }
    return ` 00:${seconds < 10 ? '0' + secondsStr : secondsStr}`
},
Copy the code

More methods

Four, events,

1. Regional plugins`region-click`The event

Click on the area to print the start and end time of the area:

this.wavesurfer.on('region-click'.(e) = > {
    const { start, end } = e
    console.log(this.changeTime(start), this.changeTime(end))
})
Copy the code

2. Obtain the current playing time

Listen for the AudioProcess event and return the current time:

this.wavesurfer.on('audioprocess'.function(e) {
    this.currentTime =this.changeTime(this.wavesurfer.getCurrentTime())
})
Copy the code

Regions plug-in

1. The import

import Region from 'wavesurfer.js/dist/plugin/wavesurfer.regions'
Copy the code

2. The initialization

.this.wavesurfer = WaveSurfer.create({
    container: this.$refs.waveform,
    ...
    plugins: [
        Timeline.create({...}),
        Region.create({
              regions: [{start: 1.// Start time
                  end: 3.// End time
                  loop: false.// Whether to loop
                  color: 'hsla (400, 100%, 30% and 0.5)'// Region color
                }, {
                  start: 5.end: 7.loop: false.color: 'hsla (200, 50%, 70% and 0.4)'}].dragSelection: {
                slop: 5}}),]})...Copy the code

3. The demand

After a region is added, the audio of the current region is automatically played and a table information (including the start time and end time) is added.
Click the region to automatically play the audio of the current region and highlight the corresponding table information;
Delete table information at the same time, delete the corresponding region in the audio;

4. Use

1. Obtain the region list

getRegionList(listArr) {
    const _this = this
    _this.tableData = []/ / remove
    if(listArr.length ! = =0) {
        for (let i = listArr.length - 1; i >= 0; i--) { // The latest is first
            _this.tableData.push({ id: listArr[i].id, startTime: _this.changeTime(listArr[i].start), endTime: _this.changeTime(listArr[i].end) })
        }
        _this.total = listArr.length
    }
}
Copy the code

2. Click the area to play the current audio

this.wavesurfer.on('region-click'.(region, mouseEvent) = > {
    this.currentRegion = region
    region.play() Wavesurfer. play(start, end)
})
Copy the code

3. Click the area to highlight the corresponding list item

Add row-class-name to el-table;

<el-table 
    :data="tableData" 
    :row-class-name="tableRowClassName">...Copy the code

The tableRowClassName method looks like this:

tableRowClassName({ row, rowIndex }) {
    if (this.currentRegion.id === row.id) {// Determine by region ID
        return 'success-row'
    }
    return ' '
}
Copy the code

Add styles to the table:

.el-table .success-row {
    background: #d9e2f8;
}
Copy the code

4. Obtain the region list for the first time and generate the corresponding table

/ / wavesurfer. Regions. List: to obtain a list audio in the area
this.regionList = Object.values(this.wavesurfer.regions.list)
// Pass the processed data into the table
this.getRegionList(this.regionList)
Copy the code

5. Add a region, play the current audio, and add table entries

this.wavesurfer.on('region-update-end'.(region) = > {
    /** Two ways to play the area */
    / / this. Wavesurfer. Play (this. CurrentRegion. Start, enclosing currentRegion. End) / / (1)
    region.play()/ / 2.
    
    /** New region list */
    this.regionList = Object.values(this.wavesurfer.regions.list)
    this.getRegionList(this.regionList)
})
Copy the code

6. Delete table entries and delete fields

deleteRegion(row) {
    const arr = this.regionList
    if (arr) {
        arr.forEach((region, index) = > {
            if (row.id === region.id) {
                region.remove()
            	arr.splice(index, 1)
            	this.getRegionList(arr)
            }
        })
    } 
},
Copy the code

6. Cursor plug-in

1. The import

import Cursor from 'wavesurfer.js/dist/plugin/wavesurfer.cursor'
Copy the code

2. The initialization

.this.wavesurfer = WaveSurfer.create({
    container: this.$refs.waveform,
    ...
    plugins: [
        Timeline.create({...}),
        Region.create({...}),
        Cursor.create({
            showTime: true.opacity: 1.customShowTimeStyle: {
                'background-color': '# 000'.color: '#fff'.padding: '2px'.'font-size': '10px'}})]})...Copy the code

3. Polish the style

So far the cursor is shown in full screen. Ideally, the cursor is only displayed in the audio area. Add the following styles:

#waveform{
    position: relative;
}
Copy the code

Use audio visualization plugin wavesurfer.js in Vue

Links to invite

First, basic usage

1. Download wavesurfer. Js

2. The import

3. Create a container

4. Create an instance

Timeline plug-in

1. Import the plug-in

2. Simple timeline example

3. Customize complex timelines

4. Rewrite theformatTimeCallbackmethods

5. Rewrite thetimeIntervalmethods

6. Rewrite theprimaryLabelIntervalmethods

7. Rewrite thesecondaryLabelIntervalmethods

8. timeIntervalwithprimaryLabelIntervalandsecondaryLabelIntervalRelationship between

Three, methods,

1. Play

2. The suspended

3. Go back to the start and stop

4. The replay

5. The zoom

6. Playback speed

7. Adjust your voice

8. Format time

Four, events,

1. Regional pluginsregion-clickThe event

2. Obtain the current playing time

Regions plug-in

1. The import

2. The initialization

3. The demand

4. Use

6. Cursor plug-in

1. The import

2. The initialization

3. Polish the style

Related Posts

Vue: This.$options.data()

Compile from front end to handwritten Babel

JavaScript manipulates the COMMON APIS of the DOM

4. Rewrite the`formatTimeCallback`methods

5. Rewrite the`timeInterval`methods

6. Rewrite the`primaryLabelInterval`methods

7. Rewrite the`secondaryLabelInterval`methods

8. `timeInterval`with`primaryLabelInterval`and`secondaryLabelInterval`Relationship between

1. Regional plugins`region-click`The event