私は webgl でオーディオ ビジュアライザーを作成しており、soundcloud トラックをそれに統合しています。トラックを切り替えられないようにしたいのですが、ビジュアライザーを動作させてオーディオを中断させるか、オーディオを動作させてビジュアライザーを中断させることができます。
私がそれを機能させることができた2つの方法は
オーディオ作業
- オーディオ要素を削除
- body に新しい audio 要素を追加する
- トリガープレイ
ビジュアライザーの動作
- オーディオを停止
- ソースを変更
- トリガープレイ
ビジュアライザーを動作させると、オーディオが完全にめちゃくちゃになります。バッファのサウンドが正しくなく、オーディオにアーティファクト (ノイズ、ビープ音、ブループ音) が含まれています。
オーディオが機能しているときに を呼び出すと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変数はグローバルです。コードをさらに参照したい場合は、github の場所を参照してください。