javascript - JavaScript中的音频上下文和可视化器问题(Audio context and visualizer issue in javascript)

Question

i have a problem with my current javascript solution for a visualizer, it seems to only start drawing when played , paused and then played again , it works fine after but doesn't do work directly from the start.

(我当前的用于可视化程序的javascript解决方案存在问题，它似乎仅在播放，暂停，然后再次播放时才开始绘制，但在开始时它可以正常工作，但不能从一开始就直接起作用。)

i have tried an onload instead of my start() function but that leads to the browser denying my audiocontext (requires user to click on a button).

(我尝试了onload而不是start（）函数，但是这导致浏览器拒绝我的音频上下文（要求用户单击按钮）。)

heres the full code: https://codepen.io/Maxxidk/pen/KKwPmBK (sorry if it's messy i'm new) ,and some of it here:

(这是完整的代码： https : //codepen.io/Maxxidk/pen/KKwPmBK （很抱歉，如果我是新手，那是一团糟），下面是其中的一些：)

function setup(){
    if(hasstarted == 0){
        hasstarted=1;
        context = new AudioContext();
        src = context.createMediaElementSource(audio);
        analyser = context.createAnalyser(); 
        canvas = document.getElementById("vizcanvas");
        canvas.width = 1000;
        canvas.height = 70;
        ctx = canvas.getContext("2d");
        src.connect(analyser);
        analyser.connect(context.destination);
        //fft size higher = higher precision 
        analyser.fftSize = 1024;
        bufferLength = analyser.frequencyBinCount;
        dataArray = new Uint8Array(bufferLength);       
        WIDTH = canvas.width; 
        HEIGHT = canvas.height;
        start();
    }
}
$(document).ready(function(){
$('body').css('display', 'none').fadeIn(1000);
});

$("#playbtn").click(function(){
    if($("#playpauseicon").hasClass("fa fa-play")){
        $("#playpauseicon").removeClass("fa fa-play");
        $("#playpauseicon").addClass("fa fa-pause");
        pause();
    }
    else{
        $("#playpauseicon").removeClass("fa fa-pause");
        $("#playpauseicon").addClass("fa fa-play");
        play();
        setup();
    }
});


function play() {
    granimInstance1.changeState('default-state');
    audio.pause();
}

function pause() {
  granimInstance1.changeState('active-state');
  audio.play();
}
const StrmURL = 'http://patmos.cdnstream.com:9683/stream2';
//const StrmURL = 'http://139.162.14.151:9090/160mp3/;';
//const StrmURL = 'http://radio.rikairchy.net:8000/stream.mp3';
audio= document.getElementById("audio");
audio.crossOrigin = "anonymous";
audio.src = StrmURL;
audio.load();

function start() {

    //clipping reduction factor
    var nmbrAvg = 3;
    //get volume from slider
    var vol = document.getElementById('volumeS');
    //viz reaction to volume control
    var VOL = 0.5*audio.volume+0.5;
    //viz gain control
    var origgain = 0.00105;
    //viz highshelf control 
    var lowpass = -500;
    //viz gradient control higher = lower over the spectrum 
    var bg = 0.01;
    var gg = -0.001;
    var rg = -0.006;

    var barWidth = (WIDTH / bufferLength) * 2.5;
    var barHeight;
    var x = 3;




    //main visualizer and frame by frame logic    
    function renderFrame() {
      var winH = window.innerHeight;
      var winW = window.innerWidth;
      requestAnimationFrame(renderFrame);
      changevolume();
      rezfix();
      x = 0; //init pos for drawing the viz
      var multipl = 1; //multiplier for lowpass
      analyser.getByteFrequencyData(dataArray);

      ctx.clearRect(0, 0, WIDTH, HEIGHT); //clear previous frame
      function rezfix(){ //fix viz n of bars cuz of screen size
        if(winH<500 && winW>1000){  ... 

  ask by Feed The Beast translate from so