Web应用实例:音频可视化
准备
语言:TypeScript
工具:Visual Studio Code
演示:Audio Visualiazer
小明告诉我,他希望打开一个网页,立即听到他喜欢的音乐,如果有视觉特效就更棒了。
第一节 本地音频
“可是我的电脑里没有 MP3 文件!”
“为什么需要打开一个本地文件?”小明问。
“我不知道你喜欢听什么。”
“...既没有音频资源的版权。”
“...也没有足够的服务器带宽。”
“...更无法向你解释什么是跨域访问限制。”
...
“总之,你只能先去其他网站下载一个 MP3 文件,然后拖进来。”我说。
“那我为什么不直接在其他网站听???”他困惑道。
“听起来不错。”
图1-1 启动视图
第二节 频谱变换
通过傅里叶变换将时域数据变换到频域。
“无所谓了,我最希望的是有炫酷的视效。”小明说。
“什么是炫酷?”
“听听你的想法。”小明回答。
“下一代,未来,前所未有的。”
“感觉还行,你会怎么呈现视觉效果呢?”小明接着问。
“自由地绘制。”
“什么意思?”
“通俗点讲,想怎么画就怎么画。”
“......”
图2-1 时域数据
图2-2 频域数据
第三节 历史轨迹
像素保留历史,并向四周弥散。
“这就是你说的下一代?”小明有些失望。
“不是。下一代总是建立在已有的设计上,然后小心翼翼地加入一些变化。”
“哦,那会有什么变化呢?”
“我已经掌握了一种成熟的变化技巧。”
“整体效果像是石头抛入平静的水面,水波逐渐蔓延开来。”
“有没有合适的名字,我可不喜欢《下一代频谱》。”
“当然,‘下一代’只是我们的内部代号,它叫《水波粼粼》。”
图3-1 扩散示例一
图3-2 扩散示例二
图3-3 扩散示例三
第四节 旋转
将旋转矩阵作用于整个画面。
“你刚才提到小心翼翼,有没有大胆的设计呢?”
“有的,我管它们叫‘实验性质的特性’。”
“首先是旋转,让整个画面旋转起来。”
“有的人不喜欢旋转,那会让他感到眩晕。”小明质疑道。
“是的,对用户来说,这就像 EDM 和轻音乐的区别。”
“还有吗?”
“把任意两个场景混在一起。我有个飞鸟场景,鸟儿随音乐起舞,是不是很棒?”
“我不看好它,这有些难以理解。”
“如果用户不喜欢,你会移掉它们的对吗?”小明接着问。
“很敏锐,实验性质的特性只会有两个结果。”
“...即在未来的版本中得到加强,或者彻底移除。”
图4-1 旋转
图4-2 场景混叠
第五节 移动端适配
限于移动端的硬件水准,对此不要抱有太多幻想。
“移动端是潮流,还有其他特性吗?”
“本地化支持。界面上的文字和使用习惯根据浏览器语言调整。”
“我有个想法,这个网站可以支持听力障碍的人群。”小明灵机一动。
“你是指听音乐的网站,对听觉障碍者做可访问性支持?”我怀疑自己听错了。
“是音画网站!用户可以观看画面。”
“......”
“特性不是越多越好,现在让我们回到起点。”
“你希望打开一个网页,自动播放喜欢的音乐?”我提问。
“似乎只能手动播放。”看起来小明并不介意这一点。
“炫酷的视觉效果?”
“基本满意。”
“那么,还有其他问题吗?”
...
“我的手机里也没有 MP3 文件!”
附录
在线演示:Audio Visualizer
Github 开源:general-engine
转载于:https://www.cnblogs.com/experdot/p/9846113.html
Web应用实例:音频可视化相关推荐
- 网易云音乐动效Android,Web Audio在音频可视化中的应用(网易云音乐鲸云动效)...
本文有两个关键词:音频可视化和Web Audio.前者是实践,后者是其背后的技术支持. Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块,对于其 API 的更多内容,可以查看 ...
- 傅里叶变换音频可视化_Web Audio在音频可视化中的应用
Web Audio在音频可视化中的应用 本文有两个关键词:音频可视化和Web Audio.前者是实践,后者是其背后的技术支持. Web Audio 是很大的知识点,本文会将重点放在如何获取音频数据这块 ...
- 傅里叶变换音频可视化_音频可视化中的信号处理方案
声明: 原创文章,未经允许不得转载. 音频可视化是一个"听"起来非常"美"好的话题,其复杂程度很大程度上依赖视觉方案(一些例子),不同的视觉方案决定了你的技术方 ...
- HTML 利用 Web Audio API 进行音频可视化
利用Web Audio API 进行音乐可视化 1.什么是 Web Audio API: 官方:Web Audio API 提供了在Web上控制音频的一个非常有效通用的系统,允许开发者来自选音频源,对 ...
- web技术分享| AudioContext 实现音频可视化
要实现音频可视化,实现一些炫酷的效果需要借助 Web Audio API提供的一些方法 AudioContext. AudioContext接口表示由链接在一起的音频模块构建的音频处理图,每个模块由一 ...
- java web 播放音频_用webAudio和canvas实现音频可视化
前两天遇到了要显示音频波形图的需求,因为时间紧,就直接用了wavesufer.js,这两天有空,就研究了一下怎么用webAudio实现音频的可视化. 大致流程是对音源进行解析,解析得到的数据是个频谱数 ...
- 基于Web Audio API实现音频可视化效果
网页音频接口最有趣的特性之一它就是可以获取频率.波形和其它来自声源的数据,这些数据可以被用作音频可视化.这篇文章将解释如何做到可视化,并提供了一些基础使用案例. 基本概念节 要从你的音频源获取数据,你 ...
- 傅里叶变换音频可视化_快速上手网易云音乐可视化
作者:Sanpeier https://juejin.im/post/5dd88289e51d4523564243da 什么是音频可视化 音频可视化,顾名思义,就是通过获取音频的波形.频率和其他来自音 ...
- 傅里叶变换音频可视化_HTML5如何实现音频可视化频谱跳动
本篇教程探讨了HTML5如何实现音频可视化频谱跳动,希望阅读本篇文章以后大家有所收获,帮助大家HTML5+CSS3从入门到精通 . < html> HTML5音频可视化频谱跳动代码 * { ...
- java对接海康威视SDK(win64、linux64),处理播放实时流转码,按时间回放功能,附海康威视最新3.0摄像头监控web端实例+插件
java对接海康威视SDK(win64.linux64),处理播放实时流转码,按时间回放功能 准备工作 遇到的坑 调用步骤 参数配置 DeviceEnums 初始化sdk 注册 大华的sdk叫登陆海康 ...
最新文章
- 服务器被挖矿minerd***的解决办法
- python format函数实例_Python字符串格式化,format格式化函数详细使用
- 【深度学习】从零开始 Mask RCNN 实战:基于 Win10 + Anaconda 的 Mask RCNN 环境搭建
- 《那些年啊,那些事——一个程序员的奋斗史》——126
- 山东栋梁机器人比赛_谁是最强“移动机器人”?来深技师这场全国大赛一决高下!...
- JavaScript学习笔记(八)--正则表达式
- UVA445 Marvelous Mazes
- linux杂谈(十七):iscsi存储分离技术
- 常用Linux网络/内存/磁盘分析工具
- POJ-1195-Mobile phones
- 博文视点读书节第九日丨大咖书单加倍放送!
- signature=ed12edba242e439d545c9f98deb5e896,PROJECTION APPARATUS
- VSCode下载、安装及软件使用演示
- L2-011 玩转二叉树 (25分)
- Spring集成activiti
- 用Python告诉你深圳房租有多高,做程序员真的能买得起嘛
- .net 基于wkhtmltopdf插件,Rotativa包在后端根据html代码生成pdf文件
- 自然人股东分红必须要缴纳20%个税吗?有三种真不用
- Excel 美化要点
- lr背景虚化_【教程】人像后期LR+PS超详细流程+思路分析