javascript - 如何始终显示当前在 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();      
}


//图形刷新

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);  
    }       
}


下面是执行 initPlayer 函数的代码：

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：SyntaxError scripte.js (185,2)

标签： javascriptcanvashtml5-audiomediaelement.jsaudiocontext

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

问题描述

解决方案

推荐阅读