HTML+CSS+JS做一个简易音乐播放器

先给大家看下效果：

实现功能：音乐播放，歌词跟随进度滚动，中间随着音乐播放图片360度旋转

文件目录：

做一个播放器，音乐和歌词事先要下载好，搜一些自己喜欢的封面，让图片360度旋转的样式，通过按钮增删样式达到跟音乐同步进行：

.img{animation: img 18s linear infinite;-moz-animation: img 18s linear infinite;-webkit-animation: img 18s linear infinite;-o-animation: img 18s linear infinite;animation-play-state:paused;}.running{animation-play-state:running;}.stop{animation-play-state:paused;}

// 播放play.onclick = function(){if(audio.paused){audio.play();document.getElementById("musicImg").classList.remove("stop");document.getElementById("musicImg").classList.add("running");}}// 暂停pause.onclick = function(){if(audio.played){audio.pause();document.getElementById("musicImg").classList.remove("running");document.getElementById("musicImg").classList.add("stop");}}

其中歌词匹配才是让我头疼的，所有JS代码部分：

<script type="text/javascript">var play = document.getElementById('play'),pause = document.getElementById('pause'),prev = document.getElementById('prev'),next = document.getElementById('next'),musicName = document.getElementById('musicName'),musicImg = document.getElementById('musicImg'),bgImage = document.getElementById('music');/*var lrc = document.getElementById("lrc_content").innerHTML;*///添加歌词var lrc="";var lrcName = new Array();var lrcName1;lrcName = ['你听得到','爱在西元前'];var music = new Array();music = ['周杰伦-你听得到','周杰伦-爱在西元前'];var len = music.length;var num = 0;lrcName1 = lrcName[num];var oLRC = {ti: "", //歌曲名ar: "", //演唱者al: "", //专辑名by: "", //歌词制作人offset: 0, //时间补偿值，单位毫秒，用于调整歌词整体位置ms: [] //歌词数组{t:时间,c:歌词}};var lineNo=0//当前行var C_pos= 6//C位var offset= -20//滚动距离（应等于行高）var audio = document.getElementById("audio");//播放器var ul = document.getElementById("lyric"); //歌词容器列表getLRC(lrcName1);//高亮显示歌词当前行及文字滚动控制，行号为lineNofunction lineHigh() {var lis = ul.getElementsByTagName("li");//歌词数组if(lineNo>0){lis[lineNo-1].removeAttribute("class");//去掉上一行的高亮样式}lis[lineNo].className = "lineHigh";//高亮显示当前行//文字滚动if(lineNo>C_pos){ul.style.transform = "translateY("+(lineNo-C_pos)*offset+"px)"; //整体向上滚动一行高度}}//滚回到开头，用于播放结束时function goback() {document.querySelector("#lyric .lineHigh").removeAttribute("class");ul.style.transform = "translateY(0)";lineNo = 0;}//监听播放器的timeupdate事件，实现文字与音频播放同步audio.ontimeupdate = function () {if(lineNo==oLRC.ms.length)return;var curTime = audio.currentTime; //播放器时间if(parseFloat(oLRC.ms[lineNo].t)<=curTime){lineHigh();//高亮当前行lineNo++;}};//监听播放器的ended事件，播放结束时回滚歌词/*audio.onended = function () {goback();};*/function getLRC(lrcName) {lrc = "";var ajax = new XMLHttpRequest();ajax.open("get", "lrc/"+lrcName +".lrc",true);ajax.send(null);ajax.onreadystatechange = function () {if (ajax.readyState == 4 && ajax.status == 200) {lrc = ajax.responseText;createLrcObj(lrc);//console.log(lrc);}};}function createLrcObj(lrc) {if(lrc.length==0) return;var lrcs = lrc.split('\n');//用回车拆分成数组for(var i in lrcs) {//遍历歌词数组lrcs[i] = lrcs[i].replace(/(^\s*)|(\s*$)/g, ""); //去除前后空格var t = lrcs[i].substring(lrcs[i].indexOf("[") + 1, lrcs[i].indexOf("]"));//取[]间的内容var s = t.split(":");//分离:前后文字if(isNaN(parseInt(s[0]))) { //不是数值for (var i in oLRC) {if (i != "ms" && i == s[0].toLowerCase()) {oLRC[i] = s[1];}}}else { //是数值var arr = lrcs[i].match(/\[(\d+:.+?)\]/g);//提取时间字段，可能有多个var start = 0;for(var k in arr){start += arr[k].length; //计算歌词位置}var content = lrcs[i].substring(start);//获取歌词内容for (var k in arr){var t = arr[k].substring(1, arr[k].length-1);//取[]间的内容var s = t.split(":");//分离:前后文字oLRC.ms.push({//对象{t:时间,c:歌词}加入ms数组t: (parseFloat(s[0])*60+parseFloat(s[1])).toFixed(3),c: content});}}}oLRC.ms.sort(function (a, b) {//按时间顺序排序return a.t-b.t;});showLRC();}function showLRC() {var s="";for(var i in oLRC.ms){//遍历ms数组，把歌词加入列表s+='<li>'+oLRC.ms[i].c+'</li>';}document.getElementById("lyric").innerHTML = s;}// 播放play.onclick = function(){if(audio.paused){audio.play();document.getElementById("musicImg").classList.remove("stop");document.getElementById("musicImg").classList.add("running");}}function hasClass(element,className){var aSameClassEle  = document.getElementsByClassName(className);for (var i = 0;i < aSameClassEle .length;i++){if(aSameClassEle[i] === element){return true;}}}// 暂停pause.onclick = function(){if(audio.played){audio.pause();document.getElementById("musicImg").classList.remove("running");document.getElementById("musicImg").classList.add("stop");}}// 上一首prev.onclick = function(){num = (num + len - 1) % len;audio.src = './music/' + music[num] + '.mp3';lrcName1 = lrcName[num];lineNo = 0;oLRC.ms = [];getLRC(lrcName1);musicName.innerHTML = music[num];bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)';musicImg.src = './image/' + music[num] + '.jpg';play.onclick();}// 下一首next.onclick = function(){num = (num + 1) % len;audio.src = './music/' + music[num] + '.mp3';lrcName1 = lrcName[num];lineNo = 0;oLRC.ms = [];getLRC(lrcName1);musicName.innerHTML = music[num];bgImage.style.backgroundImage = 'url(./image/' + music[num] + '.jpg)';musicImg.src = './image/' + music[num] + '.jpg';play.onclick();}// 自动切换下一首audio.addEventListener('ended',function(){goback();next.onclick();},false);
</script>

