2017-09-20 1 views
1

Web Audio API를 사용하여 음악 용 사용자 지정 웹 플레이어를 작성하려고하지만 오디오 디코딩 문제가 발생합니다.AudioBuffer가 Cachable/decodeAudioData가 길지 않습니다

AudioContext.decodeAudioData 함수를 사용하여 .mp3을 백엔드에서 ArrayBuffer로 가져 와서 디코딩합니다.

const resp = await fetch(url); 
    const raw = await resp.arrayBuffer(); 
    const audioBuffer = context.decodeAudioData(raw); 

IndexedDB에서 AudioBuffer를 캐시하려고하는데 복제가 불가능합니다. 디코딩은 내 장치에서 일반 mp3로 약 10 초가 걸리며 꽤 오래 걸립니다. 프리 페치와 "프리 디코딩"을 제외하고는 노래 사이의 대기 시간을 길게하는 다른 선택의 여지가 있습니까?

+0

데이터를 스트림으로 가져 와서 부분적으로 디코딩 할 수 없습니까? – Nit

+0

자바 스크립트 시계가 매우 부정확하기 때문에 부분적으로 디코딩하는 것이 상당히 복잡해 보입니다. 나는 그것을 시도했지만 오디오 조각들 사이에 딱딱 거리는 것을 멈출 수는 없었다. "ArrayBuffer에 포함 된 오디오 파일 데이터를 비동기 적으로 디코딩합니다.이 경우 ArrayBuffer는 일반적으로 responseType을 arraybuffer로 설정 한 후 XMLHttpRequest의 응답 특성에서로드됩니다.이 메서드는 오디오 파일. " https://developer.mozilla.org/de/docs/Web/API/AudioContext – Lucas

답변

4

AudioBuffer가 오디오

이 인터페이스의 큰 조각을 위해 의미되지는 (소리 및 기타 짧은 오디오 클립 원샷에 대한 ) 메모리 상주 오디오 자산을 나타냅니다. 형식은 비 인터리브 IEEE 32 비트 선형 PCM이며 공칭 ​​범위는 -1 -> +1입니다. 하나 이상의 채널을 포함 할 수 있습니다. 일반적으로 PCM 데이터의 길이는 (보통 1 분 미만) 일 것입니다. 음악 사운드 트랙과 같이 더 긴 사운드의 경우 오디오 요소에 스트리밍을, MediaElementAudioSourceNode을 사용해야합니다.

(강조 광산) 당신은 당신이 실제로 즉석에서 오디오를 조작해야하는 경우 MediaElementAudioSourceNode을 조사 할 수 있습니다

https://www.w3.org/TR/webaudio/#AudioBuffer

. 그렇지 않으면 간단한 오디오 요소로 충분합니다.

+0

젠장, 그래서 나는 완전히 decodeAudioBuffer 메서드를 남용했습니다. 해명 해 주셔서 감사합니다. html 요소로 플레이어를 구현해 봅니다. – Lucas