前端实现从视频中抽离出音频

首先声明：也不是原创，看同事做了这个需求，感觉很炸，就了解了下发现csdn 并没有类似功能所以发表一份

总共两份一份是插件，一份是插件运用

插件名称 audiobuffer-to-wav

npm依赖

npm install audiobuffer-to-wav --save

这是插件

function audioBufferToWav (buffer, opt) {opt = opt || {}var numChannels = buffer.numberOfChannelsvar sampleRate = buffer.sampleRatevar format = opt.float32 ? 3 : 1var bitDepth = format === 3 ? 32 : 16var resultif (numChannels === 2) {result = interleave(buffer.getChannelData(0), buffer.getChannelData(1))} else {result = buffer.getChannelData(0)}return encodeWAV(result, format, sampleRate, numChannels, bitDepth)
}function encodeWAV (samples, format, sampleRate, numChannels, bitDepth) {var bytesPerSample = bitDepth / 8var blockAlign = numChannels * bytesPerSamplevar buffer = new ArrayBuffer(44 + samples.length * bytesPerSample)var view = new DataView(buffer)/* RIFF identifier */writeString(view, 0, 'RIFF')/* RIFF chunk length */view.setUint32(4, 36 + samples.length * bytesPerSample, true)/* RIFF type */writeString(view, 8, 'WAVE')/* format chunk identifier */writeString(view, 12, 'fmt ')/* format chunk length */view.setUint32(16, 16, true)/* sample format (raw) */view.setUint16(20, format, true)/* channel count */view.setUint16(22, numChannels, true)/* sample rate */view.setUint32(24, sampleRate, true)/* byte rate (sample rate * block align) */view.setUint32(28, sampleRate * blockAlign, true)/* block align (channel count * bytes per sample) */view.setUint16(32, blockAlign, true)/* bits per sample */view.setUint16(34, bitDepth, true)/* data chunk identifier */writeString(view, 36, 'data')/* data chunk length */view.setUint32(40, samples.length * bytesPerSample, true)if (format === 1) { // Raw PCMfloatTo16BitPCM(view, 44, samples)} else {writeFloat32(view, 44, samples)}return buffer
}function interleave (inputL, inputR) {var length = inputL.length + inputR.lengthvar result = new Float32Array(length)var index = 0var inputIndex = 0while (index < length) {result[index++] = inputL[inputIndex]result[index++] = inputR[inputIndex]inputIndex++}return result
}function writeFloat32 (output, offset, input) {for (var i = 0; i < input.length; i++, offset += 4) {output.setFloat32(offset, input[i], true)}
}function floatTo16BitPCM (output, offset, input) {for (var i = 0; i < input.length; i++, offset += 2) {var s = Math.max(-1, Math.min(1, input[i]))output.setInt16(offset, s < 0 ? s * 0x8000 : s * 0x7FFF, true)}
}function writeString (view, offset, string) {for (var i = 0; i < string.length; i++) {view.setUint8(offset + i, string.charCodeAt(i))}
}

代码运用

function extractAudioFromVideo (videoUrl){var audioContext = new (window.AudioContext || window.webkitAudioContext)();var reader = new FileReader();var myBuffer;const sampleRate = 16000;const numberOfChannels = 1;return new Promise((resolve, reject) => {fetch(videoUrl, {responseType: "blob",}).then((res) => res.blob()).then((blob) => {reader.readAsArrayBuffer(blob);});reader.onload = function () {var videoFileAsBuffer = reader.result;audioContext.decodeAudioData(videoFileAsBuffer).then(function (decodedAudioData) {var duration = decodedAudioData.duration;var offlineAudioContext = new OfflineAudioContext(numberOfChannels,sampleRate * duration,sampleRate);var soundSource = offlineAudioContext.createBufferSource();myBuffer = decodedAudioData;soundSource.buffer = myBuffer;soundSource.connect(offlineAudioContext.destination);soundSource.start();offlineAudioContext.startRendering().then(function (renderedBuffer) {var wav = audioBufferToWav(renderedBuffer);var blob = new window.Blob([new DataView(wav)], {type: "audio/wav",});resolve(window.URL.createObjectURL(blob));}).catch(function (err) {reject(err);});});};});};console.log(extractAudioFromVideo('http://mgcdn.vod.migucloud.com/vi1/1088.2qpLJaD2F4R8O2Cv7t07j9.0.pSF3ZI.mp4'))

最后返回的是一个promise

最后我想说下，因为这个是异步处理，需要蛮长时间去抽离文件，所以如果没有必要可以直接放两个video去加载。一个显示一个隐藏。加载一个视频地址，浏览器缓存一个文件也是很快的。。

前端实现从视频中抽离出音频相关推荐

python视频抽帧后前端javascript如何显示_python通过ffmgep从视频中抽帧的方法
如下所示: ffmpeg中文文档:http://linux.51yip.com/search/ffmpeg ffmpeg -i test_baofeng.wmv -y -f image2 -ss 00 ...
python 视频抽帧_python通过ffmgep从视频中抽帧的方法
如下所示: ffmpeg中文文档:http://linux.51yip.com/search/ffmpeg ffmpeg -i test_baofeng.wmv -y -f image2 -ss 00 ...
python_视频中语音识别转出文本
注意:没有"stepladder"的同学建议不要看啦目录 1. 安装需要的包 2. 视频转音频 3. 对音频进行切割 4. 对视频进行切割 5. 从音频中识别出文本 5.1 使用 ...
使用opencv从mp4视频中抽帧并保存
使用oepncv有两种方法,一种是使用cvGrabFrame()+cvRetrieveFrame(),另一种是使用使用cvQueryFrame(). http://blog.csdn.net/augu ...
怎样剪切视频中的一段音频
有一些视频中的歌曲非常好听,可是如果我们相对这首歌曲进行剪切的话,该如何操作呢?平时在欣赏一段影片的时候都会有这种将音乐剪切下来的想法,所以今天就整理了一篇怎么把一段视频中的音频剪切下来的内容,大家感 ...
python做视频抽帧图_利用Python和ffmpeg从视频中抽帧，此方法比opencv抽帧法快。
原博文 2020-03-26 09:34 − import subprocess import os import subprocess import shutil #目录文件不存在则自动创建,存在则 ...
第三章小程序的数据绑定-从视图中抽离出数据
3.1.数据的动态绑定 1.动态绑定的意义,传统的,写死的数据,不利于维护和更改. 在.js文件里面添加data Page({data:{thisWeekMovie:{name: "教父&q ...
ffmpeg批量从视频中提取出mp3音频
1.新建一个txt文件,并复制如下代码进入,然后保存. @echo off & titlecd /d %~dp0for %%a in (*.mp4) do (ffmpeg -i "% ...
python领域的名人_计算任意视频中各人物的出镜时间（附Python实现）
作者:Pulkit Sharma 编译:Bing 编者按:本文作者Pulkit Sharma分享了一篇有趣的项目,以<猫和老鼠>为例,计算任意视频中汤姆猫和杰瑞鼠的出镜时长.这一模型也可以 ...

前端实现从视频中抽离出音频

前端实现从视频中抽离出音频相关推荐

最新文章

热门文章