1
再生/一時停止、次に、前のボタンのコードが少しあります。私は再生する複数のトラック（ストリーム）を持っており、次の前のボタンでそれらの間をジャンプすることができます。 Firefox、Chromeではうまく動作しますが、Safari（デスクトップ、モバイル）では動作しません。 FFやChromeでは、前のストリームにジャンプすると、ストリームの自動再生が開始されます。しかし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
さて、私は謝ります。私はアンドロイドアプリを見ていて、アプリケーションにはスニペットを追加したり実行したりする機能がないようです。 –