溫馨提示×
您好，登錄后才能下訂單哦！
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了在html5中如何實(shí)現(xiàn)動(dòng)態(tài)音頻圖，具有一定借鑒價(jià)值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。
概要
本次我們會(huì)使用html5和js開發(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）通過Web Audio API在音頻節(jié)點(diǎn)上進(jìn)行音頻操作（即實(shí)現(xiàn)音頻可視化）
音頻上下文提供了音頻處理的一套系統(tǒng)方法。輸入源指音樂文件，通過名稱引入；效果就是對(duì)輸入源進(jìn)行加工，如制作音頻圖、音波圖、3D環(huán)繞、低音音效等；輸出就是把效果輸出到耳機(jī)、揚(yáng)聲器等目的地。
canvas引入
在當(dāng)下，除了布局使用dom節(jié)點(diǎn)外，特效基本都是通過canvas實(shí)現(xiàn)了。
canvas好處：
（1）寫特效非常強(qiáng)大，性能優(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)建線性漸變圖像時(shí)，若100%后邊加“,”，谷歌便加載不出來；若不加，便能加載出來。但是不知道為何
這里尤其注意js里canvas的流程，創(chuàng)建畫筆-》開始畫-》畫完了-》補(bǔ)充顏色、形狀信息。其中前三步都是套路，只有如何去畫根據(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)播放，必須在用戶有了操作后才能播放）
上述流程中少了最關(guān)鍵的一步：如何分析音頻數(shù)據(jù)，這一步根據(jù)實(shí)現(xiàn)的任務(wù)不同，內(nèi)容不同。但是其余的步驟都是一樣的，滿滿的套路
動(dòng)態(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();//畫完了
//設(shè)計(jì)畫布的樣式
//設(shè)置畫布大小為整個(gè)屏幕
canvas.width=window.innerWidth;
canvas.height=window.innerHeight;
//設(shè)置線條的漸變顏色
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ù)傳入到無符號(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>上邊的代碼是不可行的，找了一下午也沒找出錯(cuò)誤到底出在哪里...問題主要如下：
（1）在谷歌瀏覽器中，顯示歌在播放，但是沒有聲音。console.log(voiceHeight)即圖中注釋部分沒有注釋掉時(shí)，voiceHeight只出現(xiàn)一次，而不是1000ms出現(xiàn)一次。沒有圖像
（2）在edge瀏覽器中，歌曲能正常播放。voiceHeight仍然只出現(xiàn)一次，沒有圖像
感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“在html5中如何實(shí)現(xiàn)動(dòng)態(tài)音頻圖”這篇文章對(duì)大家有幫助，同時(shí)也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。
億速云公眾號(hào)
手機(jī)網(wǎng)站二維碼