如何始终显示当前在 Canvas 对象上播放的音频对象的频率？

Question

我目前正在为自己的网络播放器编写视听器。我的目标是始终在 canvas 对象上显示当前播放的音频对象的频率，即使此音频对象将被更改。

说明：每当按下 Play 时，就会调用相应的 audioElement 的 initPlayer 函数。



var canvas, ctx, source, context, analyser, fbc_array, bars, bar_x, bar_width, bar_height;
var audio = [document.getElementById("aBleibBeiUns"), document.getElementById("aOffline"), document.getElementById("aLeuchtturm"), document.getElementById("aImmerBegleiten"), document.getElementById("aCan'tHelpFallingInLove"), document.getElementById("aDerGedanke"), document.getElementById("aGefälltMir"),document.getElementById("aGL713"),document.getElementById("aDuBistDa"),document.getElementById("aAllOfMe"),document.getElementById("aCelloSuiteNo2"),document.getElementById("aDerSchwan"),document.getElementById("aRhapsodie")];    

function initPlayer(audio){

    document.getElementById('audioselect').appendChild(audio);
    context = new AudioContext(); //THE NUMBER IS LIMITED TO 6

    analyser = context.createAnalyser();
    canvas = document.getElementById('canvas');
    ctx = canvas.getContext('2d');

    try{
        source = context.createMediaElementSource(audio);  //HOW CAN I RECREATE THE SOURCE ITEM OVER AND OVER AGAIN OR REMOVE THE CONNECTION TO THE PREVIOUS SOURCE NODE?
        source.connect(analyser);
    }catch(e){console.log(e);}
    analyser.connect(context.destination);

    new frameLooper();      
}


//graphics refresh

function frameLooper(){

    window.requestAnimationFrame(frameLooper);
    fbc_array = new Uint8Array(analyser.frequencyBinCount); 
    analyser.getByteFrequencyData(fbc_array);

    ctx.clearRect(0,0, canvas.width, canvas.height);
    ctx.fillStyle = '#333'; //Color of the Bars
    bars = 400;
    for (var i = 0; i < bars; i++){
        bar_x = i * 6;
        bar_width = 5;
        bar_height = -(fbc_array[i] / 2);
        //fillRect(x,y,width,height)            
        ctx.fillRect(bar_x, canvas.height, bar_width, bar_height);  
    }       
}


Here is the code from which the initPlayer function is executed:

function aselect(snmbr){    
    var audio = [document.getElementById("aBleibBeiUns"), document.getElementById("aOffline"), document.getElementById("aLeuchtturm"), document.getElementById("aImmerBegleiten"), document.getElementById("aCan'tHelpFallingInLove"), document.getElementById("aDerGedanke"), document.getElementById("aGefälltMir"),document.getElementById("aGL713"),document.getElementById("aDuBistDa"),document.getElementById("aAllOfMe"),document.getElementById("aCelloSuiteNo2"),document.getElementById("aDerSchwan"),document.getElementById("aRhapsodie")];    

    if(!audio[snmbr].paused){       
        audio[snmbr].pause();       
    } else if(audio[snmbr].paused){         
        audio[snmbr].play();                
        new initPlayer(audio[snmbr], snmbr); //Here     
        audio[snmbr].volume = document.getElementById("currentvolume").value/100;       

        new playtime(snmbr);
    }
    for(var i=0;i < audio.length; i++){
        if(i != snmbr){                     
            audio[i].pause();
            audio[i].currentTime = 0;
        }
    }   
}

错误： 1. WEBAUDIO17026：HTMLMediaElement 之前已连接到另一个 MediaElementSourceNode。 scripte.js (192,3)

2。 WEBAUDIO17012：AudioContext 的数量已达到最大值 (6)。 scripte.js (185,2)

3。 SCRIPT5022：语法错误 scripte.js (185,2)

Answer 1

一种解决方案是仅更改音频元素的来源。

如何始终显示当前在 Canvas 对象上播放的音频对象的频率？

How can I always display the frequencies of the audio object currently playing on a Canvas object?

javascript

canvas

html5-audio

mediaelement.js

audiocontext