APP微信小程序制作_JS完成可视化音频效果的实例代码

2021-01-06

JS实现可视化音频效果的实例代码     -   这篇文章主要介绍了JS实现可视化音频效果的实例代码,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

效果如图:

背景图片可以换成自己喜欢的或者不用,线条的颜色粗细也可以自己调整。

代码如下(可直接复制使用):

 html lang="en" 
 head 
 meta charset="UTF-8" 
 title 可视化音频 /title 
 script src="jquery-3.3.1.min.js" /script 
 style body {
 display: block;
 background: url("./8.jpg");
 background-position: center;
 background-repeat: no-repeat;
 background-attachment: fixed;
 background-size:100%;
 /style 
 /head 
 body 
 input type="file" name="" value="" id="musicFile" input type="button" name="startStop" value="暂停" id="startStop" 
 p id="tip" /p 
 canvas id="canvas" /canvas 
 script 
 window.onload = function () {
 canvas.width = window.innerWidth;
 canvas.height = window.innerHeight;
 var canvasCtx = canvas.getContext("2d");
 var AudioContext = window.AudioContext || window.webkitAudioContext || window.mozAudioContext;
 var audioContext = new AudioContext();//实例化
 $('#musicFile').change(function(){
 //当选择歌曲时,判断当前audioContext的状态,如果在进行中则关闭音频环境,
 //释放audioContext的所有资源,并重新实例化audioContext
 if(audioContext.state == 'running'){
 audioContext.close();
 audioContext = new AudioContext();
 if (this.files.length == 0) return;
 var file = $('#musicFile')[0].files[0];
 var fileReader = new FileReader();
 fileReader.readAsArrayBuffer(file);
 fileReader.onload = function(e) {
 var count = 0;
 $('#tip').text('开始解码')
 var timer = setInterval(function(){
 count++;
 $('#tip').text('解码中,已用时'+count+'秒')
 },1000)
 audioContext.decodeAudioData(e.target.result, function(buffer) {
 clearInterval(timer)
 $('#tip').text('解码成功,用时共计:'+count+'秒')
 var audioBufferSourceNode = audioContext.createBufferSource();
 var analyser = audioContext.createAnalyser();
 analyser.fftSize = 256;
 audioBufferSourceNode.connect(analyser);
 analyser.connect(audioContext.destination);
 audioBufferSourceNode.buffer = buffer;
 audioBufferSourceNode.start();
 var bufferLength = analyser.frequencyBinCount;
 var dataArray = new Uint8Array(bufferLength);
 //播放暂停音频
 startStop.onclick = function() {
 if(audioContext.state === 'running') {
 audioContext.suspend().then(function() {
 $("#startStop").val('播放');
 } else if(audioContext.state === 'suspended') {
 audioContext.resume().then(function() {
 $("#startStop").val('暂停');
 }); 
 var oW = canvas.width;
 var oH = canvas.height;
 var color1 = canvasCtx.createLinearGradient(oW / 2, oH / 2-10, oW / 2, oH / 2 - 150);
 var color2 = canvasCtx.createLinearGradient(oW / 2, oH / 2+10, oW / 2, oH / 2 + 150);
 color1.addColorStop(0, '#1E90FF');
 color1.addColorStop(.25, '#FF7F50');
 color1.addColorStop(.5, '#8A2BE2');
 color1.addColorStop(.75, '#4169E1');
 color1.addColorStop(1, '#00FFFF');
 color2.addColorStop(0, '#1E90FF');
 color2.addColorStop(.25, '#FFD700');
 color2.addColorStop(.5, '#8A2BE2');
 color2.addColorStop(.75, '#4169E1');
 color2.addColorStop(1, '#FF0000');
 function draw() {
 drawVisual = requestAnimationFrame(draw);
 var barHeight;
 // 自定义获取数组里边数据的频步
 canvasCtx.clearRect(0, 0, oW, oH);
 for (var i = 0; i bufferLength; i++) {
 barHeight = dataArray[i];
 analyser.getByteFrequencyData(dataArray);
 // 绘制向上的线条
 canvasCtx.fillStyle = color1; 
 /* context.fillRect(x,y,width,height)
 * x,y是坐标
 * width,height线条的宽高
 canvasCtx.fillRect(oW / 2 + (i * 8), oH / 2, 2, -barHeight);
 canvasCtx.fillRect(oW / 2 - (i * 8), oH / 2, 2, -barHeight);
 // 绘制向下的线条
 canvasCtx.fillStyle = color2; 
 canvasCtx.fillRect(oW / 2 + (i * 8), oH / 2, 2, barHeight);
 canvasCtx.fillRect(oW / 2 - (i * 8), oH / 2, 2, barHeight);
 draw();
 /script 
 /body 
 /html 

总结

以上所述是小编给大家介绍的JS实现可视化音频效果的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对凡科网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!




扫描二维码分享到微信

在线咨询
联系电话

400-888-8866