【发布时间】：2017-06-30 15:51:03
【问题描述】：
我有一些带有播放/暂停、下一个、上一个按钮的代码。我有多个曲目（流）要播放，我们可以使用下一个、上一个按钮在它们之间跳转。这在 Firefox、Chrome 中运行良好，但在 Safari（桌面、移动）上却不行。在 FF 和 Chrome 中，当您跳转到下一个上一个流时，流会自动开始播放。但不是在 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">|<< 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>【问题讨论】：
-
为您的代码添加一个小提琴或将您的代码放入一个 sn-p。它使复制您正在谈论的行为变得更加容易。还可以考虑参考 caniuse.com 以检查 html5 音频是否存在任何可能的已知问题。
-
我在这里添加了我的代码作为代码 sn-p，我什至可以运行它。我检查了 caniuse.com，Safari 的一切都是绿色的，没有已知问题。
-
好吧，那我道歉。我在 android 应用上查看，在应用上似乎没有添加或运行 sn-ps 的功能..
-
没问题，我在这里仔细检查了sn-p，它就像我在问题中所问的那样工作：Safari：不工作； FF，铬：工作。
-
@Adrian 请问我的回答有什么问题？
标签： javascript jquery html safari