1
我有一点播放/暂停代码，接下来，prev按钮。我有多个曲目（流）可以播放，我们可以使用next，prev按钮在它们之间跳转。这在Firefox，Chrome中运行良好，但在Safari（桌面，移动设备）上运行得不错。在FF和Chrome中，当您跳到下一个prev流时，流自动开始播放。但不是在Safari上，当我点击下一个或上一个按钮时，流停止。这是什么行为？Safari - HTML5音频不会自动播放下一个流
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">|<< 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 >>|</button>
</div>
</div>
</div>
</div>
添加小提琴您的代码或把你的代码片段。它使复制你正在谈论的行为变得更容易。另外考虑参考caniuse.com检查任何可能的已知问题与html5音频。 –
我在代码片段中添加了我的代码，我甚至可以运行它。我检查了caniuse.com，一切都是绿色的Safari和没有已知的问题。 – Adrian
那么，我很抱歉。我正在查看Android应用程序和应用程序，似乎没有功能添加或运行片段.. –