[html5]实现js控制HTML5音乐播放器的暂停与播放(2)
应大伙的要求,改进了下,让网页背景音乐支持多首歌曲,播放完在随机播放下一首并且不会和上一首重复,并提供播放暂停按钮,本来这篇文章只是提供最简单的功能让大家自行扩展的,既然大家都提到了这个,我在评论里面
应大伙的要求,改进了下,让网页背景音乐支持多首歌曲,播放完在随机播放下一首并且不会和上一首重复,并提供播放暂停按钮,本来这篇文章只是提供最简单的功能让大家自行扩展的,既然大家都提到了这个,我在评论里面也回了,在把最终的版本写在这篇文章后续上,主要就是js换成以下的:
- $(function(){
- var music = document.getElementById("bgMusic");
- var musicArr=[//下面对应歌曲链接和歌名,自行添加用,隔开
- {url:'http://cctv3.qiniudn.com/tbhdqx.mp3',title:"唐伯虎点秋香"},
- {url:'http://cctv3.qiniudn.com/abzxh.mp3',title:"敖包再相会"},
- {url:'http://cctv3.qiniudn.com/lmzda.mp3',title:"辣妹子的爱"},
- {url:'http://cctv3.qiniudn.com/32.mp3',title:"32号嫁给你"},
- {url:'http://cctv3.qiniudn.com/tongxinjishou.mp3',title:"痛心疾首"},
- {url:'http://cctv3.qiniudn.com/rgangdst.mp3',title:"如果爱能感动上天"},
- {url:'http://cctv3.qiniudn.com/cz.mp3',title:"车站"},
- {url:'http://cctv3.qiniudn.com/hn.ogg',title:"很难"},
- {url:'http://cctv3.qiniudn.com/aqlmysdsc.mp3',title:"爱情里没有谁对谁错"},
- {url:'http://cctv3.qiniudn.com/dlaqdln.mp3',title:"丢了爱情丢了你"},
- {url:'http://cctv3.qiniudn.com/cty.mp3',title:"闯天涯"}
- ];
- $("#audioBtn").click(function(){
- if(music.paused){music.play();
- $("#audioBtn").removeClass("pause").addClass("play");
- }else{music.pause();
- $("#audioBtn").removeClass("play").addClass("pause");}
- });
- function randomMusic(){
- var isone=$("#bgMusic").attr('src');
- var noone=musicArr[parseInt(Math.random()*musicArr.length)];
- if (noone.url==isone){var noone=musicArr[parseInt(Math.random()*musicArr.length)];}
- $("#bgMusic").attr('src',noone.url);
- $("#audioBtn").attr('title',noone.title);
- }
- randomMusic();
- $("#bgMusic").on('ended',function(){
- randomMusic();
- });
- });
热门文章推荐
- 10款html5网页播放器推荐(总有一款适合你)
- [html5]html5+css3实现图片斜角切成直角梯形显示的源代码
- [HTML5]HTML5视频video时间事件代码
- [微信]iOS苹果和微信中音频和视频实现自动播放的方法
- [html5]html5视频全屏实现的源代码
- [Html5]mobile-agent移动Agent,就是具有移动性的智能Agent
- [html5]视频播放器js控制vedio视频和分段播放
- [html5]H5播放器:竖屏播放\横屏播放\跟随旋转例子
请稍候...