js实现音频PCM数据合并、拼接、裁剪、调节音量等功能

最新推荐文章于 2024-07-24 18:42:39 发布

不知名前端

最新推荐文章于 2024-07-24 18:42:39 发布

阅读量7.4k

点赞数 7

分类专栏：音视频专栏

本文链接：https://blog.csdn.net/yun_master/article/details/108308112

版权

关于音频的内容,我边学习,边实践也总结了一些,从最开始实现一个简单的web音乐播放器的自定义工具栏,到后来的实现简单的音频频谱图.直到今天的对音频数据进行的进一步操作,我也是一点点的在进步.虽然很多地方,并不是那么完美和准确,但是希望能和大家能共同学习进步.

一、准备工作

声音的基本原理

首先关于音频的一些原理性的内容,在之前的https://blog.csdn.net/yun_master/article/details/104133520关于音频频谱的博客中已经简单介绍过了,这里就不详细展开来说了

前端操作内存的方法

但是如果要实现对音频PCM数据的修改,只是了解了声音的原理,恐怕还是有点不太够用.
这里还需要了解es6中提供的arrayBuffer以及其视图的相关内容,这里推荐阮一峰老师的es6入门这本书的关于arrayBuffer这个章节,进行简单的了解

web audio API

这方面的内容,也是很重要的一部分内容、但是由于web Audio API实在太多了,往往在用的时候再去看,已然是来不及了.那个时候往往是一头雾水,面对海量API无从下手,不知道从哪里入手.所以推荐利用空闲时间、从最基础的api看起.慢慢会发现,真正常用的功能所需要的,并不是特别多.
推荐MDN关于这一部分的介绍:https://developer.mozilla.org/zh-CN/docs/Web/API/Web_Audio_API

二、音频处理

如果想要快速实现一些针对音频PCM数据的处理工作,推荐使用crunker这个方法库,虽然功能有限,但是对于获取音频二进制数据、合并、拼接等工作,安装方便、使用简单.重要的是性能真的不错.
npm地址:https://www.npmjs.com/package/crunker

音频裁剪

原理:音频裁剪,其实就是对音频数据的裁剪,并拷贝出来,创建一份新的音频数据.这就是音频的裁剪.

//获取audioBuffer数据的方式之一
fetch(audioUrl)
	.then(res => res.arrayBuffer())
	.then(buffer => {
     // 获取音频二进制数据
		const audioCtx = new audioContext();
		audioCtx.decodeAudio(buffer)
			.then(audioBuffer => {
     // 获取音频解码后的audioBuffer数据
				// to do sth
			})
	});

/**
* 音频裁剪
* @param audioBuffer 待裁剪的数据
* @param duration 音频总时长
* @param startOffset 裁剪偏移时间,单位s
*/
clipAudio(audioBuffer,duration,startOffset = 0){
   
	return new Promise((resolve,reject) => {<