·您当前的位置:首页 > 技术教程 > Html5技术 >

[html5]实现js控制HTML5音乐播放器的暂停与播放(2)

时间:2017-03-03 15:23酷播
应大伙的要求,改进了下,让网页背景音乐支持多首歌曲,播放完在随机播放下一首并且不会和上一首重复,并提供播放暂停按钮,本来这篇文章只是提供最简单的功能让大家自行扩展的,既然大家都提到了这个,我在评论里面

应大伙的要求,改进了下,让网页背景音乐支持多首歌曲,播放完在随机播放下一首并且不会和上一首重复,并提供播放暂停按钮,本来这篇文章只是提供最简单的功能让大家自行扩展的,既然大家都提到了这个,我在评论里面也回了,在把最终的版本写在这篇文章后续上,主要就是js换成以下的:

  1. $(function(){ 
  2. var music = document.getElementById("bgMusic"); 
  3. var musicArr=[//下面对应歌曲链接和歌名,自行添加用,隔开 
  4.    {url:'http://cctv3.qiniudn.com/tbhdqx.mp3',title:"唐伯虎点秋香"},                           
  5.    {url:'http://cctv3.qiniudn.com/abzxh.mp3',title:"敖包再相会"},                         
  6.    {url:'http://cctv3.qiniudn.com/lmzda.mp3',title:"辣妹子的爱"},                             
  7.    {url:'http://cctv3.qiniudn.com/32.mp3',title:"32号嫁给你"}, 
  8.    {url:'http://cctv3.qiniudn.com/tongxinjishou.mp3',title:"痛心疾首"}, 
  9.    {url:'http://cctv3.qiniudn.com/rgangdst.mp3',title:"如果爱能感动上天"}, 
  10.    {url:'http://cctv3.qiniudn.com/cz.mp3',title:"车站"},                           
  11.    {url:'http://cctv3.qiniudn.com/hn.ogg',title:"很难"},                       
  12.    {url:'http://cctv3.qiniudn.com/aqlmysdsc.mp3',title:"爱情里没有谁对谁错"}, 
  13.    {url:'http://cctv3.qiniudn.com/dlaqdln.mp3',title:"丢了爱情丢了你"},                             
  14.    {url:'http://cctv3.qiniudn.com/cty.mp3',title:"闯天涯"} 
  15. ]; 
  16. $("#audioBtn").click(function(){ 
  17.     if(music.paused){music.play(); 
  18.     $("#audioBtn").removeClass("pause").addClass("play"); 
  19.     }else{music.pause(); 
  20.     $("#audioBtn").removeClass("play").addClass("pause");} 
  21. }); 
  22. function randomMusic(){ 
  23.    var isone=$("#bgMusic").attr('src'); 
  24.    var noone=musicArr[parseInt(Math.random()*musicArr.length)]; 
  25.    if (noone.url==isone){var noone=musicArr[parseInt(Math.random()*musicArr.length)];} 
  26.    $("#bgMusic").attr('src',noone.url); 
  27.    $("#audioBtn").attr('title',noone.title); 
  28. randomMusic(); 
  29. $("#bgMusic").on('ended',function(){ 
  30.    randomMusic();    
  31. }); 
  32. }); 

 

热门文章推荐

请稍候...

保利威视云平台-轻松实现点播直播视频应用

酷播云数据统计分析跨平台播放器