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
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
1
Olá, Bruno.
Você usou o
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á.
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á.
11/07/2012 17:25
1
Outra coisa:
para que isso funcione
deve haver um arquivo físico (real) cujo nome corresponda ao atributo "name" de seu objeto "a". É isso realmente que você tem?
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?
11/07/2012 17:27
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.
------
<!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
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?
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
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
somente por
Pelo menos faço assim com imagens e arquivos como PDF e DOC, por exemplo.
Abraços.
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.
11/07/2012 19:42
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.
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.
11/07/2012 19:44
Ainda não faz parte da comunidade???
Para se registrar, clique aqui.
Aprenda Groovy e Grails com a Formação itexto!
Newsletter Semana Groovy
Os melhores blogs de TI (e em português) em um único lugar!
