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 theformatTimeCallbackmethods

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 thetimeIntervalmethods

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 theprimaryLabelIntervalmethods

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 thesecondaryLabelIntervalmethods

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. timeIntervalwithprimaryLabelIntervalandsecondaryLabelIntervalRelationship 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 pluginsregion-clickThe 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