纯前端技术裁切合并音频方式实现

随着5G时代的来临，音视频的领域的必将嫌弃新的浪潮，只有不断的学习才能跟的上步伐，吧啦吧啦....

好吧前面真的编不下去了~~~，快速进入正题，这篇文章主要介绍的功能
1、选择本地音频文件（多段）
2、选择音频区间播放（多段）
3、合并audiobuffer
4、下载编辑后的音频
整体例子功能比较单一，不过后面可以思考视频是否可以沿用方式，拼接多段，可以肯定的应该能提取视频的声音，视频画面部分没有尝试，目前只测试了音频功能正常；注意这个是纯前端的技术并不是把音频文件上传到服务端用 ffmpeg方式进行裁切

demo早就做了，今天终于有时间整理下，同时也自己复习下，如果有错误的地方希望大神能指出来。

主要的知识点：

AudioContext 前面的文章已经讲过了，
- decodeAudioData 把filedata 转换为 audiobuffer
- createBuffer 创建空的audiobuffer
AudioBuffers 主要是编辑该数据
- getChannelData 获取buffer的实际数据
- ChannerlData.set 设置buffer数据

先贴下体验地址： http://works.ibeeger.com/learn/audioctx/merge.html

选择多段，选择区间试听，完成后可以点击下载，下载的音频文件就是你所选择的区间范围。
当然还有很大的提升空间，这里只作为一个demo演示

还是看代码把。

decode转换

const decodecFile = function(fileContent, id) {audioContext.decodeAudioData(fileContent, function(buffer) {let index = id.replace(/choose/g,'');buffers[index] = Object.assign({buffer: buffer},showBuffer(buffer, index));});}

可视化

function showBuffer(buffer, index) {var cs = '';var ctx = '';var item = document.querySelectorAll('section>div')[index];if(item.querySelector('canvas')){cs = buffers[index]['cs']ctx = buffers[index]['ctx'];} else {cs = document.createElement('canvas');cs.width = window.innerWidth;ctx = cs.getContext('2d');}ctx.clearRect(0,0, cs.width, cs.height);const lth = buffer.getChannelData(1).length;const arr = buffer.getChannelData(1);let w = Math.floor(lth/cs.width/2);ctx.fillStyle ='#efefef'const list = []for(let i =0; i<cs.width; i++) {list.push(arr[i*w]*cs.height);ctx.fillRect(i,(cs.height-arr[i*w]*cs.height)/2,1,arr[i*w]*cs.height);};ctx.save();cs.dataset['index'] = index;cs.addEventListener('mousedown', mousedown, false);cs.addEventListener('touchstart', mousedown, false);cs.addEventListener('mousemove', mousemove, false);cs.addEventListener('touchmove', mousemove, false);cs.addEventListener('mouseup', mouseup, false);cs.addEventListener('touchend', mouseup, false);document.querySelectorAll("section>div")[index].appendChild(cs);return {cs: cs,ctx: ctx,step: w,list: list}
}

播放指定的应的audiobuffer

function start(buffer) {if (audioBufferSourceNode) {audioBufferSourceNode.stop();}audioContext = new AudioContext();const analyser = audioContext.createAnalyser();audioBufferSourceNode = audioContext.createBufferSource();audioBufferSourceNode.connect(analyser);analyser.connect(audioContext.destination);audioBufferSourceNode.buffer = buffer;audioBufferSourceNode.start(0);audioBufferSourceNode.onended = function() {isplay = false;cancelAnimationFrame(req);};
}

最后一步下载，说实话这个方法还没有下来分析，只是从 google 找到了对应的方式
里面应该也有很多参数值得去研究

