chrome音频分析仪在音频开关上中断

Posted 2023-02-25

【中文标题】chrome音频分析仪在音频开关上中断

【英文标题】：chrome audio analyzer breaking on audio switch

【发布时间】：2013-04-26 04:54:14

【问题描述】：

我正在使用 webgl 创建一个音频可视化器，并且一直在将 soundcloud 轨道集成到其中。我不想切换音轨，但我可以让我的可视化器工作并且音频中断，或者我可以让音频工作并且可视化器中断。

我能够让它发挥作用的两种方法是

音频工作

删除音频元素 将新的音频元素附加到正文 触发播放

---

可视化器工作

停止音频 更改来源 触发播放

当我让可视化器工作时，音频完全混乱了。缓冲区只是听起来不对，而且音频中有伪影（噪音、哔哔声和嗡嗡声）。

当我让音频正常工作时，当我调用analyser.getByteFrequencyData 时，我得到一个 0 数组。我想这是因为分析仪没有正确连接。

音频工作的代码如下所示

$('#music').trigger("pause");
currentTrackNum = currentTrackNum + 1;
var tracks = $("#tracks").data("tracks")
var currentTrack = tracks[parseInt(currentTrackNum)%tracks.length];
// Begin audio switching
analyser.disconnect();
$('#music').remove();
$('body').append('<audio id="music" preload="auto" src="'+ currentTrack["download"].toString() + '?client_id=4c6187aeda01c8ad86e556555621074f"></audio>');
startWebAudio(),

（我认为我不需要pause 电话。是吗？）

当我希望可视化器工作时，我使用此代码

currentTrackNum = currentTrackNum + 1;
var tracks = $("#tracks").data("tracks")
var currentTrack = tracks[parseInt(currentTrackNum)%tracks.length];
// Begin audio switching
$("#music").attr("src", currentTrack["download"].toString() + "?client_id=4c6187aeda01c8ad86e556555621074f");
$("#songTitle").text(currentTrack["title"]);
$('#music').trigger("play");

startWebAudio 函数如下所示。

function startWebAudio() 
  // Get our <audio> element
  var audio = document.getElementById('music');
  // Create a new audio context (that allows us to do all the Web Audio stuff)
  var audioContext = new webkitAudioContext();
  // Create a new analyser
  analyser = audioContext.createAnalyser();
  // Create a new audio source from the <audio> element
  var source = audioContext.createMediaElementSource(audio);
  // Connect up the output from the audio source to the input of the analyser
  source.connect(analyser);
  // Connect up the audio output of the analyser to the audioContext destination i.e. the speakers (The analyser takes the output of the <audio> element and swallows it. If we want to hear the sound of the <audio> element then we need to re-route the analyser's output to the speakers)
  analyser.connect(audioContext.destination);

  // Get the <audio> element started  
  audio.play();
  var freqByteData = new Uint8Array(analyser.frequencyBinCount);

我怀疑分析仪没有正确连接，但我不知道该看什么才能弄清楚。我查看了frequencyByteData 输出，这似乎表明某些东西没有正确连接。 analyser 变量是全局变量。如果您想更多地参考代码，这里是where it is on github

【参考方案1】：

每个窗口只能创建一个AudioContext。您还应该在使用完 MediaElementSource 后断开它。

这是一个我曾经回答过类似问题的例子：http://jsbin.com/acolet/1/