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