Toca áudio no grails com html 5
11/07/2012 14:33
0
Galera,

estou desenvolvendo um sistema de upload que deveria tocar um preview do audio que foi salvo no banco. Porém não consigo fazer tocá-lo. Seguindo as dicas usei a tag audio do html5 porém não funciona.


Tentei usar o soundmanager, porém não funciona no firefox e IE, além disso está "abandonado"

Alguém poderia dar uma ajuda. Indicar um outro plugin ou uma forma de como fazer? Meu código está assim:

<audio controls="controls">


<source id="${a.id}" src="${a?.name}" type="audio/mp3" controls autoplay loop/>
Your browser does not support the audio element.
</audio>


Desde já agradeço pela ajuda
Tags: Audio, mp3, grails, html5


1
Olá, Bruno.

Você usou o

<!doctype html>


no inicio de seu GSP?

Se não tiver isso ou tiver algo diferente (doctype do HTML4, por exemplo) a tag <audio> não funcionará.


1
Outra coisa:

para que isso funcione
<source id="${a.id}" src="${a?.name}"...


deve haver um arquivo físico (real) cujo nome corresponda ao atributo "name" de seu objeto "a". É isso realmente que você tem?


0
Coloquei o

<!doctype html>

Vi em um post que precisa de uma action para fazer tocar usando responseOutputStream.write. Mas não consegui fazer tocar o audio :-(


Na minha view está assim: <g:link controller="spot" action="play" id="${a.id}">Play Clip ${a?.name}</g:link>


E no controller a action play esta assim


def play () {
//def spotInstance = Spot.get(params.id)
def audio = Audio.get(params.id.toLong())
println "audio="+audio

//def audios = fileOperationService.getAudios(spotInstance.id)
//def path = g.createLink(id: audio.id, action: 'getAudio')


response.setHeader("Cache-Control", "no-store")

response.setHeader("Pragma", "no-cache")
response.setDateHeader("Expires", 0)
response.setContentType("audio/mp3")

def responseOutputStream = response.getOutputStream()

responseOutputStream.write(request.getFile(audio))

//responseOutputStream.write(Spot.get( params.id))
responseOutputStream.flush()
responseOutputStream.close()

return null


}

Já busquei por plugins jquery mas não funciona Talvez seja esse arquivo fisico que não consigo pegar.

------
11/07/2012 18:04


0
Bruno... esse você está salvando o PATH do arquivo incluindo o nome em sua base de dados? Como você está armazenando o arquivo fisicamente?

Você já verificou se o arquivo está sendo salvo no diretório correto?


[]'s

Luciano
11/07/2012 18:19


0
Galera, consegui fazer tocar o áudio graças as dicas do Yoshiriro. Obrigado :D

Realmente deveria ter o áudio fisico. Alterei no controller o método Get e usando o fileOperationService.
def play (){

def audio = Audio.get(params.id.toLong())
def arq = fileOperationService.getFile(audio.path)

response.setHeader("Cache-Control", "no-store")
response.setHeader("Pragma", "no-cache")
response.setDateHeader("Expires", 0)
response.setContentType("audio/mp3")
def responseOutputStream = response.getOutputStream()
responseOutputStream.write(arq)
responseOutputStream.flush()
responseOutputStream.close()
return null
}

Só não consigo controlar as ações como voltar pausar do player. E também não funciona em alguns browsers. alguma dica?
11/07/2012 18:23


0
Cara, esse problema é apenas em sua view e possíveis scripts. O controle de áudio da tag html5 não vai requerer nenhuma ação em sem controlador.

O player está reproduzindo o arquivo? O próprio HTML5 possui o player padrão.
Referente aos browsers, infelizmente nem todos os browsers possuem todos os recursos HTML5 implementados, verifique o link abaixo e você terá maiores informações sobre o tratamento de áudio com HTML5.

http://www.w3schools.com/html5/html5_audio.asp


[]'s

Luciano
11/07/2012 19:01


0
Bruno,

você poderia trocar todo esse código
def responseOutputStream = response.getOutputStream()
responseOutputStream.write(arq)
responseOutputStream.flush()
responseOutputStream.close()
return null


somente por
response.outputStream << arq.bytes


Pelo menos faço assim com imagens e arquivos como PDF e DOC, por exemplo.

Abraços.


1
Ah, bem lembrado pelo Luciano. Tem que ver que nem todo browser tem o mesmo nivel de suporte ao HTML5.

Para ver a quantas anda o nivel de suporte de browsers desktop e mobile para a funcionalidade HTML5 que quer usar, use esse maravilhoso site:
http://html5test.com/compare/feature/index.html

Abraços.



Ainda não faz parte da comunidade???

Para se registrar, clique aqui.


Aprenda Groovy e Grails com a Formação itexto!

Newsletter Semana Groovy

Assinar

Envie seu link!


Livro de Grails


/dev/All

Os melhores blogs de TI (e em português) em um único lugar!

 
Creative Commons
RSS Grails Brasil é mantido por itexto Consultoria.
Em caso de problemas contacte Henrique Lobo Weissmann (Kico) por e-mail: kico@itexto.com.br
Todo o conteúdo presente neste site adota o Creative Commons como licença padrão.
Ver: 4.14.0
itexto