JavaScript音频编辑
2021/12/18 17:49:33
本文主要是介绍JavaScript音频编辑,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
截取音频
实现方式:将音频文件数据裁剪,然后复制一份重新存储起来。
<body> <input type="file" onchange="printFile()"> <script> const audioCtx = new AudioContext(); function printFile() { var file = document.querySelector('input[type=file]').files[0]; var reader = new FileReader(); reader.onload = function (evt) { let audioData = evt.target.result; //创建环境 audioCtx.decodeAudioData(audioData, (buffer) => { //buffer就是我们要获取的数据 let channels = buffer.numberOfChannels; // 声道数 let rate = buffer.sampleRate; // 采样率 let startOffset = 0; // 截取起点 let endOffend = rate * 10; // 截取终点 let frameCount = endOffend - startOffset; // 截取的时长 // 创建同样的采样率,同样声道数量,长度是x秒的空的audioBuffer let newAudioBuffer = new AudioContext().createBuffer(channels, frameCount, rate); // 创建临时的Array存放复制的buffer数据 let tempArray = new Float32Array(frameCount); let offSet = 0; // 裁剪后放置的起点位置 // 声道的数据复制和写入 for (let index = 0; index < channels; index++) { buffer.copyFromChannel(tempArray, index, startOffset); newAudioBuffer.copyToChannel(tempArray, index, offSet); } handlePlayMusic(newAudioBuffer); }) }; reader.readAsArrayBuffer(file); } // 直接播放音乐 function handlePlayMusic(val) { var source = audioCtx.createBufferSource(); source.buffer = val source.connect(audioCtx.destination); source.start(); } // 处理buffer。将ArrayBuffer变成url function bufferToWave() { // 1:将buffer转成wav格式的 // 2:借助crunker库将buffer转成音频文件 } // 改变音频音量 function changeVolumn(val, volumn, channels, newAudioBuffer) { for(let index = 0; index < channels; index++){ const channelData = newAudioBuffer.getChannelData(index); for(let j = 0; j < channelData.length; j++){ channelData[j] = channelData[j] * volumn; // volunm [0,1] } } } </script> </body>
crunker.js库
<body> <script> function printFile() { reader.onload = function () { crunker.fetchAudio("./test.mp3", "./background.mp3") .then(buffers => crunker.mergeAudio(buffers)) .then(merged => crunker.export(merged, "audio/mp3")) .then(output => crunker.download(output.blob)) .catch(error => { throw new Error(error); }); } } </script> </body>
crunker API:
const crunker = new Crunker(); // 获取到全部音频的buffer数据,buffers为数组 crunker.fetchAudio(url1,url2,url3,...) .then(buffers => {}) // 合成多个音频为一个buffer const resultBuffer = crunker.mergeAudio([buffer1,buffer2,buffer3,...]); // 按指定的顺序连接两个或多个音频缓冲区。返回:单个AudioBuffer对象。 const resultBuffer = crunker.concatAudio(arrayOfBuffers); // 导出blob和url对象 type为可选参数:‘audio/mp3’, ‘audio/wav’, ‘audio/ogg’ const blob = crunker.export(audioBuffers, type); // 直接下载 crunker.download(blob,fileName) // 播放 crunker.play(blob) // 如果用户浏览器不支持Web audio API ,自行定义代码. audio.notSupported(callback)
参考:
- https://www.npmjs.com/package/crunker
- https://es6.ruanyifeng.com/#docs/arraybuffer
- https://developer.mozilla.org/en-US/docs/Web/API/AudioBuffer
- https://www.zhangxinxu.com/wordpress/2020/07/js-audio-clip-copy-upload
- https://blog.csdn.net/yun_master/article/details/104133520
这篇关于JavaScript音频编辑的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-06-19《2023版Java工程师》课程升级公告
- 2024-06-15matplotlib作图不显示3D图,怎么办?
- 2024-06-1503-Loki 日志监控
- 2024-06-1504-让LLM理解知识 -Prompt
- 2024-06-05做软件测试需要懂代码吗?
- 2024-06-0514-ShardingSphere的分布式主键实现
- 2024-06-03为什么以及如何要进行架构设计权衡?
- 2024-05-31全网首发第二弹!软考2024年5月《软件设计师》真题+解析+答案!(11-20题)
- 2024-05-31全网首发!软考2024年5月《软件设计师》真题+解析+答案!(21-30题)
- 2024-05-30【Java】百万数据excel导出功能如何实现