可以显示歌词，但是歌词和歌曲都要实现自己下载下来。
只能播放一首歌，歌词还得是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="&nbsp;";
                }
                if(gecishuzu[i-1])
                {
                    gecier.innerHTML=gecishuzu[i-1];
                }
                else
                {
                    gecier.innerHTML="&nbsp;";
                }
                gecisan.innerHTML=gecishuzu[i];
                if(gecishuzu[i+1])
                {
                    gecisi.innerHTML=gecishuzu[i+1];
                }
                else
                {
                    gecisi.innerHTML="&nbsp;";
                }
                if(gecishuzu[i+2])
                {
                    geciwu.innerHTML=gecishuzu[i+2];
                }
                else
                {
                    geciwu.innerHTML="&nbsp";
                }
                if(gecishuzu[i+3])
                {
                    geciliu.innerHTML=gecishuzu[i+3];
                }
                else
                {
                    geciliu.innerHTML="&nbsp;";
                }
            }
            //将歌曲实际播放的时间，和我们自己的歌词的时间，进行比较，算出现在应该显示的歌词
            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实现，可以显示歌词的更多相关文章

  1. Lily_music 网页音乐播放器 -可搜索（附歌词联动播放效果解说）

    博客地址:https://ainyi.com/59 写在前面 这是我今年(2018)年初的小项目,当时也是手贱,不想用别的播放器,想着做一个自己的网页播放器,有个歌曲列表.可关键词搜索.歌词滚动播放的 ...

  2. C#_音乐播放器_用ListBox显示歌词

    在用ListBox显示歌词的时候,可以显示多行,同时可以控制每一行显示的样式等等.控制显示样式是在它的DrawItem事件中来控制的.首先要先将ListBox的DrawMode属性设置为OwnerDr ...

  3. Android 仿百度网页音乐播放器圆形图片转圈播放效果

    百度网页音乐播放器的效果  如下 : http://www.baidu.com/baidu?word=%E4%B8%80%E7%9B%B4%E5%BE%88%E5%AE%89%E9%9D%99& ...

  4. html网页音乐播放器自带播放列表

    基于网页的音乐播放器demo  http://pan.baidu.com/s/1dDgm7HR 自己diy了一个手机端在线音乐播放器演示地址http://shanxi2014.com/zhuandiz ...

  5. HTML5网页音乐播放器

    1功能介绍 HTML5中推出了音视频标签,可以让我们不借助其他插件就可以直接播放音视频.下面我们就利用H5的audio标签及其相关属性和方法来制作一个简单的音乐播放器.主要包括以下几个功能: 1.播放 ...

  6. Android——音乐播放器完善——进度条显示当前播放进度，加可拖动进度条（未待解决完问题）

    效果: 问题:可拖动进度条随进度条移动时,会致使音乐卡顿(待解决) xml <?xml version="1.0" encoding="utf-8"?&g ...

  7. 推荐美丽的flash网页MP3音乐播放器

    文章来源:PHP开发学习门户 地址:http://www.phpthinking.com/archives/491 在网页制作中.假设想在网页中插入mp3音乐来增添网页的互动感,提升用户体验度,这个时 ...

  8. 解决ubuntu系统中firefox无法播放网页版音乐播放器音乐

    Reference: https://blog.csdn.net/h736131708/article/details/80775382 因为网页版的qq音乐或者网易云音乐都把音频换成了AAC格式,这 ...

  9. 基于jQuery仿QQ音乐播放器网页版代码

    基于jQuery仿QQ音乐播放器网页版代码是一款黑色样式风格的网页QQ音乐播放器样式代码.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class="m ...

随机推荐

  1. .NET Core使用log4Net记录日志

    1.引入Nuget包 log4net 2.添加log4Net配置文件 <?xml version="1.0" encoding="utf-8" ?> ...

  2. PS小demo

    1.打开图像素材. 2.图层 >> 添加调整图层 >> 色相/饱和度. 得到如下效果: 3.创建新图层,将图层混合模式设为“柔光”,选择笔刷工具,硬度100%,按下图所示绘制该 ...

  3. 【转】玩玩负载均衡---在window与linux下配置nginx

    最近有些时间,开始接触负载均衡方面的东西,从硬件F5再到Citrix Netscalar.不过因为硬件的配置虽然不复杂,但昂贵的价格也让一般用户望而却步(十几万到几十万),所以只能转向nginx,sq ...

  4. CI 安装时目录的安全处理

    如果你想通过隐藏 CodeIgniter 的文件位置来增加安全性,你可以将 system 和 application 目录修改为其他的名字,然后打开主目录下的 index.php 文件将 $syste ...

  5. httpclient调用webservice接口的方法实例

    这几天在写webservice接口,其他的调用方式要生成客户端代码,比较麻烦,不够灵活,今天学习了一下httpclient调用ws的方式,感觉很实用,话不多说,上代码 http://testhcm.y ...

  6. 洛谷P1757 通天之分组背包

    题目背景 直达通天路·小A历险记第二篇 题目描述 自01背包问世之后,小A对此深感兴趣.一天,小A去远游,却发现他的背包不同于01背包,他的物品大致可分为k组,每组中的物品相互冲突,现在,他想知道最大 ...

  7. captcha库报错"OSError: cannot open resource"

    问题描述 在win平台上python虚拟环境下使用captcha库生成验证码报错OSError: cannot open resource 代码 from captcha.image import I ...

  8. 2016 Multi-University Training Contest 1 solutions BY HIT

    首先向大家表示抱歉,因为这套题是去年出的,中间间隔时间太长,今年又临时准备仓促, 所以部分题目出现了一些问题,非常抱歉. Abandoned country 首先注意到任意两条边的边权是不一样的,由此 ...

  9. Codeforces 848C （cdq分治）

    Codeforces 848C Goodbye Souvenir Problem : 给一个长度为n的序列,有q个询问.一种询问是修改某个位置的数,另一种询问是询问一段区间,对于每一种值出现的最右端点 ...

  10. 编程之美2015资格赛 题目2 : 回文字符序列 [ 区间dp ]

    传送门 题目2 : 回文字符序列 时间限制:2000ms 单点时限:1000ms 内存限制:256MB 描述 给定字符串,求它的回文子序列个数.回文子序列反转字符顺序后仍然与原序列相同.例如字符串ab ...