2

웹 서버에서 원시 오디오 청크를 보내고 있습니다. 아이디어는 그것들을 검색하여 가장 매끄러운 재생이 가능하도록 재생하는 것입니다. '네트워크 대기 시간이 항상 일정하지 않고, 그래서 데이터의 최신 덩어리가 아무튼 : 여기 원시 오디오 데이터를 스트리밍하는 동안 웹 오디오 재생에 균열이 발생했습니다.

코드의 가장 중요한 조각이 잘 친절하게 작동

ws.onmessage = function (event) { 
    var view = new Int16Array(event.data); 
    var viewf = new Float32Array(view.length); 

    audioBuffer = audioCtx.createBuffer(1, viewf.length, 22050); 
    audioBuffer.getChannelData(0).set(viewf); 
    source = audioCtx.createBufferSource(); 
    source.buffer = audioBuffer; 
    source.connect(audioCtx.destination); 
    source.start(0); 
}; 

하지만, 재생에 약간의 균열이있다 이전에 연주 된 곡의 끝 부분에 정확히 도착하므로 짧은 시간 동안 함께 연주하는 두 개의 버퍼 또는 전혀 연주하지 않는 버퍼로 끝날 수 있습니다.

내가 시도 :

  • 다음 중 하나를 재생에 대한 source.onended 후크하지만 원활한 아니다 :이 모든 청크의 끝 부분에 균열이 각 솔기가 전체 축적되어 재생이 더지고 있도록 더 늦은 스트림에 비해.
  • 현재 재생중인 버퍼에 새 데이터를 추가하지만 이는 금지 된 것처럼 보입니다. 버퍼는 고정 된 크기입니다.

재생을 해결할 적절한 해결책이 있습니까? 유일한 요구 사항은 websocket에서 오는 비 압축 오디오를 재생하는 것입니다.

편집 : 솔루션 : 내가 내 버퍼의 길이를 알고 감안할 때, 나는 이런 식으로 재생을 예약 할 수 있습니다

if(nextStartTime == 0) nextStartTime = audioCtx.currentTime + (audioBuffer.length/audioBuffer.sampleRate)/2; 
source.start(nextStartTime); 
nextStartTime += audioBuffer.length/audioBuffer.sampleRate; 

처음으로, 나는 반 A-buffer-에 재생의 시작을 예약 나중에 예상치 못한 최대 대기 시간을 허용합니다. 그런 다음 버퍼 끝의 맨 끝에 다음 버퍼 시작 시간을 저장합니다.

답변

2

WebAudio에서 일정을 세우는 방법을 잘 설명하는 https://www.html5rocks.com/en/tutorials/audio/scheduling/으로 시작해야합니다.

또한 PCM 샘플의 샘플 속도를 알고 있고 읽은 샘플의 수를 알고 있어야한다는 이점을 활용해야합니다. 버퍼를 재생하는 데 걸리는 시간을 결정합니다. 이를 사용하여 다음 버퍼를 예약 할시기를 파악하십시오.

(그러나 PCM 샘플 레이트가 audioCtx.sampleRate과 동일하지 않은 경우, 데이터, 리샘플링 될 것이라고하는 힘이 엉망 타이밍을.

+0

감사합니다. 단순히 "지금 당장"하는 것이 아니라 내가 한 일에 감사드립니다. 나는 지금 더 나은 방법으로 들리는 무언가가있다! – Ploppe

0

이이 일을 처리하는 더 좋은 방법이 있습니다주의 ... 고려 미디어 소스 Extensions를 사용

버퍼를 예약하고 모든 작업을 수행해야하는 경우 기본적으로받은 데이터를 버퍼에 덤프하고 HTTP를 통한 파일 인 것처럼 브라우저에서 버퍼링 된 재생에 대해 염려하게합니다.

Chrome은 WAV 파일 재생을 지원합니다. 데이터가 원시 PCM에 있기 때문에 WAV 파일 헤더를 스푸핑해야합니다.다행히도 이것은 어렵지 않습니다. http://soundfile.sapp.org/doc/WaveFormat/

+0

슬프게도 Media Source Extensions는 현재 WAV를 지원하지 않습니다. :(https://github.com/w3c/media-source/issues/55 – bertrandg

+0

안녕하세요 Brad, MediaSource를 디코딩하기 위해 MediaSource를 사용하는 방법을 보여주는 링크가 있습니까? 소켓에서 오는 mp3 데이터 청크? –