HTML5 Armazenamento local da fonte do elemento de áudio - é possível?

Question

Eu tenho experimentado os recursos de áudio e armazenamento local do HTML5 ultimamente e encontrei algo que me deixou perseguido.

Eu gostaria de poder armazenar em cache ou armazenar a fonte do elemento de áudio localmente para ativar a reprodução mais rápida e offline. O problema é que não consigo ver como isso é possível com a implementação atual.

Eu tentei o seguinte usando o webkit:

1. Criando um arquivo de manifesto para configurar o cache local, mas o arquivo de áudio parece não ser um item em cache, talvez devido à maneira como é fluxo ou algo assim

2. Também tentei usar o JavaScript para colocar um objeto de áudio no armazenamento local, mas o tamanho do MP3 torna isso impossível devido a problemas de memória (eu acho).

3. Eu tentei usar o Data URI e o BASE64 para usar o HTML como um transporte de áudio que pode ser armazenado em cache, mas novamente o tamanho da file torna esse proibitivo. Além disso, o elemento de áudio não parece gostar disso no webkit (funciona bem em Mozilla)

4. Eu tentei vários métodos para colocar os dados no armazenamento de banco de dados local. Novamente sofrendo os mesmos problemas que os outros casos.

Eu adoraria ouvir outras idéias que alguém possa ter sobre como eu poderia alcançar meu objetivo de reprodução offline usando armazenamento local/cache no webkit.

Answer 1

Então, já faz um tempo desde que fiz essa pergunta e pensei em dar algumas informações sobre como resolvemos. Basicamente, codificamos os dados nos PNGs usando uma técnica semelhante a esta:

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

Em seguida, armazenou em cache a imagem no dispositivo móvel usando o armazenamento local HTML5 e acessou -a conforme necessário. Os PNGs eram muito grandes, mas isso funcionou para nós.

Answer 2

Eu tenho tentado fazer isso sozinho, no iOS (para iPhone / iPad), mas ele se recusa a armazenar arquivos de áudio em cache em offline, mesmo que no manifesto do cache.

Não erra, mas simplesmente finge ter reproduzido o elemento de áudio se invocado via JavaScript sem controle. Se estiver incorporado a um controle, exibe um controle alternativo que diz "não pode reproduzir o arquivo de áudio". Funciona bem se o aplicativo puder ficar on -line.

Parece não armazenar em cache o áudio, reproduzir outro recurso de som parece fazer com que ele limpe o recurso anterior da memória - essa é uma funcionalidade bastante inútil, mesmo quando online.

Eu experimentei a base de Base64, codificando o áudio como Data URI. Isso funciona no Safari na área de trabalho (pelo menos para amostras bastante curtas de cerca de 20 a 30k que eu tenho usado), mas parece não ser suportado no iOS - ele não faz nada, o que é altamente irritante.

Não conheço outros fornecedores - o Google Chrome costumava não oferecer suporte a Data Uri's para áudio, mas talvez eles o consertassem ... - parece que não é possível por enquanto.

ATUALIZAÇÃO: Discrepância menor com o iPhone OS 3.x (testado com 3.1.2): Se um elemento de áudio for especificado em um aplicativo da Web offline, mas não possui controle, ele exibe um controle não interativo com um não animado Spinner nele (o que definitivamente não deveria fazer). Suponho que isso seja corrigido no iOS 4.x (que deve sair na próxima semana).

Answer 3

Passei um tempo tentando fazer isso para um jogo que estou fazendo e, até onde pude dizer aos navegadores (Firefox e Chrome), ainda não suportam o armazenamento em cache de elementos de áudio que pensei em postar a solução que encontrei.

Há uma solução alternativa descrita aqui: http://dougx.net/plunder/index.php#code

Posso confirmar que funciona muito bem, mas provavelmente é mais adequado para arquivos menores. Como ele descreve aqui (http://dougx.net/plunder/gamesounds.txt), você codifica o áudio como strings base64 e dá a eles um cabeçalho de dados: áudio/ogg; base64 (ou qualquer formato de áudio compatível), que o áudio HTML5 pode ler. Como isso é apenas uma string, o navegador irá cache .

Answer 4

Eu acho que seria preferível fazer a abordagem manifestada funcionar, pois esse parece o mecanismo mais relevante para armazenar em cache localmente o arquivo.

O que acontece se você alterar os cabeçalhos HTTP do arquivo de áudio, por exemplo, Content-Type e Expires? O navegador faz algo diferente se a extensão do arquivo for alterada?

Answer 5

Vejo que você não teve sorte até agora.

Você pode querer dar uma olhada em JAI (interface de áudio JavaScript) ("A primeira interface JavaScript do mundo para Web <audio>"). Ou entre em contato com Alastair MacDonald, quem escreveu isso.

Falha nisso, o HTML5 Doctor pode ser capaz de ajudar.

Answer 6

Adicionar arquivos de vídeo e áudio ao armazenamento local funciona com o iOS 4.3.

Acabei de adicionar um vídeo e um arquivo de áudio para se manifestar e os dois foram baixados para o armazenamento offline no iPad.