最近在研究js，导致博客已经好久没更新文章了，这不这几天到网上到处翻箱倒柜的去学习，终于折腾了一个功能不全，bug蛮多的音乐播放器，对于这几天的学习，觉得自己要学习的还蛮多，看到那一个个函数的使用，一条条的代码，内心是崩溃的，哎。。。不说了，上图
这里只展示部分代码
<!DOCTYPE html><html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8"><title></title><meta name="keywords" content=""><meta name="description" content=""><link href="css/style.css" type="text/css" rel="stylesheet"></head><style type="text/css"></style><body><div class="zmusic"> <div class="mbar"><div class="pre"><a href="javascript:;" title="上一首" class="bg z_pre">上一首</a></div><div class="start"><a href="javascript:;" title="暂停/播放" class="bg paused ">暂停/播放</a></div><div class="next"><a href="javascript:;" title="下一首" class="bg z_next">下一首</a></div><div class="head"> <!-- <img src=""> --></div><div class="player"> <div class="title" title="音乐标题"><a href="" id="music_name"></a> <a href="" id="music_auth"></a></div> <div class="playbar" title="播放条" > <div class="bar progress" ></div> <span class="btn cur"><i></i></span> </div> <div class="time" title="播放时间"><span id="t1">00:00</span> / <span id="t2">00:00</span></div></div><div class="playbutton"> <div class="voice" title="声音"><a href="javascript:;" class="voice_btn">声音</a></div> <div class="order"><a href="javascript:;" title="顺序播放" class="btn">播放排序</a></div> <div class="list"><a href="javascript:;" title="列表" id="music_num">0</a></div></div><div class="voice_barbg"> <div class="currj_h"></div> <div class="bar currj"></div> <span class="btn btnj"></span></div><div class="playlist_Lyrics" title="列表"><ul id="ul_list"></ul><div class="lrc"></div></div></div></div><div id="d"></div><script type="text/javascript" src="js/jquery-3.2.1.min.js"></script><script type="text/javascript" src="js/playlist.js"></script><script type="text/javascript" src="js/lrc.js"></script><script type="text/javascript" src="js/script.js"></script><script type="text/javascript" src="js/music.js"></script></body></html>
常用功能的js代码
$('audio').remove(); //移除各种点击带来的重复加载播放器 var newaudio = $('<audio><source src="'+playlist[zPlay.currentIndex].src+'"></audio>').appendTo('body'); zbp.audio = newaudio[0]; // 应用初始音量 var volume_bar; zbp.audio.volume = zPlay.volume; // 绑定歌曲进度变化事件 zbp.audio.addEventListener('timeupdate', updateProgress); zbp.audio.addEventListener('play', musicPlay); // 开始播放 zbp.audio.addEventListener('pause', musicPause); // 暂停 zbp.audio.addEventListener('ended', next); // 播放结束 zbp.audio.addEventListener('error', audioErr); // 播放器错误处理 zbp.audio.addEventListener("loadstart",function(){ $('#music_name').text(playlist[zPlay.currentIndex].name); $('#music_auth').text(playlist[zPlay.currentIndex].singer); if(playlist[zPlay.currentIndex].img==undefined){ $('.head').html('<img src="images/playzm.png"/>'); }else{ $('.head').html('<img src='+playlist[zPlay.currentIndex].img+'>'); } }); }// 播放function musicPlay() { zbp.audio.paused = false; // 更新状态（未暂停） $(".paused").addClass("z_pause"); music_bar.lock(false);}// 暂停function musicPause() { zbp.audio.paused = true; // 更新状态（已暂停） $(".paused").removeClass("z_pause"); // 移除其它的正在播放}//上一曲function pre(){ if (zPlay.currentIndex == -1) { zPlay.currentIndex = 0; } else if (zPlay.currentIndex == 0) { zPlay.currentIndex = (playlist.length - 1); } else { zPlay.currentIndex--; } zbp.audio = zPlay.currentIndex; play(zPlay.currentIndex); zbp.audio.play(); }//下一曲function next(){ if (zPlay.currentIndex == -1) { zPlay.currentIndex = 0; } else if (zPlay.currentIndex == (playlist.length - 1)) { zPlay.currentIndex = 0; } else { zPlay.currentIndex++; } console.log("zPlay.currentIndex : " + zPlay.currentIndex); zbp.audio= zPlay.currentIndex; play(zPlay.currentIndex); zbp.audio.play(); }//获取当前播放时间function updateProgress(){ var time,s; time=zbp.audio.currentTime; s=parseInt(time); document.title="仿网易"; if(s==parseInt(zbp.audio.duration)){ //歌曲时间播放完移除播放状态按钮 $('.paused').removeClass('z_pause'); } if(zbp.paused !== false) return true; // 同步进度条 music_bar.valgoto(time / zbp.audio.duration);}以上就是这几天的成果，心有点累，话说余生还长，请多指教！！！code
点击查看demo
评论列表 :共有1人吐槽, 3987人围观