音乐线条可视化教程html,JS实现可视化音频效果的实例代码

效果如图：

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

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

可视化音频

display: block;

background: url("./8.jpg");

background-position: center;

background-repeat: no-repeat;

background-attachment: fixed;

background-size:100%;

}

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(){

//当选择歌曲时，判