HTML5中如何开发动态音频图
作者
这篇文章将为大家详细讲解有关HTML5中如何开发动态音频图,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。
概要
用到的技术点:(1)js(2)canvas + audio(3)Web Audio API
实现方式:
(1)首先对于界面实现的考虑,由于区块非常多,我们使用传统dom节点实现是非常困难的(会占用大量的电脑CPU)。在这里,我们考虑使用canvas进行渲染(2)前端中,我们遵循尽量少用js控制dom节点的原则。能用css3实现的特效,就不要用js实现。(因为js不是标记语言,而是脚本语言,与html5不是同一种语言。会浪费浏览器大量时间加载,造成浏览器性能的浪费)。因此,用js就少用dom,用dom就尽量用css。(3)通过Web Audio API在音频节点上进行音频操作(即实现音频可视化),流程图如下:
在图中,音频上下文提供了音频处理的一套系统方法。输入源指音乐文件,通过名称引入;效果就是对输入源进行加工,如制作音频图、音波图、3D环绕、低音音效等;输出就是把效果输出到耳机、扬声器等目的地。
canvas引入
在当下,除了布局使用dom节点外,特效基本都是通过canvas实现了。
canvas好处:(1)写特效非常强大,性能优(2)用于做游戏。由于flash将于2020年退役,现在的游戏开始转向用html5制作(3)前端渲染大数据,数据可视化,大屏数据展示
canvas流程:通过js创建画笔
Document *{ margin:0; /*外边距为0,使canvas能够占满全屏*/ } #canvas{ background:linear-gradient( 135deg, rgb(142,132,133)0%, rgb(230,132,110)100% ); /*创建线性渐变图像*/ }