is my first time here. :)
I have a music player with a playlist in HTML5 e JS on my customer web site.
It works with a array, but only one music play and repeat on a loop. The others music doesn't play.
The Code:
JavaScript
unu_music = {
// music play
m_play: function () {
$('.btn-play').click(function () {
$('.btn-play').hide();
$('.btn-pause').show();
$("#music")[0].play();
});
},
// music pause
m_pause: function () {
$('.btn-pause').click(function () {
$('.btn-pause').hide();
$('.btn-play').show();
$("#music")[0].pause();
});
},
// music stop
m_stop: function () {
$('.btn-stop').click(function () {
// action stop
$("#music")[0].pause();
$("#music")[0].currentTime = 0;
// button play show
$('.btn-pause').hide();
$('.btn-play').show();
// button sound show
$('.btn-sound-mute').hide();
$('.btn-sound').show();
$("#music")[0].volume += 1;
});
},
// music sound
m_sound: function () {
$('.btn-sound-mute').click(function () {
$('.btn-sound-mute').hide();
$('.btn-sound').show();
$("#music")[0].volume += 1;
});
},
// music mute
m_mute: function () {
$('.btn-sound').click(function () {
$('.btn-sound').hide();
$('.btn-sound-mute').show();
$("#music")[0].volume -= 1;
});
},
// playlist
m_playlist: function () {
var arr, aux = 1, mls = [],
unuPlayList = [
{
mp3: '../music/music-01.mp3',
ogg: '../music/music-01.ogg',
duration: '2:52'
},
{
mp3: '../music/music-02.mp3',
ogg: '../music/music-02.ogg',
duration: '4:05'
},
{
mp3: '../music/music-03.mp3',
ogg: '../music/music-03.ogg',
duration: '4:58'
}
];
$('audio').html('<source src=' + unuPlayList[aux].ogg + ' type="audio/ogg">');
for (var i = 0; i < unuPlayList.length; i++) {
arr = unuPlayList[i].duration.split(':');
mls[i] = ((((arr[0] * 60) * 1000) + (arr[1] * 1000)) - 70000);
}
setInterval(function () {
if (aux != -1) {
$('audio').html('<source src=' + unuPlayList[aux].ogg + ' type="audio/ogg">');
aux++;
}
if (aux == unuPlayList.length)
aux = 0;
}, mls[aux]);
}
};
HTML
<audio id="music" autoplay loop>
</audio>
How Can I resolve this bug?
Thanks in advance.