概要
本次我們會(huì)使用html5和js開(kāi)發(fā)一個(gè)動(dòng)態(tài)音頻圖
用到的技術(shù)點(diǎn)：
（1）js
（2）canvas + audio
（3）Web Audio API
實(shí)現(xiàn)方式：
（1）首先對(duì)于界面實(shí)現(xiàn)的考慮，由于區(qū)塊非常多，我們使用傳統(tǒng)dom節(jié)點(diǎn)實(shí)現(xiàn)是非常困難的（會(huì)占用大量的電腦CPU）。在這里，我們考慮使用canvas進(jìn)行渲染
（2）前端中，我們遵循盡量少用js控制dom節(jié)點(diǎn)的原則。能用css3實(shí)現(xiàn)的特效，就不要用js實(shí)現(xiàn)。（因?yàn)閖s不是標(biāo)記語(yǔ)言，而是腳本語(yǔ)言，與html5不是同一種語(yǔ)言。會(huì)浪費(fèi)瀏覽器大量時(shí)間加載，造成瀏覽器性能的浪費(fèi)）。因此，用js就少用dom，用dom就盡量用css。
（3）通過(guò)Web Audio API在音頻節(jié)點(diǎn)上進(jìn)行音頻操作（即實(shí)現(xiàn)音頻可視化），流程圖如下：
在圖中，音頻上下文提供了音頻處理的一套系統(tǒng)方法。輸入源指音樂(lè)文件，通過(guò)名稱(chēng)引入；效果就是對(duì)輸入源進(jìn)行加工，如制作音頻圖、音波圖、3D環(huán)繞、低音音效等；輸出就是把效果輸出到耳機(jī)、揚(yáng)聲器等目的地。
canvas引入
在當(dāng)下，除了布局使用dom節(jié)點(diǎn)外，特效基本都是通過(guò)canvas實(shí)現(xiàn)了。
canvas好處：
（1）寫(xiě)特效非常強(qiáng)大，性能優(yōu)
（2）用于做游戲。由于flash將于2020年退役，現(xiàn)在的游戲開(kāi)始轉(zhuǎn)向用html5制作
（3）前端渲染大數(shù)據(jù)，數(shù)據(jù)可視化，大屏數(shù)據(jù)展示
canvas流程：通過(guò)js創(chuàng)建畫(huà)筆
<!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能夠占滿(mǎn)全屏 */
}
#canvas{
background: linear-gradient(
135deg,
rgb(142,132,133) 0%,
rgb(230,132,110) 100%
);
/*創(chuàng)建線(xiàn)性漸變圖像*/
}
</style>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var cxt=canvas.getContext('2d');//創(chuàng)建了畫(huà)筆
cxt.beginPath();//開(kāi)始畫(huà)
cxt.closePath();//畫(huà)完了
cxt.fillStyle='#f2f';
cxt.arc(250,250,100,0,2*Math.PI,false);
cxt.fill();
</script>
</body>
</html>
在創(chuàng)建線(xiàn)性漸變圖像時(shí)，若100%后邊加“,”，谷歌便加載不出來(lái)；若不加，便能加載出來(lái)。但是不知道為何
這里尤其注意js里canvas的流程，創(chuàng)建畫(huà)筆-》開(kāi)始畫(huà)-》畫(huà)完了-》補(bǔ)充顏色、形狀信息。其中前三步都是套路，只有如何去畫(huà)根據(jù)任務(wù)的不同，代碼不同
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();//創(chuàng)建音頻對(duì)象
var oAudio=document.querySelector('audio');
var audioSrc=oCtx.createMediaElementSource(oAudio);
//給音頻對(duì)象創(chuàng)建媒體源
var analyser=oCtx.createAnalyser();//創(chuàng)建分析機(jī)
audioSrc.connect(analyser);//把分析機(jī)連接到媒體源上
analyser.connect(oCtx.destination);//把分析機(jī)得到的結(jié)果和揚(yáng)聲器相連
</script>
</body>
</html>
這里要注意的是，audio中的autoplay、js中的audio.play（）已經(jīng)失效（谷歌瀏覽器的安全策略：聲音不能自動(dòng)播放，必須在用戶(hù)有了操作后才能播放）
上述流程中少了最關(guān)鍵的一步：如何分析音頻數(shù)據(jù)，這一步根據(jù)實(shí)現(xiàn)的任務(wù)不同，內(nèi)容不同。但是其余的步驟都是一樣的，滿(mǎn)滿(mǎn)的套路
動(dòng)態(tài)音頻圖的開(kāi)發(fā)
<!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畫(huà)筆的創(chuàng)建流程
var cCxt=canvas.getContext('2d');//創(chuàng)建2D畫(huà)筆
cCxt.beginPath();//開(kāi)始畫(huà)
cCxt.closePath();//畫(huà)完了
//設(shè)計(jì)畫(huà)布的樣式
//設(shè)置畫(huà)布大小為整個(gè)屏幕
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//設(shè)置線(xiàn)條的漸變顏色
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函數(shù),走完Web Audio API的流程
var oCtx=new AudioContext();//創(chuàng)建音頻對(duì)象
var oAudio=document.querySelector('audio');
var audioSrc=oCtx.createMediaElementSource(oAudio);//為音頻對(duì)象創(chuàng)建媒體源
var analyser=oCtx.createAnalyser();//為音頻對(duì)象創(chuàng)建分析機(jī)
audioSrc.connect(analyser);//將分析機(jī)與媒體源連接
analyser.connect(oCtx.destination);//將分析機(jī)與揚(yáng)聲器相連接
var count=80;//音頻條的條數(shù)
var voiceHeight=new Uint8Array(analyser.frequencyBinCount);//建立一個(gè)數(shù)據(jù)緩沖區(qū)（此時(shí)為空)
setInterval(draw(analyser,voiceHeight,count),1000);
oAudio.play();
}
function draw(analyser,voiceHeight,count){
analyser.getByteFrequencyData(voiceHeight);//將當(dāng)前頻率數(shù)據(jù)傳入到無(wú)符號(hào)字節(jié)數(shù)組中，進(jìn)行實(shí)時(shí)連接
var step=Math.round(voiceHeight.length/count);//每隔step個(gè)數(shù)，取一個(gè)數(shù)組里的數(shù)
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>
上邊的代碼是不可行的，找了一下午也沒(méi)找出錯(cuò)誤到底出在哪里...問(wèn)題主要如下：
（1）在谷歌瀏覽器中，顯示歌在播放，但是沒(méi)有聲音。console.log(voiceHeight)即圖中注釋部分沒(méi)有注釋掉時(shí)，voiceHeight只出現(xiàn)一次，而不是1000ms出現(xiàn)一次。沒(méi)有圖像
（2）在edge瀏覽器中，歌曲能正常播放。voiceHeight仍然只出現(xiàn)一次，沒(méi)有圖像
到此這篇關(guān)于HTML5開(kāi)發(fā)動(dòng)態(tài)音頻圖的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)HTML5動(dòng)態(tài)音頻圖內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持腳本之家！
