关键词：
知识点：html/css布局思维，音频标签api运用，css3自定义动画，Js音乐播放控制，歌词同步等。
html代码：
<textarea id="txt" style="display:none">
[00:00.64]小幸运 - 谭嘉仪
[00:02.15]词：徐世珍&吴辉福
[00:03.70]曲：JerryC
[00:04.14]编曲：JerryC
[00:13.77]我听见雨滴落在青青草地
[00:19.89]我听见远方下课钟声响起
[00:25.74]可是我没有听见你的声音
[00:30.74]认真 呼唤我姓名
[00:37.92]爱上你的时候还不懂感情
[00:44.12]离别了才觉得刻骨 铭心
[00:50.09]为什么没有发现遇见了你
[00:54.70]是生命最好的事情
[01:00.30]也许当时忙着微笑和哭泣
[01:06.36]忙着追逐天空中的流星
[01:12.12]人理所当然的忘记
[01:16.55]是谁风里雨里一直默默守护在原地
[01:24.44]原来你是我最想留住的幸运
[01:29.69]原来我们和爱情曾经靠得那么近
[01:35.67]那为我对抗世界的决定
[01:40.29]那陪我淋的雨
[01:43.28]一幕幕都是你 一尘不染的真心
[01:50.60]与你相遇 好幸运
[01:53.96]可我已失去为你泪流满面的权利
[01:59.98]但愿在我看不到的天际
[02:04.63]你张开了双翼
[02:07.68]遇见你的注定 她会有多幸运
[02:27.28]青春是段跌跌撞撞的旅行
[02:33.44]拥有着后知后觉的美丽
[02:39.55]来不及感谢是你给我勇气
[02:44.22]让我能做回我自己
[02:49.72]也许当时忙着微笑和哭泣
[02:55.55]忙着追逐天空中的流星
[03:01.61]人理所当然的忘记
[03:06.03]是谁风里雨里一直默默守护在原地
[03:13.79]原来你是我最想留住的幸运
[03:19.05]原来我们和爱情曾经靠得那么近
[03:25.17]那为我对抗世界的决定
[03:29.68]那陪我淋的雨
[03:32.56]一幕幕都是你 一尘不染的真心
[03:39.89]与你相遇 好幸运
[03:43.40]可我已失去为你泪流满面的权利
[03:49.32]但愿在我看不到的天际
[03:53.97]你张开了双翼
[03:56.98]遇见你的注定
[04:00.47]Oh 她会有多幸运
</textarea>
<div class="photo">
<div class="top"></div>
<div class="title">小幸运</div>
<div class="singer">谭嘉仪</div>
<div class="play"></div>
<div class="lrc">
<div class="content"></div>
</div>
</div>
<audio src="mp3/谭嘉仪-小幸运.mp3" id="myMusic"></audio>css代码：
<style type="text/css">
*{
margin:0;
padding:0;
}
body{
background: rgb(55, 76, 86);
}
.photo{
width:320px;
height:600px;
margin:100px auto;
background:#000;
font-family:"微软雅黑";
padding: 5px;
background-color:#222;
border-radius: 20px;
box-shadow: 0 0 7px #fff;
overflow: hidden;
}
.top{
width:320px;
height:23px;
background:url("images/1.png") no-repeat;
}
.title{
width:320px;
height:30px;
background:url("images/2.png") no-repeat;
font-size:20px;
color:#ccc;
font-weight:bold;
text-align:center;
line-height:30px;
}
.play{
width:190px;
height:190px;
background:url("images/3.png") no-repeat;
margin:auto;
border-radius:50%;
}
.singer{
width:320px;
font-size:14px;
color:#ccc;
text-align:center;
line-height:40px;
}
.lrc{
width:300px;
height:285px;
margin:20px auto;
text-align:center;
overflow:hidden;
color:#ccc;
}
.lrc p{
line-height:20px;
font-size:12px;
}
.content{
position:relative;
left:0;
top:0;
}
.play.rotate{
-webkit-animation:rot 5s linear infinite;
-moz-animation:rot 5s linear infinite;
-ms-animation:rot 5s linear infinite;
-o-animation:rot 5s linear infinite;
animation:rot 5s linear infinite;
}
@keyframes rot{
from{transform:rotate(0deg);}
to{transform:rotate(360deg);}
}
</style>javascript代码：
<script type="text/javascript">
//window.onload=function(){}页面加载后执行
var btn = document.getElementsByClassName("play")[0];//通过class类名去获取元素 数组的形式储存 []
var myMusic = document.getElementById("myMusic");//通过ID
var txt = document.getElementById("txt");
var con = document.getElementsByClassName("content")[0]
var mark = true;//布尔值 true真 false假
btn.onclick = function(){
if (mark)//隐式转换 i > 1
{
this.className += " rotate";
myMusic.play();//播放音乐
mark = false;
}else{
this.className = "play";
myMusic.pause();//音乐暂停
mark = true;
}
}
var lrc = txt.value;
var lrcArr = lrc.split("[");//从哪个字符开始，分隔成数组
var html = "";
for (var i = 0;i<lrcArr.length ;i++ )
{
var arr = lrcArr[i].split("]");//分隔歌词与时间
var time = arr[0].split(".");//分隔毫秒与其他时间
var timer = time[0].split(":");//分隔分钟与秒
var ms = timer[0]*60 + timer[1]*1;//转化为秒钟
//字符串类型乘以数字类型就会转化成为数字类型
var text = arr[1];//获取歌词部分
if (text){
html +="<p id="+ms+">"+text+"</p>";
}
con.innerHTML = html;
}
var num = 0;
var oP = con.getElementsByTagName("p");//通过标签名获取所有p元素
myMusic.addEventListener("timeupdate",function(){
var curTime = parseInt(this.currentTime);//获取歌曲播放的时间 以秒为单位
if (document.getElementById(curTime))
{
for (var i = 0;i<oP.length ;i++)
{
oP[i].style.cssText = "color:#ccc;font-size:12px;"//在播放下一句之前把所有的歌词样式还原
}
document.getElementById(curTime).style.cssText = "color:red;font-size:18px;"
if (oP[7+num].id == curTime)
{
con.style.top = -20*num + "px";
num ++;//依次加一
}
}
});//监听
</script>有兴趣想学习web前端的可以来web前端qun“189394454”可以免费获取2018最新web前端学习资料。
关注公众号→‘学习web前端’开启你的web前端学习之路
迷你音乐播放器v1.0正式上线!
迷你音乐播放器V1.0正式上线!功能: 1.随机播放切换开关 2.歌曲为服务器本地音乐 3.网上搜索功能暂不支持...看下图简单戳戳感受一下吧.. 快来一起分享吧~~~GitHub(戳我) 查看详情
javascript音乐播放器(代码片段)
用javascript和html5做一个音乐播放器，附带源码
效果图：实现的功能1、首页2、底部播放控件3、播放页面4、播放列表5、排行榜6、音乐搜索输入搜索关键词，点击放大镜图标7、侧边栏目录结构 开发心得与总结1、轮播图首先感谢作者ShanaMaid/vue-image-scroll开源的代码，我把... 查看详情
使用 JavaScript 创建音乐播放器
】使用JavaScript创建音乐播放器【英文标题】：CreatingamusicplayerwithJavaScript【发布时间】：2018-11-1523:49:41【问题描述】：我正在尝试创建一个音乐播放器。我的HTML代码是：<divid="main"><divid="list"draggable="true"></div><divid=... 查看详情
javascript雅虎音乐播放器javascriptforheader(代码片段)
使用javascript淡入/淡出播放/暂停音乐
】使用javascript淡入/淡出播放/暂停音乐【英文标题】：Play/pausemusicwithfadein/fadeoutwithjavascript【发布时间】：2017-01-2311:51:48【问题描述】：我想要两个div用于播放和暂停mp3文件，因此当您单击“播放”时声音会淡入，而当您单击“... 查看详情
javascript音乐播放列表(代码片段)
从零开发一个定制版音乐播放器，女朋友不就有了吗？(代码片段)
...WebApp开发有着独到的见解和深入的研究,除此之外还精通JavaScript、AngularJS、NodeJS、Ajax、jQuery、Cordova、ReactNa 查看详情
从零开发一个定制版音乐播放器，女朋友不就有了吗？(代码片段)
...WebApp开发有着独到的见解和深入的研究,除此之外还精通JavaScript、AngularJS、NodeJS、Ajax、jQuery、Cordova、ReactNa 查看详情
3分钟开发一个冰冰版3d音乐播放器，是什么样的体验?(代码片段)
...WebApp开发有着独到的见解和深入的研究,除此之外还精通JavaScript、AngularJS、NodeJS、Ajax、jQuery、Cordova、ReactNa 查看详情
html5实现音乐播放器歌词同步怎么实现的
参考技术A可以去H5edu看看，其HTML5培训课程融合了HTML5开发基础课程、CSS3基础课程和移动前端交互JavaScript+JQuery+Ajex等课程,从入门到精通,让开发者全面学习HTML5 查看详情
text超级简单的javascript音乐播放器，具有播放，暂停和音量控制功能。(代码片段)
javascript控制mediaplayer的网页音乐播放器歌词同步播放列表循环播放按顺
参考技术A不可能除非你使用html5，但是这样就要抛弃了好多浏览器啊追问非JS的方式，怎么实现网页音乐播放器歌词同步播放列表循环播放按顺 查看详情
vue开发历程---音乐播放器的继续
前言前面一篇文章Vue开发历程---音乐播放器，实现了播放音乐，以及基本的布局。但是进度条没有实现同步，本文即介绍进度条的实现。一、效果图二、心路历程1、elementUI滑块的使用<divclass="block"style="margin-top:5px">&... 查看详情
android开发实战之简单音乐播放器
最近开始学习音频相关。所以，很想自己做一个音乐播放器，于是，花了一天学习，将播放器的基本功能实现了出来。我觉得学习知识点还是蛮多的，所以写篇博客总结一下关于一个音乐播放器实现的逻辑。希望这篇博文对... 查看详情
android开发---mediaplayer简单音乐播放器
Android开发—MediaPlayer简单音乐播放器功能介绍实现一个简单的播放器，类似网易云音乐形式，功能包括：播放、暂停，停止，退出功能；后台播放功能；进度条显示播放进度、拖动进度条改变进度功能&... 查看详情
嵌入式qt开发一个音乐播放器(代码片段)
...开发测试。由于Qt是支持跨平台的，因此本篇的音乐播放器，先在Windows上编写调试，功能调好后再通过交叉编译，在Linux板子上测试。在第一篇的开箱介绍中，体验了OK3568板子自带的Qt界面，有视频播放器... 查看详情
♥基于h5+js开发一款音乐播放器(代码片段)
前言：当下音乐播放器不胜其数，为了更好的掌握一些东西，我们来自己制作一个音乐播放器。文章目录：一.开发环境：二.页面视图：1.主文件入口（首页）：2.音乐播放界面：三.功能实现... 查看详情