<audio>标签-Preload =“ none”在Android浏览器中不起作用?

时间:2019-10-28 18:39:12

标签: javascript html audio

我已经创建了一个非常简单的播放列表来播放一些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();

}

0 个答案:

没有答案