Website with audio MP3 does not touch iPhone

Question

I have a website where I play MP3 songs when I click on PLAY. On PC it works perfectly, but on iPhone it doesn’t play.

PLAY BUTTON

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>

Answer 1

First tip, always use var when declaring the variables, ex: var variavel = ...;, should look something like:

$(document).on('click', '#tocar-musica', function () {
    var id_musica = $(this).find('.id-musica').val();
    var nm_musica = $(this).find('.nm-musica').val();

I don’t see the need for Ajax (it won’t help much to hide), but that’s not the case now. It’s not necessary to "render/generate" the player on play_musica.php, manages only the path:

<?php
$musica = $_GET['musica'];
echo 'http://www.meusite.net/audio/' . $musica . '.mp3';

The ajax should look like this:

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 on iOS

Autoplay is blocked on iOS (and other mobile systems) for convenience, that is to save the battery while browsing the internet for example, so the user chooses the time he wants to listen to the music by clicking on the play (even if delegates via events) in the elements generated by the tags <audio> or <video>

However, it is possible to make the player play the music as soon as the user navigates. Since you are using jQuery then I will provide an example with such. At the moment you click or do an action you can fire the play of the music, for example:

document.addEventListener("touchstart", function() {
    [].forEach.call(document.querySelectorall("#botao audio"), function (audio) {
        audio.play();
    });
});

With jQuery it would be:

$(document).bind("touchstart", function() {
    $("#botao audio").each(function() {
        this.play();
    });
});

This example will look for if you have an added player, if you have it start the music when the user touches the screen (action ontouchstart).

Audio tag events for javascript:

• abort - Fires when the loading of an audio/video is aborted
• canplay - Fires when browser can start playing audio/video
• canplaythrough - Shoots when the browser can tap non-stop because of buffers
• durationchange - Fires when the audio/video duration is changed
• emptied - Fires when playlist is empty
• ended - Fire when playlist is finished
• error - Fires when an error occurs during load
• loadeddata - Fires when browser loaded data from current frame
• loadedmetadata - Fires when the browser loads the meta data from an audio/video
• loadstart - Fires when the browser starts loading an audio/video
• pause - Fires when audio/video is paused
• play - Fires when audio/video is playing
• playing - Fires when the audio/video when it rotates after waiting for a buffer
• progress - Fires when the browser is downloading the audio/video
• ratechange - Fires when the playing speed of the audio/video is changed
• seeked - Fires when user finishes moving Seek to a new position
• seeking - Fires when user starts moving Seek to a new position
• stalled - Fires when the browser is trying to retrieve meta data, but this data is not available
• suspend - Fires when the browser can’t get any data from the media
• timeupdate - Fires when playback position is modified
• volumechange - Fires when volume is changed
• waiting - Fires when the media stops because the buffer is expected to load