需要所有源码，可以去github上自行下载：
https://github.com/lzs1996/MusicPlayer.git

HTML+CSS+JS做一个简易音乐播放器相关推荐

matlab中GUI的属性检查器中的XLimMode是什么_如何在Matlab中使用GUI做一个简易音乐播放器？ ---- （二）GUIDE...
咕咕怪由于昨天有重要的事情所以咕了一天的文章 (感觉写得挺基础的,对各个部分有一定了解的童鞋可以直接跳过了解的部分用Matlab做一个app有几种办法呢? 同样的,帮助文档告诉了我们答案:三种. 英 ...
matlab figure函数_如何在Matlab中使用GUI做一个简易音乐播放器？ ---- （六）控件间的数据传递...
我纠结了两个星期是否要写这一章-最后决定还是要写一章收尾,来解释其中的控件间的数据传递问题. 在前五篇中,如果有童鞋跟上了我的思路或者做完了这样一个gui,会发现还有一个一直避开的遗留问题,就是将歌曲 ...
前端----利用html,css,js自制有趣的音乐播放器
最近在学前端,然后做了一个简易的音乐播放器,原本只是一个静态的网页,用a标签实现链接,embed标签引入mv,audio标签实现音乐播放,右边的marquee标签实现歌词滚动但是总觉得还不够,就加上了 ...
pyqt5实现一个简易音乐播放器（升级到v2版本）
前言假期最后一天,看到一篇文章使用pyqt实现了一个音乐播放器,刚好前段时间学完pyqt,来撸一个玩一玩,最终的效果如下: 后来又萌生想法,升级了一下UI: 本代码开源仓库:https://gith ...
百度音乐接口-——可以根据这做一个在线音乐播放器哦
当你在百度去搜索一首歌时,你会发现有种更简单的方法,嘿嘿,安宁ヤ太天真告诉你个秘密, 百度有个不公开的API http://box.zhangmen.baidu.com/x?op=12&cou ...
Android开发之简易音乐播放器（一）
这里介绍一个简易的音乐播放器, 效果图如下: 但是,由于这是一个简易版的音乐播放器,所播放的音乐只有一首,且被写死, 但,操作却十分简单,方便理解! 这是代码的主要设计: 音乐主要存放在这一个文件中: ...
android开发音乐播放器,Android开发简易音乐播放器
这里介绍一个简易的音乐播放器,供大家参考,具体内容如下效果图如下: 但是,由于这是一个简易版的音乐播放器,所播放的音乐只有一首,且被写死,但,操作却十分简单,方便理解! 这是代码的主要设计: 音乐主 ...
js 月份间隔计算器_15分钟用JS做一个简易计算器
原标题:15分钟用JS做一个简易计算器前言这个小练手旨在帮助刚上手学习Java的同学练习最基本的Js知识,大神勿喷哈,由于这个是非常简易的计算器,可以完成的功能有加减乘除和AC(清屏),DEL(退 ...
用JS做一个简易的时间显示动态效果
用JS做一个简易的时间显示动态效果运行效果代码 <!DOCTYPE html> <html lang="en"><head><meta ...
JavaScript + Audio API自制简易音乐播放器（详细完整版、小白都能看懂）
JavaScript + Audio API自制简易音乐播放器(详细完整版) ** 音乐播放器的功能清单如下: ** 1.点击暂停按钮,歌曲暂停 2.点击播放按钮,歌曲播放 3.单曲循环与取消单曲循环 ...

HTML+CSS+JS做一个简易音乐播放器

HTML+CSS+JS做一个简易音乐播放器相关推荐

最新文章

热门文章