1.建立AudioContext物件
AudioContext() 構造方法建立了一個新的 AudioContext 物件 它代表了一個由音訊模組連結而成的音訊處理圖, 每一個模組由 AudioNode 表示.
let AudioContext = window.AudioContext || window.webkitAudioContext;
let audioContext = new AudioContext(); //例項化AudioContext物件
複製程式碼2.建立AnalyserNode節點
let analyser;
analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
複製程式碼3.連結節點
let audioSrc = audioContext.createMediaElementSource(audio); //從audio中獲取聲音原始檔
audioSrc.connect(analyser);
analyser.connect(audioContext.destination);
複製程式碼4.AnalyserNode資料解析
let dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);
複製程式碼5.requestAnimationFrame的使用
要使動畫動起來，我們需要不斷重繪Canvas標籤裡的內容，requestAnimationFrame 可以幫你以60fps的幀率繪製動畫。
function render() {
requestAnimationFrame(render);
//...
}
requestAnimationFrame(render);
複製程式碼6.瀏覽器相容性:
| 瀏覽器 | Chrome | Firefox | IE | Opera | Safari |
|---|---|---|---|---|---|
| 支援版本 | 10.0 | 25.0 | 不支援 | 15.0 | 6.0 |
示例程式碼
js
let AudioContext = window.AudioContext || window.webkitAudioContext;
let audioContext = new AudioContext();
let analyser = audioContext.createAnalyser();
analyser.fftSize = 256;
analyser = audioContext.createAnalyser();
let audio = document.getElementById('audio');
let audioSrc = audioContext.createMediaElementSource(audio);
audioSrc.connect(analyser);
analyser.connect(audioContext.destination);
let canvas = document.getElementById('canvas');
let ctx = canvas.getContext("2d");
ctx.lineWidth = 2;
let grd = ctx.createLinearGradient(0, 0, 600, 0);
grd.addColorStop(0, "#00d0ff");
grd.addColorStop(1, "#eee");
let grd2 = ctx.createLinearGradient(0, 0, 600, 0);
grd2.addColorStop(0, "#fff");
grd2.addColorStop(1, "#e720ee");
let het=0;
var globalID;
function render() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
let dataArray = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(dataArray);
ctx.beginPath();
for (let i = 0; i < 200; i++) {
let value = dataArray[6*i];
ctx.fillStyle = grd;
ctx.fillRect(i * 5, 300, 2, -value + 1);
ctx.fillRect(i * 5, 280-value, 2, het);
ctx.fillStyle = grd2;
ctx.fillRect(i * 5, 300, 2, value + 1);
ctx.fillRect(i * 5, 320+value, 2, het);
}
globalID=requestAnimationFrame(render);
};
globalID=requestAnimationFrame(render);
var fileChange = document.getElementById('fileChooser');
fileChange.onchange = fileChange=(e)=>{
if( e.target.files[0]){
let playfile= URL.createObjectURL( e.target.files[0]);
audio.src=playfile;
let musicName = e.target.files[0].name.split('.')[0];
audio.play();
}
};
複製程式碼html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<style type="text/css">
body{
height: 100%;
width: 100%;
background-color: #3f3f3f;
}
</style>
<body>
<audio id="audio" src="music/music.mp3">
Your browser does not support the audio element.
</audio>
<canvas id="canvas" width="800" height="600" >
Your browser does not support Canvas tag.
</canvas>
<input id="fileChooser" type="file" />
</body>
<script src="js/js.js" type="text/javascript" charset="utf-8"></script>
</html>
複製程式碼