Safari - 下一个流不会自动播放HTML5音频

Question

我有一些播放/暂停的代码，下一个，上一个按钮。 我有多个曲目（流）可以播放，我们可以使用next，prev按钮在它们之间跳转。 这适用于Firefox，Chrome，但不适用于Safari（桌面，移动）。 在FF和Chrome中跳转到下一个prev流时，流自动开始播放。 但不是在Safari上，当我按下下一个或上一个按钮时，流停止。 这是什么行为？

 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

您可以将自动播放或新的src实现播放在onload事件中，如下所示：

例如：

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

   audio.play();

}, false);

在代码片段中，我在音频标签中使用自动播放atrr！

 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>