2013-04-26 2 views
2

나는 webgl을 사용하여 오디오 비주얼라이저를 만들고 사운드 클라우드 트랙을 그 안에 통합했습니다. 나는 트랙을 전환 할 수 없으면 좋겠지 만, 비주얼 라이저를 작동시키고 오디오를 중단 시키거나 오디오를 작동시키고 비주얼 라이저를 깨뜨릴 수 있습니다.크롬 오디오 분석기가 오디오 스위치를 깨뜨림.

나는 그것을 작업을 할 수 있었던 두 가지 방법은

오디오

  1. 몸에 새로운 오디오 요소를 추가 오디오 요소를 삭제 작업
  2. 트리거
을 재생할 수 있습니다

Vi sualizer 작업

  1. 정지 오디오
  2. 변경 소스
  3. 트리거 플레이

나는 비주얼의 작업을 할 때, 오디오는 완전히 엉망이된다. 버퍼의 소리가 틀리며 오디오에 인공물이 생깁니다 (잡음, 삐 소리, 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

답변

1

단일 창만 만들 수 있습니다 (AudioContext). 또한 사용을 마쳤 으면 MediaElementSource의 연결을 해제해야합니다.

다음은 비슷한 질문에 답하는 예제입니다. http://jsbin.com/acolet/1/

관련 문제