js获取音频条频谱的动画数据每秒频谱数值

最新推荐文章于 2024-08-09 07:14:46 发布

鸽子鸽

最新推荐文章于 2024-08-09 07:14:46 发布

阅读量3.9k

点赞数 1

文章标签： javascript audio 频谱音频条

本文链接：https://blog.csdn.net/assfafa/article/details/73435427

版权

window.onload = function () {
var canvas = document.getElementById('hwsy_ypt_canvas');
var video = document.getElementById('hwsy_ypt_video');
var context = canvas.getContext("2d");
canvas.width = screen.width;
canvas.height= screen.height;
//-------------------------
var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
AudioContext = new AudioContext();
var fen = AudioContext.createAnalyser();
var src = AudioContext.createMediaElementSource(video);
src.connect(fen);
fen.connect(AudioContext.destination);
//-------------------------
amoe();
video.play();
function amoe() {
context.clearRect(0, 0, canvas.offsetWidth, canvas.offsetHeight);
var Data = new Uint8Array(fen.frequencyBinCount);
fen.getByteFrequencyData(Data);
// Data 就是动画执行时的音频代码 1024个数组成
context.fillStyle = "#FFF";
context.font = "16px Arial";
for(var i=0;i<200;i++)
context.fillText(Data[i],10,i*20);
requestAnimationFrame(amoe);
}

}

备注内的我也不是很懂大致意思不过基本都是硬性代码了

Data是获取到的当前音频数据1024数组格式

不过基本上200以后的基本不动 300以后的就是摆设了

这是源码 https://pan.baidu.com/s/1pLPpx7X

http://download.csdn.net/detail/assfafa/9873728

下面是刚才代码的html

<html>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>canvas test</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<head>
<style>
body {
margin: 0;
background:#000;
}
</style>
<script type="text/javascript" charset="utf-8" src="pinpu.js"></script>
</head>

<body>
<audio src="m.mp3" id="hwsy_ypt_video" controls style="display:none;"></audio>
<canvas id='hwsy_ypt_canvas'/>
</body>