JS实现audio音频剪裁剪切复制播放与上传(步骤详解)

凡事支持Web Audio API的浏览器都支持WAV格式，所以，技术上完全可行。

下面这段JS可以得到剪裁后的WAV音频的Blob数据格式：

var blob = bufferToWave(newAudioBuffer, frameCount);

有了Blob数据，接下来事情就简单了。

我们可以直接把Blob数据转换成URL，可以使用 URL.createObjectURL() 生成一个Blob链接。

假设页面上有如下HTML代码：

<audio id="audio" controls=""></audio>

则如下设置，就可以点击上面的 <audio> 元素进行播放了。

audio.src = URL.createObjectURL(blob);

如果要转换成Base64地址，可以这么处理：

var reader2 = new FileReader();
reader2.onload = function(event){
 audio.src = event.target.result;
};
reader2.readAsDataURL(blob);

3） 如果希望上传剪裁的音频

有了Blob数据，上传还不是洒洒水的事情。

可以使用FormData进行传输，例如：

var formData = new FormData();
formData.append('audio', blob);
// 请求走起
var xhr = new XMLHttpRequest();
xhr.open('POST', this.cgiGetImg, true);
// 请求成功
xhr.onload = function () {
};
// 发送数据
xhr.send(formData);

有demo可以进行效果体验的，您可以狠狠地点击这里： 用户上传的MP3音频剪裁并播放demo

使用截图示意如下：

本文地址： https://www.zhangxinxu.com/wordpress/?p=9505

到此这篇关于JS实现audio音频剪裁剪切复制播放与上传的文章就介绍到这了,更多相关js audio音频剪裁内容请搜索来客网以前的文章或继续浏览下面的相关文章希望大家以后多多支持来客网！