HTML5开发动态音频图的实现
概要
本次我们会使用html5和js开发一个动态音频图
用到的技术点：
（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创建画笔
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style type="text/css">
*{
margin: 0;
/* 外边距为0，使canvas能够占满全屏 */
}
#canvas{
background: linear-gradient(
135deg,
rgb(142,132,133) 0%,
rgb(230,132,110) 100%
);
/*创建线性渐变图像*/
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var cxt=canvas.getcontext('2d');//创建了画笔
cxt.beginpath();//开始画
cxt.closepath();//画完了
cxt.fillstyle='#f2f';
cxt.arc(250,250,100,0,2*math.pi,false);
cxt.fill();
</script>
</body>
</html>
在创建线性渐变图像时，若100%后边加“,”，谷歌便加载不出来；若不加，便能加载出来。但是不知道为何
这里尤其注意js里canvas的流程，创建画笔-》开始画-》画完了-》补充颜色、形状信息。其中前三步都是套路，只有如何去画根据任务的不同，代码不同
web audio api流程
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
</head>
<body>
<audio id="audio" src="mp3/1.mp3" controls></audio>
<script>
var octx=new audiocontext();//创建音频对象
var oaudio=document.queryselector('audio');
var audiosrc=octx.createmediaelementsource(oaudio);
//给音频对象创建媒体源
var analyser=octx.createanalyser();//创建分析机
audiosrc.connect(analyser);//把分析机连接到媒体源上
analyser.connect(octx.destination);//把分析机得到的结果和扬声器相连
</script>
</body>
</html>
这里要注意的是，audio中的autoplay、js中的audio.play（）已经失效（谷歌浏览器的安全策略：声音不能自动播放，必须在用户有了操作后才能播放）
上述流程中少了最关键的一步：如何分析音频数据，这一步根据实现的任务不同，内容不同。但是其余的步骤都是一样的，满满的套路
动态音频图的开发
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>document</title>
<style type="text/css">
*{
margin: 0;
}
#canvas{
background:linear-gradient(
135deg,
rgb(142,132,133) 0%,
rgb(230,132,110) 100%
);
}
</style>
</head>
<body>
<audio id="audio" src="mp3/1.mp3" controls></audio>
<button type="button" onclick="play()"></button>
<canvas id="canvas"></canvas>
<script>
//先引入canvas画笔的创建流程
var ccxt=canvas.getcontext('2d');//创建2d画笔
ccxt.beginpath();//开始画
ccxt.closepath();//画完了
//设计画布的样式
//设置画布大小为整个屏幕
canvas.width=window.innerwidth;
canvas.height=window.innerheight;
//设置线条的渐变颜色
var ow=canvas.width; var oh=canvas.height;
var color=ccxt.createlineargradient(ow/2,oh/2,ow/2,oh/2-100);
color.addcolorstop(0,'#000');
color.addcolorstop(.5,'#069');
color.addcolorstop(1,'#f6f');
function play(){
//先引入api函数,走完web audio api的流程
var octx=new audiocontext();//创建音频对象
var oaudio=document.queryselector('audio');
var audiosrc=octx.createmediaelementsource(oaudio);//为音频对象创建媒体源
var analyser=octx.createanalyser();//为音频对象创建分析机
audiosrc.connect(analyser);//将分析机与媒体源连接
analyser.connect(octx.destination);//将分析机与扬声器相连接
var count=80;//音频条的条数
var voiceheight=new uint8array(analyser.frequencybincount);//建立一个数据缓冲区（此时为空)
setinterval(draw(analyser,voiceheight,count),1000);
oaudio.play();
}
function draw(analyser,voiceheight,count){
analyser.getbytefrequencydata(voiceheight);//将当前频率数据传入到无符号字节数组中，进行实时连接
var step=math.round(voiceheight.length/count);//每隔step个数，取一个数组里的数
for(var i=0;i<count;i++){
var audioheight=voiceheight[step*i];
ccxt.fillstyle=color;
ccxt.fillrect(ow/2+(i*10),oh/2,7,-audioheight);
ccxt.fillrect(ow/2-(i*10),oh/2,7,-audioheight);
}
//console.log(voiceheight);
}
</script>
</body>
</html>
上边的代码是不可行的，找了一下午也没找出错误到底出在哪里...问题主要如下：
（1）在谷歌浏览器中，显示歌在播放，但是没有声音。console.log(voiceheight)即图中注释部分没有注释掉时，voiceheight只出现一次，而不是1000ms出现一次。没有图像
（2）在edge浏览器中，歌曲能正常播放。voiceheight仍然只出现一次，没有图像
到此这篇关于html5开发动态音频图的实现的文章就介绍到这了,更多相关html5动态音频图内容请搜索以前的文章或继续浏览下面的相关文章，希望大家以后多多支持！
上一篇： 苹果、阿里、华为、腾讯，企业大学哪家强？
下一篇： Android开发详情