Safari - HTML5 audio not playing automatically next stream

Question

I have a little code with play/pause, next, prev buttons. I have multiple tracks (streams) to play and we can jump between them with next, prev buttons. This works beautifully in Firefox, Chrome, but not on Safari (desktop, mobile). In FF and Chrome when you jump to the next, prev stream, the stream auto starts to playing. But not on Safari, the stream stops when I hit the next or prev buttons. What's this behavior?

 function aud_play_pause() { var myAudio = document.getElementById("audio1"); if (myAudio.paused) { $('#stateicon').removeClass('fa fa-play'); $('#stateicon').addClass('fa fa-pause'); myAudio.play(); } else { $('#stateicon').removeClass('fa fa-pause'); $('#stateicon').addClass('fa fa-play'); myAudio.pause(); } } $(document).ready(function($) { jQuery(function($) { var supportsAudio = !!document.createElement('audio').canPlayType; if(supportsAudio) { var index = 0, playing = false; tracks = [ {"track":1,"name":"Music FM","file":"http://stream.musicfm.hu:8000/musicfm.mp3"}, {"track":2,"name":"Radio 1","file":"http://213.181.210.106:8000/high.mp3"}, {"track":3,"name":"Test FM","file":"http://213.181.210.106:8000/high.mp3"}, ], trackCount = tracks.length, npTitle = $('#npTitle'), audio = $('#audio1').bind('play', function() { $('#stateicon').removeClass('fa fa-play'); $('#stateicon').addClass('fa fa-pause'); playing = true; }).bind('pause', function() { $('#stateicon').removeClass('fa fa-pause'); $('#stateicon').addClass('fa fa-play'); playing = false; }).get(0), btnPrev = $('#btnPrev').click(function() { if((index - 1) > -1) { index--; loadTrack(index); if(playing) { audio.play(); } } else { index = 0 loadTrack(trackCount-1); if(playing) { audio.play(); } } }), btnNext = $('#btnNext').click(function() { if((index + 1) < trackCount) { index++; loadTrack(index); if(playing) { audio.play(); } } else { index = 0; loadTrack(index); if(playing) { audio.play(); } } }), loadTrack = function(id) { npTitle.text(tracks[id].name); index = id; audio.src = tracks[id].file; }; loadTrack(index); } }); }); 

 <script src="https://use.fontawesome.com/3e4e2f11a7.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content" role="main"> <div id="cwrap"> <div id="nowPlay" class="is-audio"> <div id="npTitle"></div> </div> <div id="audiowrap"> <div id="audio0"> <audio id="audio1" controls preload="none"></audio> </div> <div id="extraControls" class="is-audio"> <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause()"><i id="stateicon" class="fa fa-play"></i></a> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button> </div> </div> </div> </div> 

Answer 1

You can put autoplay or after new src implement play in onload event like this :

example :

audio.addEventListener('canplaythrough', function() { 

   audio.play();

}, false);

In code snippet i use autoplay atrr in audio tag !

 function aud_play_pause() { var myAudio = document.getElementById("audio1"); if (myAudio.paused) { $('#stateicon').removeClass('fa fa-play'); $('#stateicon').addClass('fa fa-pause'); myAudio.play(); } else { $('#stateicon').removeClass('fa fa-pause'); $('#stateicon').addClass('fa fa-play'); myAudio.pause(); } } $(document).ready(function($) { jQuery(function($) { var supportsAudio = !!document.createElement('audio').canPlayType; if(supportsAudio) { var index = 0, playing = false; tracks = [ {"track":1,"name":"Music FM","file":"http://stream.musicfm.hu:8000/musicfm.mp3"}, {"track":2,"name":"Radio 1","file":"http://213.181.210.106:8000/high.mp3"}, {"track":3,"name":"Test FM","file":"http://213.181.210.106:8000/high.mp3"}, ], trackCount = tracks.length, npTitle = $('#npTitle'), audio = $('#audio1').bind('play', function() { $('#stateicon').removeClass('fa fa-play'); $('#stateicon').addClass('fa fa-pause'); playing = true; }).bind('pause', function() { $('#stateicon').removeClass('fa fa-pause'); $('#stateicon').addClass('fa fa-play'); playing = false; }).get(0), btnPrev = $('#btnPrev').click(function() { if((index - 1) > -1) { index--; loadTrack(index); if(playing) { audio.play(); } } else { index = 0 loadTrack(trackCount-1); if(playing) { audio.play(); } } }), btnNext = $('#btnNext').click(function() { if((index + 1) < trackCount) { index++; loadTrack(index); if(playing) { audio.play(); } } else { index = 0; loadTrack(index); if(playing) { audio.play(); } } }), loadTrack = function(id) { npTitle.text(tracks[id].name); index = id; audio.src = tracks[id].file; /* JS method audio.addEventListener('canplaythrough', function() { audio.play(); }, false);*/ }; loadTrack(index); } }); }); 

 <script src="https://use.fontawesome.com/3e4e2f11a7.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="content" role="main"> <div id="cwrap"> <div id="nowPlay" class="is-audio"> <div id="npTitle"></div> </div> <div id="audiowrap"> <div id="audio0"> <audio id="audio1" autoplay controls preload="none"></audio> </div> <div id="extraControls" class="is-audio"> <button id="btnPrev" class="ctrlbtn">|&lt;&lt; Prev Track</button> <a href="javascript:void(0)" class="btn btn-default" data-toggle="tooltip" title="Preview" onclick="aud_play_pause()"><i id="stateicon" class="fa fa-play"></i></a> <button id="btnNext" class="ctrlbtn">Next Track &gt;&gt;|</button> </div> </div> </div> </div>