实现html5音乐的自动播放,html5中audio实现播放列表和自动播放

var count = 43; //一共多少MP3文件

var index = '18.mp3'; // 初始化播放那个文件

window.onload = function(){

var audio = new Audio();

audio.preload = true;

audio.controls = true;

audio.loop = false;

audio.src = index;

document.body.appendChild(audio);

audio.play();

audio.addEventListener('ended', playEndedHandler, false);

function playEndedHandler(){

var name = parseInt(index);

name = name+1 < 10 ? '0'+(name+1)+'.mp3' : (name+1)+'.mp3';

console.log(name)

name>count && audio.removeEventListener('ended',playEndedHandler,false);

audio.src = name;

audio.play();

}

var div = document.createElement('div');

var ul = document.createElement('ul');

for (var i = 1; i <=count; i++) {

var name = i<10 ? '0'+i+'.mp3' : i+'.mp3'

var li = document.createElement('li');

var text = document.createTextNode(name);

li.appendChild(text);

ul.appendChild(li);

li.addEventListener('click',function(event){

audio.src=event.target.innerHTML;

audio.play();

},false)

}

div.appendChild(ul);

document.body.appendChild(div);

}

实现html5音乐的自动播放,html5中audio实现播放列表和自动播放相关推荐

html audio 列表,html5中audio实现播放列表和自动播放
var count = 43; //一共多少MP3文件 var index = '18.mp3'; // 初始化播放那个文件 window.onload = function(){ var audio ...
html 表格自动编号,Word中如何给表格设置自动编号
我们在使用Word中可能需要给表格设置自动编号,让工作效率变得更快捷一些,那么如何给表格设置自动编号呢,接下来由学习啦小编为大家推荐Word使用技巧,希望对你有所帮助! 关于Word: Word软件提 ...
html嵌入视频mp4视频无法播放,html中嵌入mp4格式视频无法播放
我们在制作网页的时候经常会在网页中添加mp4格式的视频,但是我们会发现html中嵌入mp4格式视频无法播放,那么要怎么办呢?下面我们就一起去看看解决方法吧. 下面的这段代码是在我的test.html中 ...
微信播放在服务器视频无法播放音乐,解决ios微信浏览器中audio和video音乐视频无法自动播放等问题...
产生问题的原因参考网址:点击对于自动播放的局限性,没有变通方案.正如前面所提及的,音频流只能从用户触摸事件加载.当针对移动版 Safari 进行开发时,重要的一点是要在必要时调整您的工作流,以适应 ...
html5音乐和歌词同步,HTML5实现歌词同步
开篇 HTML5的最强大之处莫过于对媒体文件的处理,如利用一个简单的vedio标签就可以实现视频播放.类似地,在HTML5中也有对应的处理音频文件的标签,那就是audio标签. audio标签实现一 ...
解决在IOS系统及微信中audio、video不能自动播放的问题
<video id="shakeVideo" src='video/shakingRedbagVideo.mp4' autoplay="autoplay" ...
HTML网页播放器带列表,带有播放列表的网页播放器
最近一个学弟又找我,问我带列表的播放器如何写.我大体告诉了一下他思路,用一个列表标签加embed标签,列表促发onclick事件传递其中的innerHTML值给函数,标签里写音乐的名称就行了.但是发现 ...
excel自动筛选_在Excel自动筛选器中隐藏箭头
excel自动筛选 When you turn on the filter in an Excel worksheet list, or if you create a named Excel tab ...
linux添加音乐的代码,C语言实现linux系统下的MP3播放器源代码
[实例简介] 能识别本地的MP3歌曲文件,能根据路径添加入播放器中. 能识别本地的播放列表信息. 具有播放列表功能,能根据用户的需求随意创建.删除播放列表. 用户能往指定的播放列表中添加.删除 ...

实现html5音乐的自动播放,html5中audio实现播放列表和自动播放

实现html5音乐的自动播放,html5中audio实现播放列表和自动播放相关推荐

最新文章

热门文章