HTML5 오디오 요소 소스의 로컬 저장 - 가능합니까?

https://stackoverflow.com/questions/1612116

05-07-2019
|

문제

나는 늦게 HTML5의 오디오 및 로컬 스토리지 기능을 실험 해 왔으며 내가 혼란스러워하는 무언가에 빠졌습니다.

더 빠르고 오프라인 재생을 가능하게하기 위해 오디오 요소의 소스를 로컬로 캐시하거나 저장할 수 있기를 원합니다. 문제는 현재 구현에서 이것이 어떻게 가능한지 알 수 없다는 것입니다.

WebKit을 사용하여 다음을 시도했습니다.

로컬 캐싱을 설정하기 위해 매니페스트 파일을 만들지 만 오디오 파일은 스트림이나 무언가로 인해 캐시 가능한 항목이 아닌 것으로 보입니다.
또한 JavaScript를 사용하여 오디오 객체를 로컬 스토리지에 넣으려고 시도했지만 MP3의 크기는 메모리 문제로 인해 불가능합니다 (생각합니다).
데이터 URI 및 Base64를 사용하여 HTML을 캐시 할 수있는 오디오 전송으로 사용했지만 다시 파일 크기로 인해이 금지가됩니다. 또한 오디오 요소는 WebKit에서 이것을 좋아하지 않는 것 같습니다 (Mozilla에서 잘 작동합니다).
데이터를 로컬 데이터베이스 저장소에 넣는 몇 가지 방법을 시도했습니다. 다시 다른 경우와 같은 문제를 겪고 있습니다.

WebKit의 캐싱/로컬 스토리지를 사용하여 오프라인 재생 목표를 달성 할 수있는 방법에 대해 누군가가 가질 수있는 다른 아이디어를 듣고 싶습니다.

해결책

그래서이 질문을 한 지 얼마되지 않아서 우리가 어떻게 해결했는지에 대한 정보를 줄 것이라고 생각했습니다. 기본적으로 우리는 이와 유사한 기술을 사용하여 데이터를 PNG로 인코딩했습니다.

~~http://audioscene.org/scene-files/yury/pngencoding/sample.html~~

그런 다음 HTML5 로컬 스토리지를 사용하여 모바일 장치의 이미지를 캐시하고 필요에 따라 액세스했습니다. PNG는 꽤 컸지 만 이것은 우리에게 효과적이었습니다.

다른 팁

iOS (iPhone / iPad 용)에서 직접 수행하려고 노력했지만 캐시가 매니페스트하더라도 오프라인으로 오디오 파일을 캐시하는 것을 거부합니다.

오류는 아니지만 대신 컨트롤없이 JavaScript를 통해 호출하면 오디오 요소를 재생 한 척합니다. 컨트롤이 포함 된 경우 "오디오 파일을 재생할 수 없음"이라는 대체 컨트롤이 표시됩니다. 응용 프로그램이 온라인으로 이동할 수 있으면 잘 작동합니다.

오디오를 캐시하지 않고 다른 사운드 리소스를 재생하면 메모리에서 이전 리소스를 지우는 것으로 보입니다. 이는 온라인에서도 쓸모없는 기능입니다.

오디오를 데이터 URI로 인코딩하는 Base64를 실험했습니다. 이것은 데스크탑에서 Safari에서 작동하지만 (적어도 내가 사용하고있는 약 20-30k의 상당히 짧은 샘플의 경우) iOS에서 전혀 지원되지 않는 것 같습니다. 조용히 아무것도하지 않습니다.

다른 공급 업체에 대해 잘 모르겠습니다. Google Chrome은 오디오 용 데이터 URI를 지원하지 않았지만 아마도 수정했을 것입니다 ... - 지금은 불가능한 것 같습니다.

업데이트 : iPhone OS 3.x를 사용한 사소한 불일치 (3.1.2로 테스트 됨) : 오프라인 웹 앱에 오디오 요소가 지정되지만 제어가 없으면 애니메이션이 아닌 상태에서 비 인터랙티브 컨트롤을 표시합니다. 그것에 스피너 (확실히하지 말아야한다). 나는 이것이 iOS 4.X (다음 주에 나가야 함)에 고정되어 있다고 가정합니다.

나는 내가 만들고있는 게임을 위해 이것을하려고 노력하는 데 잠시 시간을 보냈고, 브라우저 (Firefox 및 Chrome)를 알 수있는 한 오디오 요소의 캐싱을 지원하지 않기 때문에 내가 찾은 솔루션을 게시 할 것이라고 생각했습니다.

여기에 설명 된 해결 방법이 있습니다. http://dougx.net/plunder/index.php#code

나는 그것이 잘 작동하는지 확인할 수 있지만 아마도 작은 파일에 더 적합 할 것입니다. 그가 여기서 설명하는 것처럼 (http://dougx.net/plunder/gamesounds.txt), 당신은 오디오를 Base64 문자열로 인코딩하고 그들에게 데이터를 제공합니다 : 오디오/ogg; base64 (또는 호환 가능한 오디오 형식) 헤더, html5 오디오는 읽을 수 있습니다. 이것은 문자열이기 때문에 브라우저가 캐시합니다. .

파일을 로컬로 캐싱하는 데 가장 관련성이 높은 메커니즘처럼 느껴지기 때문에 매니페스트 접근 방식을 작동시키는 것이 바람직하다고 생각합니다.

오디오 파일의 HTTP 헤더를 변경하면 어떻게됩니까? Content-Type 그리고 Expires? 파일 확장자가 변경되면 브라우저가 다른 작업을 수행합니까?

지금까지 운이 없었습니다.

당신은보고 싶을 수도 있습니다 Jai (JavaScript 오디오 인터페이스) ( "웹을위한 세계 최초의 JavaScript 인터페이스 <audio>"). 또는 연락을 취하십시오 Alastair MacDonald, 누가 썼니.

실패, HTML5 의사 도움을 줄 수 있습니다.

로컬 스토리지에 비디오 및 오디오 파일을 추가하면 iOS 4.3과 함께 작동합니다.

방금 비디오와 오디오 파일을 추가하여 Manifest를 추가했으며 둘 다 iPad에서 오프라인 스토리지로 다운로드되었습니다.

라이센스 : CC-BY-SA ~와 함께 속성

제휴하지 않습니다 StackOverflow