网络音频，createMediaElementSource变量源

Question

可以说我不想拥有一个具有可变音频源作为音频标签的应用程序，例如：

<audio preload="auto" src="1.mp3" controls="" class="muzz"></audio>
<audio preload="auto" src="track.mp3" controls="" class="muzz"></audio>

取决于播放哪一个，应将其传递到createMediaElementSource，然后将声音发送到分析器，并使用它完成各种操作，但是它不起作用：

var trackName;
//get the source of clicked track
$(".muzz").on("play", function(){
    trackName = $(this).attr("src");
    console.log("got a source: ", trackName);
    audio = new Audio();
    audio.src=trackName;




    context = new AudioContext();
    analyser = context.createAnalyser();
    source = context.createMediaElementSource(audio);
    source.connect(analyser);
    analyser.connect(context.destination); 

    letsDraw();


});

控制台日志显示正确的源名称，应该使用letsDraw（）方法绘制音频播放的声谱图：

function letsDraw(){
console.log("draw called");
window.requestAnimationFrame(letsDraw);
fbc_array = new Uint8Array(analyser.frequencyBinCount);
analyser.getByteFrequencyData(fbc_array); //get frequency from the analyser node
ctx.clearRect(0, 0, canvas.width, canvas.height);

ctx.fillStyle="white";
ctx.font = "bold 12px Arial";
ctx.fillText("currently playing:" + trackName, 10, 20);//this works

bars =  150;
for(var i = 0; i < analyser.frequencyBinCount; i++){ //but this doesn't


    /*fill the canvas*/
    x = i *2;
    barWidth = 1;
    barHeight = -(fbc_array[i]/1.8); 

    //colours react to the  frequency loudness
        hue = parseInt(500 * (1 - (barHeight / 200)), 10); 
            ctx.fillStyle = 'hsl(' + hue + ',75%,50%)';

    ctx.fillRect(x, canvas.height, barWidth, barHeight);

}

}

使用一组音频源工作正常，但使用可变源失败，任何想法都将不胜感激。

当然，甚至根本不会在控制台中引发任何错误。

Answer 1

在第一个代码块的顶部，尝试以下操作：

var trackName,
  context = new AudioContext();

并删除context = new AudioContext(); 从点击处理程序。

您的页面只应有一个AudioContext。

Answer 2

我不明白的是为什么要使用src并将其放在新的Audio对象中，因为已经有了它们。

从两个<audio>标签创建一个源也更好。 您只需创建一个在页面加载时运行的函数即可（因此，当页面上的所有内容都准备就绪时，您将不会收到有关尚不存在的元素的任何错误等）。

在我开始编写代码之前，您期望发生什么？ 是否应该可以同时播放两个标签，或者如果您单击另一个上的播放，应该停止一个？ 如果不应该同时播放，则最好制作一个<audio>标签并创建两个按钮，每个按钮都设置标签的src。

代码的另一个问题是您已经具有<audio>元素，并且要播放它们时，您只需创建一个新的audio元素并将src附加到该元素即可。其背后的逻辑是什么？

编辑：

这是仅使用一个<audio>元素使用多个源的示例 。

HTML代码应如下所示：

<audio id="player" src="" autoplay="" controls=""></audio>
<div id="buttons">
    <!--The javascript code will generate buttons with which you can play the audio-->
</div>

然后，您可以使用以下JS代码：

onload = function () { //this will be executed when the page is ready
    window.audioFiles = ['track1.mp3', 'track2.mp3']; //this is gonna be the array with all file names
    window.player = document.getElementById('player');
    window.AudioContext = window.AudioContext || window.webkitAudioContext;
    context = new AudioContext();
    source = context.createMediaElementSource(player);
    analyser = context.createAnalyser();
    source.connect(analyser);
    analyser.connect(context.destination);

    //now we take all the files and create a button for every file
    for (var x in audioFiles) {
        var btn = document.createElement('button');
        btn.innerHTML = audioFiles[x];
        btn.onclick = function () {
            player.src = audioFiles[x];
            //so when the user clicks the button, the new source gets appended to the audio element
        }
        document.getElementById('buttons').appendChild(btn);
    }

}

希望评论足够好解释

编辑2：

您想知道如何对多个元素执行此操作。 您要做的是在页面加载时创建所有音频元素，并为其创建所有源。 这将减少开始播放音频时的混乱。 代码在这里 。

您需要做的是为每个拥有的媒体文件运行for循环，它将为音频文件创建具有适当来源的音频元素，然后为其创建一个sourcenode（ createMediaElementSource ），并将该sourcenode连接到分析器。

我也想谈谈您的可视化工具代码。 如果您不覆盖字体，颜色或其他任何内容，则无需每个动画帧都执行一次。 一次初始化就足够了。