音频

import React from 'react';

var audioCtx = new (window.AudioContext || window.webkitAudioContext)();
var voiceSelect = document.getElementById("voice");
var source;
var stream;

// grab the mute button to use below

var mute = document.querySelector('.mute');

//set up the different audio nodes we will use for the app
var canvas, canvasCtx;


var visualSelect = document.getElementById("visual");

var drawVisual;


var analyser = audioCtx.createAnalyser();
analyser.minDecibels = -90;
analyser.maxDecibels = -10;
analyser.smoothingTimeConstant = 0.85;

var distortion = audioCtx.createWaveShaper();
var gainNode = audioCtx.createGain();
var biquadFilter = audioCtx.createBiquadFilter();
var convolver = audioCtx.createConvolver();


navigator.getUserMedia = navigator.getUserMedia ||
    navigator.webkitGetUserMedia ||
    navigator.mozGetUserMedia ||
    navigator.msGetUserMedia;


export default class AudioModule {
    constructor() {
        this.mediaStreamTrack = "";
        this.mediaRecorder = "";
        this.recordedChunks = [];
    }

    initPermissions(callback) { //初始化获取权限
        var that = this;
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {

            navigator.getUserMedia({audio: true}, function onSuccess(stream) {
                console.log('已点击允许,开启成功');
            }, function onError(error) {
                console.log("错误：", error);
            })

            navigator.getUserMedia({
                audio: true
            }).then(function (result) {

                console.log(result)


                if (result.state == 'granted') { // 用户之前已授予对麦克风的访问权

                } else if (result.state == 'prompt') { // 用户尚未授予访问权，调用 getUserMedia 时将会收到提示
                    that.initAudio(function (mediaRecorder) {
                        callback(mediaRecorder);
                    });
                } else if (result.state == 'denied') { // 系统或用户已显式屏蔽对麦克风的访问权，您将无法获得对其的访问权
                    alert("用户已禁止权限");
                    console.log("11111")
                }
                result.onchange = function (e) {
                    if (result.state == 'denied') { // 系统或用户已显式屏蔽对麦克风的访问权，您将无法获得对其的访问权
                        alert("用户已禁止权限");
                    }
                };
            });
        } else {
            console.log("无设备");
        }
    }

    visualize() {
        var WIDTH = canvas.width;
        var HEIGHT = canvas.height;


        analyser.fftSize = 256;
        var bufferLengthAlt = analyser.frequencyBinCount;

        var dataArrayAlt = new Uint8Array(bufferLengthAlt);


        var drawAlt = function () {
            drawVisual = requestAnimationFrame(drawAlt);

            analyser.getByteFrequencyData(dataArrayAlt);

            canvasCtx.clearRect(0, 0, WIDTH, HEIGHT);

            canvasCtx.fillStyle = 'transparent';
            canvasCtx.fillRect(0, 0, WIDTH, HEIGHT);

            var barWidth = (WIDTH / bufferLengthAlt);
            var barHeight;
            var x = 0;

            for (var i = 0; i < bufferLengthAlt; i++) {
                barHeight = dataArrayAlt[i];
                canvasCtx.fillStyle = 'rgb(' + (barHeight + 200) + ',210,200)';
                canvasCtx.fillRect(x, HEIGHT - barHeight / 2, barWidth, barHeight / 2);
                x += barWidth + 1;
            }
        };

        drawAlt();
    }

    voiceChange() {
        distortion.oversample = '4x';
        biquadFilter.gain.setTargetAtTime(0, audioCtx.currentTime, 0);
        biquadFilter.disconnect(0);
        biquadFilter.connect(convolver);
    }

    initAudio(callback) {
        let that = this;
        if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
            console.log(navigator)
            navigator.mediaDevices.getUserMedia({
                audio: true,
                video: false
            })
                .then(stream => {
                    source = audioCtx.createMediaStreamSource(stream);
                    source.connect(analyser);
                    analyser.connect(distortion);
                    distortion.connect(biquadFilter);
                    biquadFilter.connect(gainNode);
                    convolver.connect(gainNode);
                    gainNode.connect(audioCtx.destination);


                    canvas = document.getElementById('canvas');
                    canvasCtx = canvas.getContext("2d");
                    canvas.setAttribute('width', document.getElementById("canvasContent").clientWidth - 60);

                    that.visualize();
                    that.voiceChange();

                    that.mediaStreamTrack = stream;
                    that.mediaRecorder = new MediaRecorder(stream);
                    callback(that.mediaRecorder);

                    that.mediaRecorder.onstart = that.onstart.bind(that);

                    that.mediaRecorder.ondataavailable = that.ondataavailable.bind(that);

                    that.mediaRecorder.onpause = that.onpause.bind(that);

                    that.mediaRecorder.onresume = that.onresume.bind(that);

                    that.mediaRecorder.onstop = that.onstop.bind(that);


                })
                .then(function () {
                    that.mediaRecorder.start();
                });
        } else {
            console.log("无设备");

        }
    }

    onstart() {
        console.log("start");
    }

    onpause() {
        console.log("onpause");
    }

    onresume() {
        console.log("onresume");
    }

    ondataavailable(e) {
        this.recordedChunks.push(e.data);
    }

    getBlog() {
        return new Blob(this.recordedChunks, {type: "audio/wav"});
    }


    onstop() {
        this.mediaStreamTrack.getTracks().forEach(function (track) {
            track.stop();
        });
        this.emit('getBlog');
    }


    on(eventName, callback) {
        //你的代码
        if (!this.handles) {
            //this.handles={};
            Object.defineProperty(this, "handles", {
                value: {},
                enumerable: false,
                configurable: true,
                writable: true
            });
        }

        if (!this.handles[eventName]) {
            this.handles[eventName] = [];
        }
        this.handles[eventName].push(callback);
    }

    // 触发事件 eventName

    emit(eventName) {
        //你的代码
        if (this.handles[arguments[0]]) {
            for (var i = 0; i < this.handles[arguments[0]].length; i++) {
                this.handles[arguments[0]][i](arguments[1]);
            }
        }
    }
}