JavaScript中的音頻上下文和可視化器問題

Question

我當前的用於可視化程序的javascript解決方案存在問題，它似乎僅在播放，暫停，然后再次播放時才開始繪制，但在開始時它可以正常工作，但不能從一開始就直接起作用。 我嘗試了onload而不是start（）函數，但是這導致瀏覽器拒絕我的音頻上下文（要求用戶單擊按鈕）。

這是完整的代碼： 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){  ... 

Answer 1

添加setup（）; 暫停狀態由於某種原因也已修復。