First tip, always use var
when declaring 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 do not see need for Ajax (it will not help much to hide), but this is not the case now. It is not necessary to "rewrite / generate" the player in play_musica.php
, only generate the path:
<?php
$musica = $_GET['musica'];
echo 'http://www.meusite.net/audio/' . $musica . '.mp3';
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, ie saving the battery while browsing the internet for example, so the user chooses the time they want to listen to the song by clicking on the play (even though delegates via events) in the elements generated by the tags <audio>
or <video>
However, it is possible to make the player play the song the moment the user browses. As you are using jQuery then I will provide an example with such. The moment you click or do an action you can trigger the play of the song, 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 it has it, it starts the music when the user touches the screen (action ontouchstart
).
Audio tag events for the javascript:
-
abort
- Shoot when loading of an audio / video is aborted
-
canplay
- Fires when the browser can start playing audio / video
-
canplaythrough
- Shoot when browser can play nonstop because of buffers
-
durationchange
- Shoots when the duration of the audio / video is changed
-
emptied
- Fires when playlist is empty
-
ended
- Fire when the playlist finishes
-
error
- Fires when an error occurs during load
-
loadeddata
- Fires when the browser has loaded the current frame data
-
loadedmetadata
- Fire when the browser loads the meta data of an audio / video
-
loadstart
- Fire when the browser starts loading an audio / video
-
pause
- Fire when audio / video is paused
-
play
- Shoot when audio / video is playing
-
playing
- Fires when audio / video when running after waiting for a buffer
-
progress
- Fire when the browser is downloading audio / video
-
ratechange
- Shoot when playing speed of audio / video is changed
-
seeked
- Fires when the user finishes moving seek to a new position
-
seeking
- Triggers when the user starts moving seek to a new position
-
stalled
- Triggers when the browser is trying to get meta data, but this data is not available
-
suspend
- Fires when the browser can not take data from the media
-
timeupdate
- Shoots when the playback position is modified
-
volumechange
- Shoots when the volume is changed
-
waiting
- Fires when the media is pressed so the buffer is expected to load