1

Tenho um site onde toco músicas MP3 ao clicar no PLAY. No PC funciona perfeitamente, porém no iPhone não toca.

BOTÃO PLAY

echo "<a href='#' id='tocar-musica'>
    <input type='hidden' class='nm-musica' value='$consulta[nm_musica]' name='dados'>
    <input type='hidden' class='id-musica' value='$consulta[id_musica]' name='dados'>
    <img src='http://www.meusite.net/images/btn-play-enable.png' id='botao' title='Ouvir música' alt='Play'></a>";

AJAX

    $(document).on('click', '#tocar-musica', function () {

    id_musica = $(this).find('.id-musica').val();
    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(msg);
        $('#play').html("<img src='http://www.meusite.net/images/equalizador.gif'><br>"+nm_musica);
    });     
});

PLAY_MUSICA.PHP

<?php
$musica = $_GET['musica'];
?>

<audio autoplay preload="none" controls="controls">
   <source src="http://www.meusite.net/audio/<?php echo $musica?>.mp3" type="audio/mp3">
   O seu navegador não suporta áudio em HTML5.
</audio>
7
  • Mas aparece o player? Você quer que ele reproduza automatica a musica ou você quer clicar no play?
    – Syzoth
    Commented 25/05/2015 às 17:36
  • @GuilhermeNascimento, gostaria que fosse automaticamente, mas pelo que andei lendo o AUTOPLAY não funciona no iOS
    – Ricardo
    Commented 25/05/2015 às 17:52
  • Era isto mesmo que eu estava a dizer, mas tem solução, só preciso saber se o player aparece na tela e se clicando nele a musica toca. Outra coisa que notei é que , por que um ajax apenas para gerar o player?
    – Syzoth
    Commented 25/05/2015 às 18:00
  • @GuilhermeNascimento, usei o Ajax para não mostrar o caminho do arquivo ao passar o mouse sobre ele e porque pretendo inserir um contador de cliques. Na verdade o player não aparece na tela, pois como se trata de uma lista com várias músicas, só mostro um gif de equalizador e o nome da música que está tocando.
    – Ricardo
    Commented 25/05/2015 às 18:09
  • Mas não precisa gerar o player no back-end outra coisa, ao retornar o mp3 o usuário com certeza vai ver o caminho da musica, mas isto é outra historia. Só um min, vou tentar formular algo.
    – Syzoth
    Commented 25/05/2015 às 18:11

1 Resposta 1

2

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
11
  • Valeu Guilherme, vou testar e te falo! Abs
    – Ricardo
    Commented 26/05/2015 às 16:08
  • Tem um erro, nessa linha ao inves de (msg) vc colocou (music)... $('#botao').html(gerarPlayer(music)); Corrige caso alguém queira usar =)
    – Ricardo
    Commented 26/05/2015 às 16:36
  • Nessa linha $("#botoo audio").each(function() {, seria "(#botao audio")?
    – Ricardo
    Commented 26/05/2015 às 16:52
  • Funcionou! Valeu... Abs
    – Ricardo
    Commented 26/05/2015 às 17:24
  • A única coisa é que com o iPhone bloqueado ele fica mostrando o caminho do arquivo na tela, tem como não mostrar isso?
    – Ricardo
    Commented 26/05/2015 às 17:26

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .