傅里叶变换音频可视化_HTML5音频可视化频谱跳动代码
*{
margin:0;
padding:0;
}
#canvas {
display: block;
background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%);
}
window.οnclick=function () {if(oAudio.paused) {
oAudio.play();
}else{
oAudio.pause();
}
}//创建音频上下文对象
var oCtx = newAudioContext();//console.log(oCtx);//创建媒体源,除了audio本身可以获取,也可以通过oCtx对象提供的api进行媒体源操作
var audioSrc =oCtx.createMediaElementSource(oAudio);//创建分析机
var analyser =oCtx.createAnalyser();//媒体源与分析机连接
audioSrc.connect(analyser);//输出的目标:将分析机分析出来的处理结果与目标点(耳机/扬声器)连接
analyser.connect(oCtx.destination);//效果(实现的具体方法)//绘制音频图的条数(fftSize)
/*根据分析音频的数据去获取音频频次界定音频图的高度
放在与音频频次等长的8位无符号字节数组
Uint8Array:初始化默认值为1024*/
//利用cancas渐变进行音频绘制
var ctx = canvas.getContext('2d');
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;var oW =canvas.width;var oH =canvas.height;var color1 = ctx.createLinearGradient(oW / 2, oH / 2 - 30, oW / 2, oH / 2 - 100);var color2 = ctx.createLinearGradient(oW / 2, oH / 2 + 30, oW / 2, oH / 2 + 100);
color1.addColorStop(0, '#000');
color1.addColorStop(.5, '#069');
color1.addColorStop(1, '#f6f');
color2.addColorStop(0, '#000');
color2.addColorStop(.5, '#069');
color2.addColorStop(1, '#f6f');//音频图的条数
var count = 150;//缓冲区:进行数据的缓冲处理,转换成二进制数据
var voiceHeight = newUint8Array(analyser.frequencyBinCount);//console.log(voiceHeight);
function draw() {//将当前的频率数据复制到传入的无符号字节数组中,做到实时连接
analyser.getByteFrequencyData(voiceHeight);//console.log(voiceHeight);//自定义获取数组里边数据的频步
var step = Math.round(voiceHeight.length /count);
ctx.clearRect(0, 0, oW, oH);for (var i = 0; i < count; i++) {var audioHeight = voiceHeight[step *i];
ctx.fillStyle= color1; //绘制向上的线条
ctx.fillRect(oW / 2 + (i * 10), oH / 2, 7, -audioHeight);
ctx.fillRect(oW/ 2 - (i * 10), oH / 2, 7, -audioHeight);
ctx.fillStyle= color2; //绘制向下的线条
ctx.fillRect(oW / 2 + (i * 10), oH / 2, 7, audioHeight);
ctx.fillRect(oW/ 2 - (i * 10), oH / 2, 7, audioHeight);
}
window.requestAnimationFrame(draw);
}
draw();/*analyserNode 提供了时时频率以及时间域的分析信息
允许你获取实时的数据,并进行音频可视化
analyserNode接口的fftSize属性
fftSize:无符号长整型值,用于确定频域的FFT(快速傅里叶变换)
ffiSize属性值是从32位到32768范围内的2的非零幂,默认值是2048*/}
傅里叶变换音频可视化_HTML5音频可视化频谱跳动代码相关推荐
- html频谱跳动效果,HTML5音频可视化频谱跳动代码
HTML5音频可视化频谱跳动代码 *{ margin:0; padding:0; } #canvas { display: block; background: linear-gradient(135 ...
- HTML5音频可视化频谱跳动代码
今天学习到用canvas来写 HTML5音频可视化频谱跳动代码 将代码在此做一总结: <!DOCTYPE html> <html lang="en">& ...
- 傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动
本篇教程探讨了HTML5如何实现音频可视化频谱跳动,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> HTML5音频可视化频谱跳动代码 * { ...
- Flutter监听音量实现波形可视化的音频
关于下图这个 大家采用的下面的那个插件? just_audio just_audio 是一款功能丰富的音频播放器,适用于 Android.iOS.macOS 和 web. https://pub.fl ...
- java 音频可视化_OpenGL ES 实现可视化实时音频
该原创文章首发于微信公众号字节流动 可视化实时音频 音频数据的采集 OpenGL 实现可视化实时音频的思路比较清晰,可以利用 Java 层的 API AudioRecorder 采集到未编码的音频裸数 ...
- pyhton 画出音频文件的波形图和频谱图
pyhton 画出音频文件的波形图和频谱图 # -*- coding:utf-8 -*- import wave import struct import numpy as np import mat ...
- tensorboard的可视化及模型可视化
待整理 How to Check-Point Deep Learning Models in Keras LossWise Tensorboard 中文社区 谷歌发布TensorBoard API,让 ...
- 可视化测试php,可视化测试
可视化测试用于通过定义数据来检查软件故障发生的情况,开发人员可以快速识别故障原因,并清楚地表达信息,以便任何其他开发人员可以利用这些信息. 可视化测试旨在显示实际问题,而不仅仅是描述它,显着增加理解和 ...
- 音频特征于音频信号提取总结
这里写目录标题 1 语音的产生简介 2 声音特性 3. 声音的种类 计算机听觉的应用 4. 什么是音频特征 5 音频特征的类别 5.1 可以从以下几个角度区分 5.2. 常见音频特征举例 6. 音频 ...
最新文章
- 【linux】Valgrind工具集详解(十三):DRD(线程错误检测器)
- 几种经典的网络服务器架构模型的分析与比较
- linux外部命令帮助,Linux的命令帮助
- 网络原理题+复习资料
- java public object_Java中Object类
- 【kafka】kafka 中 消息 record 格式
- python词云图_Python生成一篇文章的词云图
- 把解压缩版的tomcat6注册成服务并设置自启动
- rac备份及恢复的重要概念之一——Redo Threads和Streams
- 几种常用网页返回顶部的代码
- 【马尔科夫链-蒙特卡罗】马尔科夫链-蒙特卡罗方法对先验分布进行抽样
- 解决通过无线路由上网,但有些网站打不开的问题
- CSS3nbsp;Transitionnbsp;Transformnbsp;Animat…
- 大数据与云计算概论2
- 准考证打印电脑记录怎么删除
- 103个后台PSD源文件、素材网站
- 将网页添加至收藏夹代码
- linux最新flash+player,Adobe Flash Player v10.0.21.1 Alpha For Linux
- 桌面云计算机有没有处理器,云桌面延伸成云电脑,电脑是否真的要被淘汰?
- 一种福利彩票辅助选号软件的开发