声音音频可视化柱状效果-html代码-BFW代码库

声音音频可视化柱状效果

代码语言：html

所属分类：多媒体

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Audio Visualizer</title>
<style>
    /*visualizer.css*/
 
#file {
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 100;
}
 
#canvas {
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}
 
audio {
    position: fixed;
    left: 10px;
    bottom: 10px;
    width: calc(100% - 20px);
}
 
</style>
    <script type="text/javascript" >
        // visualizer.js
 
window.onload = function () {
 
    var file = document.getElementById("file");
    var audio = document.getElementById("audio");
 
 
 
    file.onchange = function () {
        //part1: 画布
        var canvas = document.getElementById("canvas");
        var context = canvas.getContext("2d");
 
        canvas.width = window.innerWidth;
        canvas.height = window.innerHeight;
        var WIDTH = canvas.width;
        var HEIGHT = canvas.height;
 
        //part2: 音频
        var files = this.files;//声音文件
        audio.src = URL.createObjectURL(files[0]);
        audio.load();
 
        //part3: 分析器
        var AudCtx = new AudioContext();//音频内容
        var src = AudCtx.createMediaElementSource(audio);
        var analyser = AudCtx.createAnalyser();
 
        src.connect(analyser);
        analyser.connect(AudCtx.destination);
        analyser.fftSize = 128;//快速傅里叶变换, 必须为2的N次方
 
        var bufferLength = analyser.frequencyBinCount;// = fftSize * 0.5
 
        //part4: 变量
        var barWidth = (WIDTH / bufferLength) - 1;//间隔1px
        var barHeight;
 
        var dataArray = new Uint8Array(bufferLength);//8位.........完整代码请登录后点击上方下载按钮下载查看