js实现音频可视化波形图

效果如图：线条的颜色粗细也可以自己调整。

代码如下（可直接复制使用）：

<html lang="en"><head><meta charset="UTF-8"><title>可视化音频</title><script src="https://code.jquery.com/jquery-3.3.1.min.js"></script><style>body {display: block;background-position: center;background-repeat: no-repeat;background-attachment: fixed;background-size:100%;}</style></head><body><input type="file" style="color:red;" name="" value="" id="musicFile"><input type="button" name="startStop" value="暂停" id="startStop"><p id="tip" style="color:red;"></p><canvas id="canvas"></canvas><script>window.onload = function () {canvas.width = window.innerWidth;canvas.height = window.innerHeight;var canvasCtx = canvas.getContext("2d");var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;var audioContext = new AudioContext();//实例化$('#musicFile').change(function(){//当选择歌曲时，判断当前audioContext的状态，如果在进行中则关闭音频环境，//释放audioContext的所有资源，并重新实例化audioContextif(audioContext.state == 'running'){audioContext.close();audioContext = new AudioContext();}if (this.files.length == 0) return;var file = $('#musicFile')[0].files[0];var fileReader = new FileReader();fileReader.readAsArrayBuffer(file);fileReader.onload = function(e) {var count = 0;$('#tip').text('开始解码')var timer = setInterval(function(){count++;$('#tip').text('解码中,已用时'+count+'秒')},1000)audioContext.decodeAudioData(e.target.result, function(buffer) {clearInterval(timer)$('#tip').text('解码成功，用时共计:'+count+'秒')var audioBufferSourceNode = audioContext.createBufferSource();var analyser = audioContext.createAnalyser();analyser.fftSize = 256;audioBufferSourceNode.connect(analyser);analyser.connect(audioContext.destination);audioBufferSourceNode.buffer = buffer;audioBufferSourceNode.start();var bufferLength = analyser.frequencyBinCount;var dataArray = new Uint8Array(bufferLength);//播放暂停音频startStop.onclick = function() {if(audioContext.state === 'running') {audioContext.suspend().then(function() {$("#startStop").val('播放');});} else if(audioContext.state === 'suspended') {audioContext.resume().then(function() {$("#startStop").val('暂停');});  }}var oW = canvas.width;var oH = canvas.height;var color1 = canvasCtx.createLinearGradient(oW / 2, oH / 2-10, oW / 2, oH / 2 - 150);var color2 = canvasCtx.createLinearGradient(oW / 2, oH / 2+10, oW / 2, oH / 2 + 150);color1.addColorStop(0, '#1E90FF');color1.addColorStop(.25, '#FF7F50');color1.addColorStop(.5, '#8A2BE2');color1.addColorStop(.75, '#4169E1');color1.addColorStop(1, '#00FFFF');color2.addColorStop(0, '#1E90FF');color2.addColorStop(.25, '#FFD700');color2.addColorStop(.5, '#8A2BE2');color2.addColorStop(.75, '#4169E1');color2.addColorStop(1, '#FF0000');function draw() {drawVisual = requestAnimationFrame(draw);var barHeight;// 自定义获取数组里边数据的频步canvasCtx.clearRect(0, 0, oW, oH);for (var i = 0; i < bufferLength; i++) {barHeight = dataArray[i];analyser.getByteFrequencyData(dataArray);// 绘制向上的线条canvasCtx.fillStyle = color1;  /* context.fillRect(x,y,width,height)* x，y是坐标* width，height线条的宽高*/canvasCtx.fillRect(oW / 2 + (i * 8), oH / 2, 2, -barHeight);canvasCtx.fillRect(oW / 2 - (i * 8), oH / 2, 2, -barHeight);// 绘制向下的线条canvasCtx.fillStyle = color2;  canvasCtx.fillRect(oW / 2 + (i * 8), oH / 2, 2, barHeight);canvasCtx.fillRect(oW / 2 - (i * 8), oH / 2, 2, barHeight);}};draw();})}})}</script></body>
</html>

js实现音频可视化波形图相关推荐

html5音频文件生成波形图代码,使用wavesurfer.js显示mp3 audio音频的波形图
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=8290 本文可全文转载,个人网站无需授权,只要保留原作者.出处以及文中链接即可, ...
vue+elementUI使用Wavesurfer.js音频可视化
vue+elementUI使用Wavesurfer.js音频可视化效果图安装 wavesurfer.js npm install wavesurfer.js --save (datav安装) np ...
html语音播放动画,html5 canvas+js音频可视化动画特效
html5 canvas+js实现的音频可视化动画特效,选择一首本地音频文件播放查看效果. 查看演示下载资源: 13 次下载资源下载积分: 20 积分 js代码 window.onload = ...
canvas音频可视化js插件
下载地址一个现代的.圆形的纯JavaScript编写的音频可视化工具,它提供了基于频率和节拍的可视化网页特效. dd:
java web 播放音频_用webAudio和canvas实现音频可视化
前两天遇到了要显示音频波形图的需求,因为时间紧,就直接用了wavesufer.js,这两天有空,就研究了一下怎么用webAudio实现音频的可视化. 大致流程是对音源进行解析,解析得到的数据是个频谱数 ...
vue组件可视化_Vue HTML5音频可视化组件
vue组件可视化视听 (vue-audio-visual) VueJS audio visualization components. VueJS音频可视化组件. Vue HTML5 audio v ...
傅里叶变换音频可视化_Web Audio在音频可视化中的应用
Web Audio在音频可视化中的应用本文有两个关键词:音频可视化和Web Audio.前者是实践,后者是其背后的技术支持. Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块 ...
傅里叶变换音频可视化_H5录音音频可视化-实时波形频谱绘制、频率直方图
这段时间给GitHub Recorder开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码,下面 ...
java h5在线音频_H5 录音音频可视化
这段时间给 GitHub Recorder 开源库添加了两个新的音频可视化功能,比以前单一的动态波形显示丰富了好多(下图后两行是不是比第一行看起来丰满些):趁热打铁写了一个音频可视化相关扩展测试代码, ...

js实现音频可视化波形图

js实现音频可视化波形图

js实现音频可视化波形图相关推荐

最新文章

热门文章