Home » Javascript » custom audio player with jquery not working in android mobile browser

custom audio player with jquery not working in android mobile browser

Posted by: admin August 19, 2018 Leave a comment

Questions:

I have faced a problem. I customized audio player with js. All working fine in desktop and MAC. But when I want to play the audio in android mobile browser chrome it returns an error. I cannot find out why the error occured. I googled and it say that autoplay is not supported in mobile browser. But my audio file is not autoplay. I played the audio after click. Please help me solve this.

Here is my code

<div class="playe_block">
    <div class="player-content">
        <audio controls class="controlPlayer">
            <source src="{{ asset(Helper::storagePath(Config::get('constants.NEWS_UPLOAD'). '/'. $news->audio)) }}" type="audio/mpeg" />
        </audio>
    </div>
</div><!-- end playe_block -->

and my js is

(function ($) {
document.addEventListener('play', function(e){
var audios = document.getElementsByTagName('audio');
for(var i = 0, len = audios.length; i < len;i++){
if(audios[i] != e.target){
audios[i].pause();
}
}
}, true);
'use strict';
$('audio[controls][class=controlPlayer]').before(function (e) {
var song = this;
song.controls = false;
var player_box = document.createElement('div');
$(player_box).addClass($(song).attr('class') + ' well container-fluid playa');
var data_sec = document.createElement('section');
$(data_sec).addClass('collapsing center-block row col-sm-12');
var toggle_holder = document.createElement('div');
$(toggle_holder).addClass('btn-group center-block row col-sm-12');
var data_table = document.createElement('table');
$(data_table).addClass('table table-condensed');
var player = document.createElement('section');
$(player).addClass('btn-group  center-block row  col-sm-12');
var load_error = function () {
// console.log('error');
$(player_box).find('.btn').addClass('disabled');
$(player_box).find('input[type="range"]').hide();
$(player_box).find('.glyphicon-refresh').text('Error');
$(player_box).find('.glyphicon-refresh').parent().attr('title', 'There was an error loading the audio.');
$(player_box).find('.glyphicon-refresh').parent().tooltip('fixTitle');
$(player_box).find('.glyphicon-refresh').removeClass('glyphicon glyphicon-refresh spin');
}; // load_error
var addPlay = function () {
var play = document.createElement('button');
$(play).attr('type', 'button');
$(play).addClass('btn  btn-default disabled col-sm-1');
play.setPlayState = function (toggle) {
$(play).removeClass('disabled');
if (toggle === 'play') {
$(play).html('<i class="glyphicon glyphicon-play" style="color: #df4d36"></i>');
$(play).click(function () {
song.play();
});
}
if (!song.paused || toggle === 'pause') {
$(play).html('<i class="glyphicon glyphicon-pause" style="color: #df4d36"></i>');
$(play).click(function () {
song.pause();
});
}
}; // setPlayState
// media events from the audio element will trigger rebuilding the play button
$(song).on('play', function () {
play.setPlayState('pause');
});
$(song).on('canplay', function () {
play.setPlayState('play');
});
$(song).on('pause', function () {
play.setPlayState('play');
});
var timeout = 0;
var loadCheck = setInterval(function () {
if (!song.paused) {
play.setPlayState('pause');
clearInterval(loadCheck);
return true;
}
if (isNaN(song.duration) === false) {
play.setPlayState('play');
clearInterval(loadCheck);
return true;
}
if (song.networkState === 3 || timeout === 100) {
// 3 = NETWORK_NO_SOURCE - no audio/video source found
console.log('No audio source was found or a timeout occurred');
load_error();
clearInterval(loadCheck);
return false;
}
timeout++;
}, 100); // x milliseconds per attempt
$(player).append(play);
}; // addPlay
var addTime = function () {
var time = document.createElement('button');
$(time).attr('type', 'button');
$(time).addClass('btn btn-default time col-sm-3');
$(time).tooltip({'container': 'body', 'placement': 'right', 'html': true});
time.twodigit = function (myNum) {
return ('0' + myNum).slice(-2);
}; // time.twodigit
time.timesplit = function (a) {
var hours = Math.floor(a / 3600);
var minutes = Math.floor(a / 60) - (hours * 60);
var seconds = Math.floor(a) - (hours * 3600) - (minutes * 60);
var timeStr = time.twodigit(minutes) + ':' + time.twodigit(seconds);
if (hours > 0) {
timeStr = hours + ':' + timeStr;
}
return timeStr;
}; // time.timesplit
time.showtime = function () {
$(time).html(time.timesplit(song.currentTime));
$(time).tooltip('fixTitle');
}; // time.showtime
$(time).tooltip('show');
$(song).on('loadedmetadata', time.showtime);
$(song).on('loadeddata', time.showtime);
$(song).on('progress', time.showtime);
$(song).on('canplay', time.showtime);
$(song).on('canplaythrough', time.showtime);
$(song).on('timeupdate', time.showtime);
if (song.readyState > 0) {
time.showtime();
} else {
$(time).html('<i class="glyphicon glyphicon-refresh spin"></i>');
}
$(player).append(time);
}; // addTime
var addMute = function () {
var mute = document.createElement('button');
$(mute).attr('type', 'button');
$(mute).addClass('btn btn-default mute col-sm-1');
mute.checkVolume = function () {
if (song.volume > 0.5 && !song.muted) {
$(mute).html('<i class="glyphicon glyphicon-volume-up" style="color: #ff5d50"></i>');
} else if (song.volume < 0.5 && song.volume > 0 && !song.muted) {
$(mute).html('<i class="glyphicon glyphicon-volume-down" style="color: #ff5d50"></i>');
} else {
$(mute).html('<i class="glyphicon glyphicon-volume-off" style="color: #ff5d50"></i>');
}
}; // mute.checkVolume
$(mute).click(function () {
if (song.muted) {
song.muted = false;
song.volume = song.oldvolume;
} else {
song.muted = true;
song.oldvolume = song.volume;
song.volume = 0;
}
mute.checkVolume();
}); // mute.click(
mute.checkVolume();
$(song).on('volumechange', mute.checkVolume);
$(player).append(mute);
}; // addMute
var addVolume = function () {
var volume = document.createElement('input');
$(volume).attr({
'type': 'range',
'min': 0,
'max': 1,
'step': 1 / 100,
'value': 1
});
volume.slide = function () {
song.muted = false;
song.volume = $(volume).val();
}; // volume.slide
volume.set = function () {
$(volume).val(song.volume);
};
var vol_wrapper = document.createElement('div');
$(vol_wrapper).addClass('btn volume  btn-default  row col-sm-3  hidden-xs');
$(vol_wrapper).append(volume);
$(volume).on('change', volume.slide);
$(song).on('volumechange', volume.set);
$(player).append(vol_wrapper);
}; // addVolume
var addProgress = function () {
var seek = document.createElement('input');
$(seek).attr({
'type': 'range',
'min': 0,
'value': 0,
'class': 'seek'
});
seek.progress = function () {
var i, bufferedstart, bufferedend;
var bg = 'rgba(255, 93, 80, 1) 0%';
bg += ', rgba(255, 93, 80, 1) ' + ((song.currentTime / song.duration) * 100) + '%';
bg += ', rgba(255, 93, 80, 0) ' + ((song.currentTime / song.duration) * 100) + '%';
for (i = 0; i < song.buffered.length; i++) {
if (song.buffered.end(i) > song.currentTime &&
isNaN(song.buffered.end(i)) === false &&
isNaN(song.buffered.start(i)) === false) {
if (song.buffered.end(i) < song.duration) {
bufferedend = ((song.buffered.end(i) / song.duration) * 100);
} else {
bufferedend = 100;
}
if (song.buffered.start(i) > song.currentTime) {
bufferedstart = ((song.buffered.start(i) / song.duration) * 100);
} else {
bufferedstart = ((song.currentTime / song.duration) * 100);
}
bg += ', rgba(217, 237, 247, 0) ' + bufferedstart + '%';
bg += ', rgba(217, 237, 247, 1) ' + bufferedstart + '%';
bg += ', rgba(217, 237, 247, 1) ' + bufferedend + '%';
bg += ', rgba(217, 237, 247, 0) ' + bufferedend + '%';
}
}
$(seek).css('background', '-webkit-linear-gradient(left, ' + bg + ')');
$(seek).css('background-color', '#ddd');
}; // seek.progress
seek.set = function () {
$(seek).val(song.currentTime);
seek.progress();
};
seek.slide = function () {
song.currentTime = $(seek).val();
seek.progress();
};
seek.init = function () {
$(seek).attr({
'max': song.duration,
'step': song.duration / 100
});
seek.set();
};
seek.reset = function () {
$(seek).val(0);
song.currentTime = $(seek).val();
if (!song.loop) {
song.pause();
} else {
song.play();
}
};
var seek_wrapper = document.createElement('div');
$(seek_wrapper).addClass('btn btn-default pr_bar progressBar progressBarRange');
$(seek_wrapper).append(seek);
// bind seek / position slider events
$(seek).on('change', seek.slide);
// bind audio element events to trigger seek slider updates
$(song).on('timeupdate', seek.init);
$(song).on('loadedmetadata', seek.init);
$(song).on('loadeddata', seek.init);
$(song).on('progress', seek.init);
$(song).on('canplay', seek.init);
$(song).on('canplaythrough', seek.init);
$(song).on('ended', seek.reset);
if (song.readyState > 0) {
seek.init();
}
$(player).append(seek_wrapper);
}; // addProgress
var addPlayer = function () {
if ($(song).data('play') !== 'off') {
addPlay();
}
if ($(song).data('play') !== 'off') {
addProgress();
}
if ($(song).data('time') !== 'off') {
addTime();
}
if ($(song).data('mute') !== 'off') {
addMute();
}
if ($(song).data('volume') !== 'off') {
addVolume();
}
$(player_box).append(player);
}; // addPlayer
var addAttribution = function () {
var attribution = document.createElement('div');
$(attribution).addClass('row col-sm-10 col-sm-offset-1');
if (typeof ($(song).data('infoAttLink')) !== 'undefined') {
var attribution_link = document.createElement('a');
$(attribution_link).addClass('text-muted btn btn-link btn-sm');
$(attribution_link).attr('href', $(song).data('infoAttLink'));
$(attribution_link).html($(song).data('infoAtt'));
$(attribution).append(attribution_link);
} else {
$(attribution).html($(song).data('infoAtt'));
}
$(player_box).append(attribution);
}; // addAttribution
var fillPlayerBox = function () {
addPlayer();
if (typeof ($(song).data('infoAtt')) !== 'undefined') {
addAttribution();
}
}; // fillPlayerBox
fillPlayerBox();
$(song).on('error', function () {
console.log("Error encountered after fillPlayerBox");
load_error();
});
return player_box;
});
})(jQuery);
Answers: