vue使用wavesurfer.js实现双声道同时播放和左、右声道单独播放

最新推荐文章于 2024-05-09 10:01:29 发布

米芝芝

最新推荐文章于 2024-05-09 10:01:29 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： javascript vue.js 前端

原文链接：https://segmentfault.com/q/1010000038898014

版权

vue 专栏收录该内容

14 篇文章 1 订阅

订阅专栏

vue使用wavesurfer.js实现双声道同时播放和左、右声道单独播放

<el-select v-model="channel" size="mini" @change="handleChangeChannel">
	<el-option
	    v-for="item in channelOptions"
	    :key="item.value"
	    :label="item.label"
	    :value="item.value"
    />
</el-select>

需要定义的变量：

channel: 'both',
channelOptions: [{ id: 1, value: 'left', label: '左声道' }, { id: 1, value: 'right', label: '右声道' }, { id: 3, value: 'both', label: '同时' }],
leftAudioBuffer: null, // 左声道数据
rightAudioBuffer: null, // 右声道数据
nullAudioBuffer: null,
currentAudioBuffer: null

this.wavesurfer.on('ready', function() {
	// 获取声道数据
	_this.currentAudioBuffer = _this.wavesurfer.backend && _this.wavesurfer.backend.buffer
	if (_this.currentAudioBuffer && _this.currentAudioBuffer.numberOfChannels === 2) {
	    _this.nullAudioBuffer = new Float32Array(_this.currentAudioBuffer.length)
	    _this.leftAudioBuffer = new Float32Array(_this.currentAudioBuffer.length)
	    _this.rightAudioBuffer = new Float32Array(_this.currentAudioBuffer.length)
	    _this.currentAudioBuffer.copyFromChannel(_this.leftAudioBuffer, 0, 0)
	    _this.currentAudioBuffer.copyFromChannel(_this.rightAudioBuffer, 1, 0)
	}
})

// 切换左右声道
 handleChangeChannel(val) {
     var left, right
     // 替换声道的数据，即可将声道静音
     if (val === 'left') {
         left = this.leftAudioBuffer
         right = this.nullAudioBuffer
     } else if (val === 'right') {
         left = this.nullAudioBuffer
         right = this.rightAudioBuffer
     } else if (val === 'both') {
         left = this.leftAudioBuffer
         right = this.rightAudioBuffer
     }
     this.currentAudioBuffer.copyToChannel(left, 0, 0)
     this.currentAudioBuffer.copyToChannel(right, 1, 0)
     this.wavesurfer.drawBuffer()
}