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應用程序和應用程序，似乎沒有功能添加或運行片段.. –