网页音乐播放器javascript实现,可以显示歌词
可以显示歌词,但是歌词和歌曲都要实现自己下载下来。
只能播放一首歌,歌词还得是lrc格式的
代码写的很罗嗦,急切希望帮改改CSS的代码
1.代码:
<html >
<head>
<!--下面有很多style都是没用到的,但是我改不动了-->
<!--css觉得真是很麻烦-->
<style type="text/css">
audio
{
align:center;
}
.tiaojieshijian
{
color:yellow;
background:black;
}
* {
margin:0;
}
div {
display:block;
text-align:right;
position:relative;
right:300px;
}
div #wenzi{
right:0px;
}
div .ctrl
{
width:200px;
}
body {
font: 14px "Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
background: #333;
color: #fff;
}
.icon{
background-repeat: no-repeat;
background-position: center;
display: inline-block;
opacity: 0.6;
cursor: pointer;
@include square(24px);
@include transition(0.3s);
@include user-select(none);
&:hover, &.enable{
opacity: 1;
}
&:active{
opacity: 0.3;
}
}
#background {
background-size: cover;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
-o-user-select: none;
user-select: none;
}
#player {
width: 500px;
height: 130px;
padding: 25px;
margin: 50px auto 30px;
}
.control {
margin-top: 10px;
height: 25px;
}
.fastforward
{
background-image:url(fastforward.png);
width:24px;
height:24px;
}
.rewind
{
background-image:url(rewind.png);
width:24px;
height:24px;
}
.play
{
background-image:url(play.png);
width:24px;
height:24px;
}
.mute
{
background-image: url(volume.png);
width:24px;
height:24px;
}
.left
{
float:left;
}
.right
{
float:right;
}
</style>
<meta charset="utf-8">
</head>
<body>
<script>
//这个,存储调节的时间值
//localStorage是HTML5的新东西
//localStorage代表着实际歌词时间和lrc歌词时间差
if(!localStorage.time)
{
localStorage.time=0;
}
// var a="[00:11.22]我[00:22.33]看[00:33.44]这样[00:44.55]不好吧";
var a=" [00:03.56]摇晃的红酒杯 嘴唇像染着鲜血 [00:07.48]那不寻常的美 难赦免的罪 [00:11.46]谁忠心的跟随 充其量当个侍卫 [00:15.24]脚下踩着玫瑰 回敬一个吻当安慰 可怜 [00:26.09]像蠢动的音乐 教人们怎么成眠 [00:30.36]不知名的香水 窒息的鬼魅 [00:34.10]锋利的高跟鞋 让多少心肠破碎 [00:37.93]弯刀一般的眉 捍卫你的秘密花园 [00:42.76]夜太美 尽管再危险 [00:46.77]总有人黑着眼眶熬着夜 [00:50.70]爱太美 尽管再危险 [00:54.21]愿赔上了一切超支千年的泪[00:58.26]痛太美 尽管再卑微 [01:01.83]也想尝粉身碎骨的滋味 [01:05.82]你太美 尽管再无言 [01:09.65]我都想用石堆隔绝世界 [01:12.34]我的王妃 我要霸占你的美 [01:22.45]那催情的音乐 听起来多么愚昧 [01:27.02]你武装的防备 伤你的是谁 [01:30.85]靠近我一点点 是不一样的世界 [01:34.69]安睡在我的肩 我用生命为你加冕 [01:39.64]夜太美 尽管再危险 [01:43.49]总有人黑着眼眶熬着夜 [01:47.41]爱太美 尽管再危险 [01:51.10]愿赔上了一切超支千年的泪 [01:54.90]痛太美 尽管再卑微 [01:58.53]也想尝粉身碎骨的滋味 [02:02.49]你太美 尽管再无言 [02:06.09]我都想用石堆隔绝世界 [02:09.05]我的王妃 我要霸占你的美 [02:26.75]夜太美 尽管再危险 [02:30.75]总有人黑着眼眶熬着夜[02:34.80]爱太美 尽管再危险 [02:38.35]愿赔上了一切超支千年的泪 [02:42.25]痛太美 尽管再卑微 [02:45.81]也想尝粉身碎骨的滋味 [02:50.01]你太美 尽管再无言 [02:53.54]我都想用石堆隔绝世界 [02:56.35]我的王妃 我要霸占你的美";
var shijianshuzu=new Array();
var gecishuzu=new Array();
//解析歌词,将时间和歌词分开
//时间放到shijianshuzu中
//歌词放到gecishuzu中
//shijianshuzu[i]就是对应的时间值
//gecishuzu[i]就是对应的歌词
//lrc歌词在代码中直接用变量a存储了,可以改
//这两个数组的长度就是lrc歌词中有多少个类似"[xx:xx.xx]歌词"这样的
function parse(lrc)
{
//如果lrc的内容是"[xx:xx.xx]歌词1[yy:yy.yy]歌词二"
//那str这个数组长度是3
//str[0]=""
//str[1]="xx:xx.xx]歌词一"
//str[2]="yy:yy.yy]歌词二"
str=lrc.split("[");
//因为str[0]="",所以跳过它
for(var i=1;i<str.length;i++)
{
//str[i]格式是00:11.22]我
//shijian格式是00:11.22
var shijian=str[i].split(']')[0];
//geci格式是"我"
var geci=str[i].split(']')[1];
var fen=shijian.split(":")[0];
var miao=shijian.split(":")[1];
//xx:xx.xx 时间转换成总的秒数
var sec=parseInt(fen)*60+parseInt(miao);
//存时间
shijianshuzu[i-1]=sec-localStorage.time;
//存歌词
gecishuzu[i-1]=geci;
}
//这段代码本来是用来显示所有歌词的,这里注释掉了,可以掠过不看
var quanbugeci=document.getElementById("quanbugeci");
for(var i=0;i<shijianshuzu.length;i++)
{http://www.huiyi8.com/donghua/
// quanbugeci.innerHTML=quanbugeci.innerHTML+gecishuzu[i]+"<br>";
}flash素材
//上面是用来显示所有歌词的,不用看
//定时器,隔1s更新下歌词的显示
setInterval(updategeci,1000);
}
//更新歌词
function updategeci()
{
//显示了六行歌词,每一行分别改变innerHTML
var geciyi=document.getElementById("yi");
var gecier=document.getElementById("er");
var gecisan=document.getElementById("san");
var gecisi=document.getElementById("si");
var geciwu=document.getElementById("wu");
var geciliu=document.getElementById("liu");
//由歌词时间计算出i,得到现在应该显示哪部分歌词
//这函数下面有介绍
var i=getcurrent();
//如果gecishuzu[i-2]定义了,就显示,没定义,就不显示
//下面几个类似的if-else结构类似。
//这里写的很罗嗦,以后空了再改
if(gecishuzu[i-2])
{
geciyi.innerHTML=gecishuzu[i-2];
}
else
{
geciyi.innerHTML=" ";
}
if(gecishuzu[i-1])
{
gecier.innerHTML=gecishuzu[i-1];
}
else
{
gecier.innerHTML=" ";
}
gecisan.innerHTML=gecishuzu[i];
if(gecishuzu[i+1])
{
gecisi.innerHTML=gecishuzu[i+1];
}
else
{
gecisi.innerHTML=" ";
}
if(gecishuzu[i+2])
{
geciwu.innerHTML=gecishuzu[i+2];
}
else
{
geciwu.innerHTML=" ";
}
if(gecishuzu[i+3])
{
geciliu.innerHTML=gecishuzu[i+3];
}
else
{
geciliu.innerHTML=" ";
}
}
//将歌曲实际播放的时间,和我们自己的歌词的时间,进行比较,算出现在应该显示的歌词
function getcurrent()
{
var a=document.getElementById("test");
var i=0;
//152,154存歌词和时间的时候
//时间是由小到大的
//当然实际的歌词不一定都是由小到大,还可能是两个时间重复的歌词就合并到一起,其他的情况都没做处理
for(i=0;i<shijianshuzu.length;i++)
{
//数和undefined比较,undefined要大些。
if(shijianshuzu[i]>=a.currentTime)
{
return i;
}
}
return i-1;
}
//函数写成这种形式是为了加载页面的时候自动执行
//(function 函数名{})()
(function ok()
{
parse(a);
})()
//歌词时间减少2S
function back()
{
localStorage.time=parseInt(localStorage.time)-2;
parse(a);
}
//歌词时间增加2s
function forward()
{
localStorage.time=parseInt(localStorage.time)+2;
parse(a);
}
</script>
<!--被注释掉的是因为开始的时候,打算把UI做好看些,后来觉得CSS真的是很难伺候,放弃了-->
<!--<div id="player">
<div class="ctrl">
<div class="control ">
<div class="left">
<div class="rewind icon"></div>
<div class="play icon"></div>
<div class="fastforward icon"></div>
</div>
<div class="right volume">
<div class="icon mute"></div>
</div>
</div>
</div>
</div>-->
<div>
<!--audio 是HTML5中的新元素-->
<!--controls显示那个播放器 autoplay歌曲就绪后自动播放 loop歌曲放完了循环-->
<audio controls id="test" autoplay="true" loop="true">
<source src="test.mp3" >
</audio>
</div>
<div id="wenzi">
<!--显示六行歌词-->
<div id="yi" ></div>
<div id="er" ></div>
<div id="san" ></div>
<div id="si" ></div>
<div id="wu" ></div>
<div id="liu" ></div>
<div id="quanbugeci" ></div>
</div>
<div align="center">
<input type="button" value="后退2s" class="tiaojieshijian" onclick=back()></input>
<input type="button" value="前进2s" class="tiaojieshijian" onclick=forward()></input>
</div>
</body>
</html>
网页音乐播放器javascript实现,可以显示歌词的更多相关文章
- Lily_music 网页音乐播放器 -可搜索(附歌词联动播放效果解说)
博客地址:https://ainyi.com/59 写在前面 这是我今年(2018)年初的小项目,当时也是手贱,不想用别的播放器,想着做一个自己的网页播放器,有个歌曲列表.可关键词搜索.歌词滚动播放的 ...
- C#_音乐播放器_用ListBox显示歌词
在用ListBox显示歌词的时候,可以显示多行,同时可以控制每一行显示的样式等等.控制显示样式是在它的DrawItem事件中来控制的.首先要先将ListBox的DrawMode属性设置为OwnerDr ...
- Android 仿百度网页音乐播放器圆形图片转圈播放效果
百度网页音乐播放器的效果 如下 : http://www.baidu.com/baidu?word=%E4%B8%80%E7%9B%B4%E5%BE%88%E5%AE%89%E9%9D%99& ...
- html网页音乐播放器自带播放列表
基于网页的音乐播放器demo http://pan.baidu.com/s/1dDgm7HR 自己diy了一个手机端在线音乐播放器演示地址http://shanxi2014.com/zhuandiz ...
- HTML5网页音乐播放器
1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...
- Android——音乐播放器完善——进度条显示当前播放进度,加可拖动进度条(未待解决完问题)
效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...
- 推荐美丽的flash网页MP3音乐播放器
文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/491 在网页制作中.假设想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时 ...
- 解决ubuntu系统中firefox无法播放网页版音乐播放器音乐
Reference: https://blog.csdn.net/h736131708/article/details/80775382 因为网页版的qq音乐或者网易云音乐都把音频换成了AAC格式,这 ...
- 基于jQuery仿QQ音乐播放器网页版代码
基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div class="m ...
随机推荐
- HDU 3973 线段树+字符串hash
题目大意: 不断修改字符串中的字母,然后询问区间字符串是否处于已给定的字符串集合中 这里将原来的字符串集合保存到hash表中,当然用map,set都没有问题 修改查询都用线段树实现,自己的query函 ...
- [luoguP2962] [USACO09NOV]灯Lights(高斯消元 + dfs)
传送门 先进行高斯消元 因为要求最少的开关次数,那么: 对于关键元,我们可以通过带入消元求出, 对于自由元,我们暴力枚举,进行dfs,因为只有开关两种状态,0或1 #include <cmath ...
- [luoguP2015] 二叉苹果树(DP)
传送门 貌似是个树形背包... 好像吧.. f[i][j]表示节点i选条边的最优解 #include <cstdio> #include <cstring> #include ...
- Codevs 队列练习 合并版
3185 队列练习 1 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题目描述 Description 给定一个队列(初始为空),只有两种操作入队和出队,现给出这 ...
- 聊聊高并发(四十)解析java.util.concurrent各个组件(十六) ThreadPoolExecutor源代码分析
ThreadPoolExecutor是Executor运行框架最重要的一个实现类.提供了线程池管理和任务管理是两个最主要的能力.这篇通过分析ThreadPoolExecutor的源代码来看看怎样设计和 ...
- CentOS 6.x Radius
CentOS 6.x Radius 一. 实现环境: 1.系统:CentOS release 6.6 (Final) 2.需要软件包: 1) freeradius-2.1.12-6.e16.x ...
- [LeetCode][Java] Subsets
题目: Given a set of distinct integers, nums, return all possible subsets. Note: Elements in a subset ...
- 【甘道夫】并行化频繁模式挖掘算法FP Growth及其在Mahout下的命令使用
今天调研了并行化频繁模式挖掘算法PFP Growth及其在Mahout下的命令使用,简单记录下试验结果,供以后查阅: 环境:Jdk1.7 + Hadoop2.2.0单机伪集群 + Mahout0.6 ...
- MySQL基础笔记(一) SQL简介+数据类型
MySQL是一个关系型数据库管理系统(RDBMS),它是当前最流行的 RDBMS 之一.MySQL分为社区版和企业版,由于其体积小.速度快.总体拥有成本低,尤其是开放源码这一特点,一般中小型网站的开发 ...
- ZOJ 2859 二维线段树
思路:自己写的第二发二维线段树1A.哈哈,看来对二维的push操作比較了解了:可是还没遇到在两个线段树中同一时候进行push操作的,事实上这题我是想在x维和y维同一时候进行push操作的.可是想了好久 ...