나는 webgl을 사용하여 오디오 비주얼라이저를 만들고 사운드 클라우드 트랙을 그 안에 통합했습니다. 나는 트랙을 전환 할 수 없으면 좋겠지 만, 비주얼 라이저를 작동시키고 오디오를 중단 시키거나 오디오를 작동시키고 비주얼 라이저를 깨뜨릴 수 있습니다.크롬 오디오 분석기가 오디오 스위치를 깨뜨림.
나는 그것을 작업을 할 수 있었던 두 가지 방법은
오디오
- 는
- 몸에 새로운 오디오 요소를 추가 오디오 요소를 삭제 작업 는
- 트리거
Vi sualizer 작업
- 정지 오디오
- 변경 소스
- 트리거 플레이
나는 비주얼의 작업을 할 때, 오디오는 완전히 엉망이된다. 버퍼의 소리가 틀리며 오디오에 인공물이 생깁니다 (잡음, 삐 소리, bloops).
오디오를 작동시킬 때 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
전화를 필요가 있다고 생각하지 않습니다. I합니까?)
, 내가 이것을 사용과 같은 오디오 작업의 코드 본다 코드
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