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
在创建线性渐变图像时,若100%后边加“,”,谷歌便加载不出来;若不加,便能加载出来。但是不知道为何
这里尤其注意js里canvas的流程,创建画笔-》开始画-》画完了-》补充颜色、形状信息。其中前三步都是套路,只有如何去画根据任务的不同,代码不同
Web Audio APi流程
Document
这里要注意的是,audio中的autoplay、js中的audio.play()已经失效(谷歌浏览器的安全策略:声音不能自动播放,必须在用户有了操作后才能播放)
上述流程中少了最关键的一步:如何分析音频数据,这一步根据实现的任务不同,内容不同。但是其余的步骤都是一样的,满满的套路
动态音频图的开发
Document
上边的代码是不可行的,找了一下午也没找出错误到底出在哪里...问题主要如下:
(1)在谷歌浏览器中,显示歌在播放,但是没有声音。console.log(voiceHeight)即图中注释部分没有注释掉时,voiceHeight只出现一次,而不是1000ms出现一次。没有图像
(2)在edge浏览器中,歌曲能正常播放。voiceHeight仍然只出现一次,没有图像
关于“HTML5中如何开发动态音频图”这篇文章就分享到这里了,希望以上内容可以对大家有一定的帮助,使各位可以学到更多知识,如果觉得文章不错,请把它分享出去让更多的人看到。
本文标题:HTML5中如何开发动态音频图
当前链接:http://scyanting.com/article/jsggis.html