I'm having an issue playing audio on some mobile and ipad devices.
HTML:
<audio id="audio"></audio>
<button id="play-audio">Play Audio</button>
<button id="retry" style="display:none">Retry To Play Audio</button>
JS:
$('#play-audio').click(function(){
$.ajax({
url: "../audio/audio.json",
type: 'GET',
dataType: "json",
success: function(response) {
var audio = document.getElementById('audio'),
retry = document.getElementById('retry');
audio.src = response.sound;
audio.play();
audio.onplaying = function(e){
console.log('audio is playing');
};
audio.onerror = function(e){
console.log('error');
retry.style.display = "block";
retry.onclick = function(){
audio.play();
}
};
}
});
});
When the user clicks "#play-audio" an Ajax call is made that fetches the audio file path, appends it to the audio tag src, and plays that audio. If an error occurs on playing that audio the #retry
button is shown to play the audio on clicking. The issue on some devices in the console is I get Uncaught (in promise) NotAllowedError
and the onerror
event is not fired.
I tried to add audio.load();
before audio.play();
didn't work. Also, I tried to check onabort
event:
audio.onabort = function(e){
console.log('audio aborted');
};
None of these events is fired I get nothing printed in the console but that error NotAllowedError
.