function bufferToWave(abuffer, len) {var numOfChan = abuffer.numberOfChannels,length = len * numOfChan * 2 + 44,buffer = new ArrayBuffer(length),view = new DataView(buffer),channels = [], i, sample,offset = 0,pos = 0;// write WAVE headersetUint32(0x46464952);                         // "RIFF"setUint32(length - 8);                         // file length - 8setUint32(0x45564157);                         // "WAVE"setUint32(0x20746d66);                         // "fmt " chunksetUint32(16);                                 // length = 16setUint16(1);                                  // PCM (uncompressed)setUint16(numOfChan);setUint32(abuffer.sampleRate);setUint32(abuffer.sampleRate * 2 * numOfChan); // avg. bytes/secsetUint16(numOfChan * 2);                      // block-alignsetUint16(16);                                 // 16-bit (hardcoded in this demo)setUint32(0x61746164);                         // "data" - chunksetUint32(length - pos - 4);                   // chunk length// write interleaved datafor(i = 0; i < abuffer.numberOfChannels; i++)channels.push(abuffer.getChannelData(i));while(pos < length) {for(i = 0; i < numOfChan; i++) {             // interleave channelssample = Math.max(-1, Math.min(1, channels[i][offset])); // clampsample = (0.5 + sample < 0 ? sample * 32768 : sample * 32767)|0; // scale to 16-bit signed intview.setInt16(pos, sample, true);          // write 16-bit samplepos += 2;}offset++                                     // next source sample}// create Blobreturn new Blob([buffer], {type: "audio/wav"});function setUint16(data) {view.setUint16(pos, data, true);pos += 2;}function setUint32(data) {view.setUint32(pos, data, true);pos += 4;}}

到此我觉得比较重要的几点代码已经贴出来了，目前下载下的音频格式文件较大，应该跟我所说的参数设置有关系
大概一分钟10MB的样子。后面有时间再跟大家一块聊，拜了个拜~~
（更正下具体大小根据音频的数据决定）

纯前端技术裁切合并音频方式实现相关推荐

Vue+ElementUI纯前端技术实现对表格数据的增删改查
Vue+ElementUI纯前端技术实现对表格数据的增删改查页面展示效果一.页面结构分为三个部分 head body 以及script 一般我个人是在head中引入一些组件库 , 还有一些样式 ...
期末大作业纯前端技术实现个人简历模板
演示部分期末作业--纯前端的网站页面源码部分主html 说实话没什么技术,就不展示了 css 部分展示 /*引入字体*/ @font-face {font-family: "Pacif ...
招商银行（深圳）专场 — 纯前端表格技术应用研讨会
2018 年 6 月 12 日,由葡萄城举办的"赋能开发者,走进你身边--纯前端表格技术应用研讨会"在招商银行大厦盛大召开.来自招商银行--国内顶尖金融机构的数十位技术专家,与葡萄 ...
「纯前端容器」打造无缝平滑的用户体验
大厂技术高级前端 Node进阶点击上方程序员成长指北,关注公众号回复1,加入高级Node交流群前端性能现状提到前端你最先想到什么?前端工程?web?JavaScript.CSS.HTM ...
解决页面间体验问题的纯前端容器Lath
提到前端你最先想到什么?前端工程?web?JavaScript.CSS.HTML? 前端性能现状如果站在用户的视角那是他们距离信息最近的地方,无论前端在生产技术上如何演变,最终服务于信息表达的根本不 ...
2023年中高级前端养成指南-需要关注和学习的13大类80余个前端技术栈与前端趋势-看这篇就够了系列
今天是兔年开工的第一个星期一,我们又要投入到忙碌的工作了. 以下是imqdcn研究整理的2023年中高级前端养成指南,收藏起来,从开工第一天起,立下全新的计划和目标,愿你在兔年大展宏兔,扬眉兔气. 文 ...
用500行纯前端代码在浏览器中构建一个Tableau
2019独角兽企业重金招聘Python工程师标准>>> 在Gartner最新的对商务智能软件的专业分析报告中,Tableau持续领跑.Microsoft因为PowerBI表现出色也处 ...
vue纯前端下载表格
一般我们做后台管理会遇到这样的需求:页面上的表格,需要纯前端技术来完成.不涉及接口对接.不涉及后端,就是你在页面上展示的表格是什么样,就要下载什么样的表格excel,方便人观察,废话不多说,上代码如 ...
web前端-纯前端音频剪辑，vue音频编辑组件
本文包含内容概述: 整理总结的音频相关资料音频相关jsapi说明及示例 vue编写的组件及git项目地址在线预览: http://123.57.178.145:5007/audio_edit/in ...

纯前端技术裁切合并音频方式实现

纯前端技术裁切合并音频方式实现相关推荐

最新文章

热门文章