傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动
本篇教程探讨了HTML5如何实现音频可视化频谱跳动,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 。
<
html>
HTML5音频可视化频谱跳动代码
* {
margin: 0;
padding: 0;
}
#canvas {
display: block;
background: linear-gradient(135deg, rgb(142, 13, 133) 0%, rgb(230, 132, 110) 100%);
}
window.onload = function () {
var oAudio = document.getElementById(‘myaudio‘);
window.οnclick=function(){
if(oAudio.paused){
oAudio.play();
}else{
oAudio.pause();
}
}
// 创建音频上下文对象
var oCtx = new AudioContext();
// 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 color = ctx.createLinearGradient(oW / 2, oH *2/ 3 - 30, oW / 2, oH *2/ 3 - 100);
color.addColorStop(0, ‘#000‘);
color.addColorStop(.5, ‘#069‘);
color.addColorStop(1, ‘#f6f‘);
// 音频图的条数
var count = 150;
// 缓冲区:进行数据的缓冲处理,转换成二进制数据
var voiceHeight = new Uint8Array(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
var audioHeight = voiceHeight[step * i];
ctx.fillStyle = color;
ctx.fillRect(oW / 2 + (i * 10), oH *2/ 3, 7, -audioHeight);
ctx.fillRect(oW / 2 - (i * 10), oH *2/ 3, 7, -audioHeight);
}
window.requestAnimationFrame(draw);
}
draw();
/*
analyserNode 提供了时时频率以及时间域的分析信息
允许你获取实时的数据,并进行音频可视化
analyserNode接口的fftSize属性
fftSize:无符号长整型值,用于确定频域的FFT(快速傅里叶变换)
ffiSize属性值是从32位到32768范围内的2的非零幂,默认值是2048
*/
}
本文由职坐标整理并发布,希望对同学们有所帮助。了解更多详情请关注职坐标WEB前端HTML5/CSS3频道!
傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动相关推荐
- 傅里叶变换音频可视化_HTML5音频可视化频谱跳动代码
HTML5音频可视化频谱跳动代码 *{ margin:0; padding:0; } #canvas { display: block; background: linear-gradient(135 ...
- 傅里叶变换音频可视化_Web Audio在音频可视化中的应用
Web Audio在音频可视化中的应用 本文有两个关键词:音频可视化和Web Audio.前者是实践,后者是其背后的技术支持. Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块 ...
- html频谱跳动效果,HTML5音频可视化频谱跳动代码
HTML5音频可视化频谱跳动代码 *{ margin:0; padding:0; } #canvas { display: block; background: linear-gradient(135 ...
- HTML5音频可视化频谱跳动代码
今天学习到用canvas来写 HTML5音频可视化频谱跳动代码 将代码在此做一总结: <!DOCTYPE html> <html lang="en">& ...
- 用matlab怎么画视电阻率拟断面图,在MATLAB平台上实现可控源音频大地电磁反演数据三维可视化显示...
第29卷 增刊 物探化探计算技术 2007年10月 收稿日期6文章编号:1001-1749(2007)增刊(1)-0068-04 在MAT LAB 平台上实现可控源音频大地 电磁反演数据三维可视化显示 ...
- matlab暂停音频,matlab 中的实时音频
matlab 中的实时音频 音频系统工具箱™针对实时音频处理进行了优化. audioDeviceReader, audioDeviceWriter, audioPlayerRecorder,dsp.A ...
- python绘画音频_人工智能下的音频还能这样玩!!!!
人工智能音频处理库-librosa(安装与使用) 序言 一.libsora安装 pypi conda source 二.librosa常用功能 核心音频处理函数 音频处理 频谱表示 幅度转换 时频转换 ...
- 音频入门: 最全面详细的Mel频谱和MFCC讲解
目录 前言 算法流程 1. 预加重(Pre-emphasis) 2. 分帧(Frame) 3. 加窗(Window) 4. 短时傅里叶变换(STFT) 5. 滤波器组过程(Filter bank) 6 ...
- R语言ggplot2可视化将两个dataframe可视化的结果组合在一起实战:combining two plots from different data.frames
R语言ggplot2可视化将两个dataframe可视化的结果组合在一起实战:combining two plots from different data.frames 目录 R语
最新文章
- Spark函数详解系列--RDD基本转换
- 这可能就是写代码的乐趣吧,你,也一定会爱上写代码的!
- 系统管理员必须知道的PHP安全实践
- 服务器监控工具_8款服务器和应用性能监控工具
- Android版本历史变迁
- 金融风控实战——可解释人工智能技术
- mybatis批量导入
- 干净下潜声阔的贝斯混音教程|我要为贝斯手讨个公道!让粉丝们都能听清楚贝斯声|MZD Studios
- 华为交换机eth口作用_华为交换机 eth-trunk
- 月入万元快递小哥仅占1.3%,多半月收入不超过5000元
- 辛钦大数定理(揭示了均值和数学期望的关系)
- iphone 信号对应设备_如何访问iPhone的现场测试模式(并查看实际信号强度)
- 【蓝桥杯】特别数的和
- matplotlib画图-折线/散点/柱状/条形图
- 西工大计算机考研最全的报名和各方向解析,含导师介绍
- php快递地址填写,智能识别快递地址api接口实现(PHP示例)
- 静电容键盘和机械键盘声音对比
- python生兔子问题(递归算法)_兔子问题python解决方法
- 四、Linux磁盘与文件系统管理
- 【调剂】天津科技大学教育部创新团队招收化工相关对计算机感兴趣学硕
热门文章
- NET中解决KafKa多线程发送多主题的问题
- .Net Aop(静态织入)框架 BSF.Aop
- EntityFramework和EntityFramework.Extended使用说明——性能,语法和产生的sql
- 来自.NET FM的感谢信
- yum search php7,yum install php7 in centos6
- 巴川数据科学炼成记_智橡树智能英语好不好有哪些功能?提出的科学学习思想是什么?...
- 【错误异常大全】:ArcGIS Engine中C#无法引用ESRI.ArcGIS.AxControls问题
- ArcGIS实验教程——实验十六:空间数据查询
- C语言试题十六之写删除字符串中指定下标的字符。其中,a指向原字符串,删除后的字符串存放在b所指的数组中,n中存放指定的下标。
- Leetcode之打印链接的倒数第K个节点