JS实现本地音乐可视化AudioContext+canvas+Audio
！代码在末尾
效果：
播放本地音乐：Audio+input file
选择本地文件
<audio id='myAudio' controls><source src="./audio/林俊杰《起风了》.Mp3" type="audio/mp3">
audio>
<input type="file" id="file">
使用jQuery，把file加载到audio标签
$('#file').change(function() {//提交文件后let file = this.files[0];let url = URL.createObjectURL(file);console.log(url);document.getElementById("myAudio").src = url;//加载到audio标签});
分析音乐得到频谱：
使用AudioContext和canvas完成
通过getByteFrequencyData()方法将当前频率数据复制到传入的Uint8Array（无符号字节数组）中。
再把频率转化成对应的高度画到画布上面。
全部代码：
<!DOCTYPE html>
<html><head><meta charset="UTF-8" /><title>AudioContext</title><script src="https://cdn.staticfile.org/jquery/2.2.3/jquery.js"></script></head><style>html,body {background-color: black;color: aliceblue;text-align: center;}#div0{height: 132px;}#slideTg{font-size:30px;}#cas{display: fixed;top:300px;left: 251px;}/* 下面的都是input file标签的美化 */.file {position: relative;display: inline-block;background: #D0EEFF;border: 1px solid #99D3F5;border-radius: 4px;padding: 4px 12px;overflow: hidden;color: #1E88C7;text-decoration: none;text-indent: 0;line-height: 20px;}.file input {position: absolute;font-size: 100px;right: 0;top: 0;opacity: 0;}.file:hover {background: #AADFFD;border-color: #78C3F3;color: #004974;text-decoration: none;}</style><body><div id='div0' ><!-- 设置height，不然滑动后下面的div会上移动 --><div id='slideTg' title="点击隐藏/显示控件">︽</div><div id='control'><audio id='myAudio' controls><source src="./audio/林俊杰《起风了》.Mp3" type="audio/mp3"></audio><br/><a href="javascript:;" class="file">选择文件<input type="file" id="file"></a><span id='fileName'>林俊杰《起风了》.Mp3</span><!-- 文件名 --></div></div><canvas id="cas" width="1000" height="500"></canvas><script>$(function() {$("#slideTg").click(function() {$("#control").slideToggle("fast", function() {//jquery滑动if ($(this).is(":visible")) {$('#slideTg').text('︽');} else {$('#slideTg').text('︾');};});});const AudioContext = window.AudioContext || window.webkitAudioContext;let audioCtx;const myAudio = document.querySelector('#myAudio');$('#file').change(function() {//提交文件后console.log(this);let file = this.files[0];console.log(file.name);$('#fileName').text(file.name); //显示当前文件名let url = URL.createObjectURL(file);console.log(url);document.getElementById("myAudio").src = url;//加载到audio标签});myAudio.addEventListener('play', () => {//当开始播放audioCtx = new AudioContext();let source = audioCtx.createMediaElementSource(myAudio);//通过audio标签获取播放源let canvas = document.getElementById("cas");let canvasCtx = canvas.getContext("2d");let analyser = audioCtx.createAnalyser(); // 创建AnalyserNode 用于分析音频频谱的节点console.log(analyser);analyser.fftSize = 512; //表示（信号）样本的窗口大小，每格的宽度source.connect(analyser);analyser.connect(audioCtx.destination);let bufferLength = analyser.frequencyBinCount;console.log(bufferLength);let dataArray = new Uint8Array(bufferLength);console.log(dataArray);let width = 1000;let height = 500;/*** @param {Number} x,起点x坐标* @param {Number} y,起点y坐标* @param {Number} dx,终点x坐标* @param {Number} dy,终点y坐标* @return {Object} 返回一个线性 CanvasGradient对象,用于渐变*/const line = function(x, y, dx, dy) {let le = canvasCtx.createLinearGradient(x, 0, dx, 0);le.addColorStop(0, "#1b07ff");le.addColorStop(1, "#ff0000");return le;}function draw() {canvasCtx.clearRect(0, 0, width, height);drawVisual = requestAnimationFrame(draw);analyser.getByteFrequencyData(dataArray);canvasCtx.fillStyle = line(0, height, width, -5);canvasCtx.fillRect(0, height, width, -5);let barWidth = (width / bufferLength) * 2.5;let barHeight;let x = 0;for (let i = 0; i < bufferLength; i++) {barHeight = dataArray[i];canvasCtx.fillRect(x, height, barWidth - 1, -barHeight - 5);x = x + barWidth;}};draw();});})</script></body>
</html>本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！