使用Web Audio API绘制音波图

摘要：Web Audio API是对<audio> 标签功能上的补充，我们可以用它完成混音、音效、平移等各种复杂的音频处理，本文简单的使用其完成音波图的绘制。

PS：本例子使用ES6编程，最好在新版chrome中运行。

一、前端文件index.html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

    <meta http-equiv="X-UA-Compatible" content="ie=edge" />

    <title>audiogram</title>

</head>

<body>

<canvas id="canvas" width="400" height="100"></canvas>

<button class="play" style="width: 50px;height: 50px;">开始</button>

<button class="stop" style="width: 50px;height: 50px;">停止</button>

</body>

<script type="module" src="Main.js"></script>

</html>

PS:浏览器加载ES6模板使用<script>标签时，要加入type = “module”属性，浏览器会默认异步加载，并知道Main.js是一个ES6模块。

二、创建Audio类

//audit类，用于加载，播放音乐

export class Audio {

    //单例

    static getInstance() {

        if (!Audio.instance) {

            Audio.instance = new Audio();

        }

        return Audio.instance;

    }

    //构造函数

    constructor() {

        this.ctx = new (window.AudioContext || window.webkitAudioContext)();

    }

    //加载资源

    getData() {

        this.analyser = this.ctx.createAnalyser();

        //从元素创建媒体节点 可以直接将audio元素传入后创建，就不用request来请求资源

        //this.source = this.ctx.createMediaElementSource(audio);

        this.source = this.ctx.createBufferSource();

        this.source.loop = true;

        //创建AnalyserNode，用来显示音频时间和频率的数据

        this.source.connect(this.analyser);

        //最后连接到音频渲染设备，发出声音

        this.analyser.connect(this.ctx.destination);

        //获取频率

        this.freqs = new Uint8Array(this.analyser.frequencyBinCount);

        //请求资源

        let request = new XMLHttpRequest();

        request.open('get', 'res/bgm.mp3', true);

        //responseType属性须设置为arraybuffer

        request.responseType = 'arraybuffer';

        //decodeAudioData方法用于解码音频文件

        request.onload = () => {

            var audioData = request.response;

            this.ctx.decodeAudioData(audioData, (buffer) => {

                //将解码后的音频文件作为声音的来源

                this.source.buffer = buffer;

                //立即开始播放声音

                this.source.start(0);

            }, (e) => {

                "Error with decoding audio data" + e.error

            });

        };

        request.send();

    }

}

三、创建Main类

import {Audio} from "./js/Audio.js";

//用于控制整个页面的流程

 class Main {

    constructor() {

        //获取audio实例

        this.audio = Audio.getInstance();

        this.init();

    }

    //初始化

    init() {

        //初始化按钮

        this.play = document.querySelector('.play');

        this.stop = document.querySelector('.stop');

        //确保加载完资源后开始输出

        let promise = new Promise((resolve) => {

            this.audio.getData();

            resolve();

        });

        promise.then(() => {

            this.initCanvas();

            this.outPut()

        });

        //播放按钮

        this.play.onclick = () => {

            this.audio.ctx.resume();

            this.outPut();

            this.play.setAttribute('disabled', 'disabled');

        }

        //停止按钮

        this.stop.onclick = () => {

            this.audio.ctx.suspend();

            //this.audio.source.stop(0);使用stop停止时无法恢复，需要重载资源

            cancelAnimationFrame(this.timer);

            this.play.removeAttribute('disabled');

        }

    }

    //初始化canvas

    initCanvas() {

        let cv = document.querySelector('#canvas');

        this.canvasWidth = cv.width;

        this.canvasHeight = cv.height;

        this.canvas = cv.getContext("2d");

        this.canvas.translate(0.5, 0.5);

        this.outPutData = this.audio.freqs;

    }

    //输出图像

    outPut() {

        var height = this.canvasHeight;

        var width = this.canvasWidth;

        var outPutData = this.outPutData;

        var length = outPutData.length;

        this.audio.analyser.getByteFrequencyData(outPutData);

        //将缓冲区的数据绘制到Canvas上

        this.canvas.clearRect(-0.5, -0.5, width, height);

        this.canvas.beginPath(), this.canvas.moveTo(0, height);

        for (var i = 0; i < width; i++)

            this.canvas.lineTo(i, height - height * outPutData[Math.round(length * i / width)] / 255);

        this.canvas.lineTo(i, height), this.canvas.fill();

        //请求下一帧

        this.timer = requestAnimationFrame(() => {

            this.outPut()

        });

    }

}

new Main();

PS：在ES6中使用箭头函数时，箭头函数中的this指向Main，真的超级好用。

注意：使用chrome打开时会出现 Origin 'null' is therefore not allowed access.这是由于在本地html页面ajax请求本地或者局域网server的资源时，被浏览器禁止了，跨域请求会带来安全隐患，因此谷歌浏览器对此做出了限制。

在服务端我们可以设置response.setHeader("Access-Control-Allow-Origin: *")允许这么做，如果是客户端的话我们可以右键chrome快捷方式—>属性->目标-> 将"--allow-file-access-from-files"添加至最后重启浏览器即可。

工程目录结构：

└── audiogram

├── js

│ └── Audio.js

├── res

　　　　│　　　└── bgm.mp3

　　　　 ├ ─ ─ index.html

　　　　 └ ─ ─ Main.js

效果图：