Primeira dica, sempre use var
quando for declarar as variaveis, ex: var variavel = ...;
, deve ficar algo como:
$(document).on('click', '#tocar-musica', function () {
var id_musica = $(this).find('.id-musica').val();
var nm_musica = $(this).find('.nm-musica').val();
Eu não vejo necessidade do Ajax (não vai ajudar muito a ocultar), mas isto não vem ao caso agora. Não é necessário "rendereziar/gerar" o player no play_musica.php
, gere apenas o caminho:
<?php
$musica = $_GET['musica'];
echo 'http://www.meusite.net/audio/' . $musica . '.mp3';
O ajax deve ficar assim:
function gerarPlayer(path)
{
path = path.replace(/^\s+|\s+$/gm, '');//Remove espaços em branco, é equivalente ao String.trim
return (
'<audio autoplay preload="none" controls="controls">' +
'<source src="' + path + '" type="audio/mp3">' +
'O seu navegador não suporta áudio em HTML5.' +
'</audio>'
);
}
$(document).on('click', '#tocar-musica', function () {
var id_musica = $(this).find('.id-musica').val();
var nm_musica = $(this).find('.nm-musica').val();
$.ajax({
type: "GET",
url: "http://www.meusite.net/play_musica.php",
data: "musica=" + id_musica
}).done(function(msg) {
$('#botao').html(gerarPlayer(msg));
$('#play').html("<img src='http://www.meusite.net/images/equalizador.gif'><br>" + nm_musica);
});
});
AutoPlay no iOS
O autoplay é bloqueado no iOS (e outros sistemas mobiles) por conveniência, ou seja economizar a bateria enquanto navega na internet por exemplo, então o usuário escolhe a hora que quer ouvir a música, clicando no play (mesmo que delegados via eventos) nos elementos gerados pelas tags <audio>
ou <video>
Porém é possível fazer o player tocar a musica no momento que usuário navega. Como você está usando jQuery então irei fornecer um exemplo com tal. No momento que você clicar ou fazer uma ação você pode disparar o play da musica, por exemplo:
document.addEventListener("touchstart", function() {
[].forEach.call(document.querySelectorall("#botao audio"), function (audio) {
audio.play();
});
});
Com jQuery seria:
$(document).bind("touchstart", function() {
$("#botao audio").each(function() {
this.play();
});
});
Este exemplo irá procurar se tem um player adicionado, se tiver ele inicia a musica quando o usuário tocar na tela (ação ontouchstart
).
Eventos da tag Audio para o javascript:
abort
- Dispara quando the loading of an audio/video is aborted
canplay
- Dispara quando o navegador can start playing o audio/video
canplaythrough
- Dispara quando o navegador pode tocar sem parar por causa de buffers
durationchange
- Dispara quando a duração do o audio/video é alterada
emptied
- Dispara quando a playlist é vazia
ended
- Dispara quando a playlist terminar
error
- Dispara quando ocorrer um erro durante o load
loadeddata
- Dispara quando o navegador carregou os dados do frame atual
loadedmetadata
- Dispara quando o navegador carregar os dados meta de um audio/video
loadstart
- Dispara quando o navegador inicia o carregamento de um audio/video
pause
- Dispara quando o audio/video está pausado
play
- Dispara quando o audio/video está reproduzindo
playing
- Dispara quando o audio/video quando roda após a espera de um buffer
progress
- Dispara quando o navegador está baixando o audio/video
ratechange
- Dispara quando the playing speed of o audio/video is changed
seeked
- Dispara quando o usuário termina de mover o seek para uma nova posição
seeking
- Dispara quando o usuário começa de mover o seek para uma nova posição
stalled
- Dispara quando o navegador está tentando pegar dados meta, mas estes dados não estão disponeis
suspend
- Dispara quando o browser não consegue pegar dados da midia
timeupdate
- Dispara quando quando a posição do playback é modificada
volumechange
- Dispara quando o volume é mudado
waiting
- Dispara quando a midia para pois está esperado o buffer carregar