HTML 网页音频播放器怎么自动播放列表中的音频文件

html-css0395

HTML 网页音频播放器怎么自动播放列表中的音频文件,第1张

首先对于:HTML 网页音频播放器,要知道这个是有2种模式的播放的;

<1>使用HTML5的autio标签;

<2>使用一般的embed标签。

列表中的音频文件;

这个问题,可以采用ul+li标签解决问题,例如如下:

<ul id="ul">

 <li><audio src="abc.mp3">abc.mp3</audio></li>

 <li><audio src="cde.mp3">cde.mp3</audio></li>

</ul>

此时,为了得到这个ul列表对象,从而获取旗下的所有的li对象里面的mp3文件,来得到我们播放的目的;

自动播放

在这个问题上,只要在页面载入时,就好了;

onload = function () {

  var audios = ul.getElementsByTagName("audio")

 audios[0].play()

}

需要用js去控制

先把列表用html生成出来,再用脚本去控制点击列表的时候播放

可以参考

http://www.feelcss.com/html5-music-player-playlist-and-playback.html

new个video,指定播放列表的第一个视频路径为src。监听end事件,回调里面把video的src改成列表的下一个,再play

代码示例:

var vList = ['视频地址url1', 'url2', '...'] // 初始化播放列表

var vLen = vList.length // 播放列表的长度

var curr = 0 // 当前播放的视频

var video = new Video()

video.addEventListener('end', play)

play()

function play(e) {

   video.src = vList[curr]

   video.load() // 如果短的话,可以加载完成之后再播放,监听 canplaythrough 事件即可

   video.play()

   curr++

   if (curr >= vLen) curr = 0 // 播放完了,重新播放

   }

可以实现html5 播放多个视频。一个接一个的播放