我已经创建了一个非常简单的播放列表来播放一些mp3音频,并且我使用<audio>
来包含文件,但是尽管Android上的Chrome,Opera和Firefox尊重preload="none"
,但我无法本机Android浏览器(默认提供的浏览器),请注意并且不会自动播放列表中的第一个文件,这是不正确的,对我来说,这是一个很大的问题此浏览器。
我在做什么错?如何停止本机Android浏览器中的自动播放?
预先感谢
HTML:
<audio id="audio" preload="none" tabindex="0" controls="" type="audio/mpeg">
<source src="https://myselfsite.com/audios/Audio-1.mp3">
</audio>
<ul id="playlist">
<li class="active">
<a href="https://myselfsite.com/audios/Audio-1.mp3">
Details of 1
</a>
</li>
<li>
<a href="https://myselfsite.com/audios/Audio-2.mp3">
Details of 2
</a>
</li>
<li>
<a href="https://myselfsite.com/audios/Audio-3.mp3">
Details of 3
</a>
</li>
</ul>
脚本:
init();
function init(){
var audio = document.getElementById('audio');
var playlist = document.getElementById('playlist');
var tracks = playlist.getElementsByTagName('a');
audio.volume = 1;
audio.play();
for(var track in tracks) {
var link = tracks[track];
if(typeof link === "function" || typeof link === "number") continue;
link.addEventListener('click', function(e) {
e.preventDefault();
var song = this.getAttribute('href');
run(song, audio, this);
});
}
audio.addEventListener('ended',function(e) {
for(var track in tracks) {
var link = tracks[track];
var nextTrack = parseInt(track) + 1;
if(typeof link === "function" || typeof link === "number") continue;
if(!this.src) this.src = tracks[0];
if(track == (tracks.length - 1)) nextTrack = 0;
console.log(nextTrack);
if(link.getAttribute('href') === this.src) {
var nextLink = tracks[nextTrack];
run(nextLink.getAttribute('href'), audio, nextLink);
break;
}
}
});
}
function run(song, audio, link){
var parent = link.parentElement;
var items = parent.parentElement.getElementsByTagName('li');
for(var item in items) {
if(items[item].classList)
items[item].classList.remove("active");
}
parent.classList.add("active");
audio.src = song;
audio.load();
audio.play();
}