zoukankan      html  css  js  c++  java

  • 手把手教你编写一个音乐播放器

    话不多说，直接看效果图：

    代码如下：

    1.  
      <!doctype html>
    2.  
      <html lang="en">
    3.  
      <head>
    4.  
      <meta charset="UTF-8">
    5.  
      <meta name="Generator" content="EditPlus®">
    6.  
      <meta name="Author" content="">
    7.  
      <meta name="Keywords" content="">
    8.  
      <meta name="Description" content="">
    9.  
      <title>音乐播放器</title>
    10.  
      <style type="text/css">
    11.  
      *{
    12.  
      margin:0px;
    13.  
      padding:0px;}
    14.  
      #phone{
    15.  
      320px;
    16.  
      height:600px;
    17.  
      background:#000;
    18.  
      margin:100px auto;}
    19.  
      .top
    20.  
      {
    21.  
      320px;
    22.  
      height:23px;
    23.  
      background:url("images/1.png")
    24.  
      }
    25.  
      .tittle
    26.  
      {
    27.  
      320px;
    28.  
      height:30px;
    29.  
      background:url("images/2.png");
    30.  
      color:#fff;
    31.  
      text-align:center;
    32.  
      line-height:30px;
    33.  
      font-size:18px;
    34.  
      }
    35.  
      .singer
    36.  
      {
    37.  
      320px;
    38.  
      height:20px;
    39.  
      margin-top:5px;
    40.  
      line-height:20px;
    41.  
      font-size:16px;
    42.  
      color:#fff;
    43.  
      text-align:center;
    44.  
      }
    45.  
      .play
    46.  
      {
    47.  
      190px;
    48.  
      height:190px;
    49.  
      background:url("images/3.png");
    50.  
      border-radius:50%;
    51.  
      margin:20px auto;
    52.  
      }
    53.  
      .lrc{
    54.  
      300px;
    55.  
      height:280px;
    56.  
      margin:0px auto;
    57.  
      color:#ccc;
    58.  
      text-align:center;
    59.  
      overflow:hidden;}
    60.  
      .lrc p{
    61.  
      line-height:20px;}
    62.  
      #content{
    63.  
      position:relative;
    64.  
      top:0px;
    65.  
      }
    66.  
      .rotate{
    67.  
      animation:rot 5s linear infinite;}/*动画效果*/
    68.  
      @keyframes rot{
    69.  
      from{transform:rotate(0deg)}
    70.  
      to{transform:rotate(360deg)}
    71.  
      }
    72.  
      </style>
    73.  
      </head>
    74.  
      <body>
    75.  
      <div id="phone">
    76.  
      <div class="top"></div><!--顶部-->
    77.  
      <div class="tittle">晴天</div><!--歌曲名-->
    78.  
      <div class="singer">周杰伦</div><!--作者-->
    79.  
      <div class="play" id="play"></div><!--图片-->
    80.  
      <div class="lrc">
    81.  
      <div id="content"></div><!--存放歌词-->
    82.  
      </div>
    83.  
      </div>
    84.  
      <audio src="music/周杰伦-晴天.mp3" id="mymusic"></audio><!--音乐-->
    85.  
      <textarea id="text" style="display:none"><!--歌词-->
    86.  
      [ar:晴天 周杰伦]
    87.  
      [ti: 晴天 周杰伦 ]
    88.  
      [00:00.71]晴天 - 周杰伦
    89.  
      [00:28.84]故事的小黄花
    90.  
      [00:32.34]从出生那年就飘着
    91.  
      [00:35.85]童年的荡秋千
    92.  
      [00:39.41]随记忆一直晃到现在
    93.  
      [00:42.77]rui sou sou xi dou xi la
    94.  
      [00:45.50]sou la xi xi xi xi la xi la sou
    95.  
      [00:49.41]吹着前奏望着天空
    96.  
      [00:52.60]我想起花瓣试着掉落
    97.  
      [00:56.10]为你翘课的那一天
    98.  
      [00:58.29]花落的那一天
    99.  
      [01:00.14]教室的那一间
    100.  
      [01:01.79]我怎么看不见
    101.  
      [01:03.61]消失的下雨天
    102.  
      [01:05.38]我好想再淋一遍
    103.  
      [01:09.51]没想到失去的勇气我还留着
    104.  
      [01:15.72]好想再问一遍
    105.  
      [01:17.47]你会等待还是离开
    106.  
      [01:24.46]刮风这天我试过握着你手
    107.  
      [01:30.18]但偏偏雨渐渐大到我看你不见
    108.  
      [01:38.50]还要多久我才能在你身边
    109.  
      [01:44.93]等到放晴的那天也许我会比较好一点
    110.  
      [01:52.41]从前从前有个人爱你很久
    111.  
      [01:58.07]但偏偏风渐渐把距离吹得好远
    112.  
      [02:06.44]好不容易又能再多爱一天
    113.  
      [02:12.81]但故事的最后你好像还是说了拜拜
    114.  
      [02:33.93]为你翘课的那一天
    115.  
      [02:36.39]花落的那一天
    116.  
      [02:38.13]教室的那一间
    117.  
      [02:39.84]我怎么看不见
    118.  
      [02:41.55]消失的下雨天
    119.  
      [02:43.31]我好想再淋一遍
    120.  
      [02:47.39]没想到失去的勇气我还留着
    121.  
      [02:53.39]好想再问一遍
    122.  
      [02:55.49]你会等待还是离开
    123.  
      [03:02.46]刮风这天我试过握着你手
    124.  
      [03:08.12]但偏偏雨渐渐大到我看你不见
    125.  
      [03:16.54]还要多久我才能在你身边
    126.  
      [03:23.10]等到放晴的那天也许我会比较好一点
    127.  
      [03:30.49]从前从前有个人爱你很久
    128.  
      [03:36.26]但偏偏风渐渐把距离吹得好远
    129.  
      [03:44.48]好不容易又能再多爱一天
    130.  
      [03:51.05]但故事的最后你好像还是说了拜拜
    131.  
      [03:57.65]刮风这天我试过握着你手
    132.  
      [04:01.45]但偏偏雨渐渐大到我看你不见
    133.  
      [04:04.98]还要多久我才能够在你身边
    134.  
      [04:08.64]等到放晴那天也许我会比较好一点
    135.  
      [04:12.34]从前从前有个人爱你很久
    136.  
      [04:15.40]但偏偏雨渐渐把距离吹得好远
    137.  
      [04:19.05]好不容易又能再多爱一天
    138.  
      [04:22.42]但故事的最后你好像还是说了拜
    139.  
      </textarea>
    140.  
      <script type="text/javascript">
    141.  
      var oPlay=document.getElementById("play");
    142.  
      var myMusic=document.getElementById("mymusic");
    143.  
      var oText=document.getElementById("text");
    144.  
      var oCon=document.getElementById("content");
    145.  
      var mark=true;//标记音乐播放的状态
    146.  
      oPlay.onclick=function(){
    147.  
      if(mark){
    148.  
      myMusic.play();/*播放*/
    149.  
      this.className="play rotate";
    150.  
      mark=false;
    151.  
      }else{
    152.  
      myMusic.pause();/*暂停*/
    153.  
      this.className="play";
    154.  
      mark=true;
    155.  
      }
    156.  
      }
    157.  
      //获取歌词
    158.  
      var text=oText.value.split("[");//歌词从【切割开
    159.  
      //循环
    160.  
      var html="";
    161.  
      for(var i=0;i<text.length;i++){
    162.  
      var txt=text[i].split("]");
    163.  
      //console.log(txt[1]);
    164.  
      var times=txt[0].split(".");//从.的位置切割
    165.  
      //console.log(times);
    166.  
      var time=times[0].split(":");//从:的位置切割
    167.  
      //console.log(times);
    168.  
      var ct=time[0]*60+time[1]*1;
    169.  
      //console.log(ct);
    170.  
      //判断txt[1]是否存在
    171.  
      if(txt[1]){
    172.  
      html+="<p id="+ct+">"+txt[1]+"</p>"
    173.  
      }
    174.  
      }
    175.  
      oCon.innerHTML=html;
    176.  
      //获取所有的P
    177.  
      var xP=oCon.getElementsByTagName("p");
    178.  
      var n=0;
    179.  
      //console.log(html);
    180.  
      //监听歌曲的播放进度 歌词同步
    181.  
      myMusic.addEventListener("timeupdate",function(){
    182.  
      //当时间更新
    183.  
      var cur=parseInt(this.currentTime);
    184.  
      //console.log(cur);
    185.  
      if(document.getElementById(cur))
    186.  
      {
    187.  
      //先把所有的P标签颜色改为原色
    188.  
      for(var i=0;i<xP.length;i++){
    189.  
      xP[i].style.color="#ccc";
    190.  
      xP[i].style.fontSize="14px";
    191.  
      }
    192.  
      //当前P标签红色
    193.  
      document.getElementById(cur).style.color="red"
    194.  
      document.getElementById(cur).style.fontSize="18px"
    195.  
      if(xP[n+8].id==cur){
    196.  
      oCon.style.top=-20*n+"px";
    197.  
      n++;
    198.  
      }
    199.  
      }
    200.  
      })
    201.  
       
    202.  
      </script>
    203.  
      </body>
    204.  
      </html>

    源码下载：点击这里
  • 相关阅读:
    004 Optional
    003 Preconditons
    002 splitter
    003 主键问题
    ReportViewer Win32Exception (0x80004005): 创建窗口句柄时出错
    sqlserver删除所有表、视图、存储过程
    win10文件夹 无法显示当前所有者 管理员都不行
    Cannot resolve collation conflict between "Chinese_Taiwan_Stroke_CI_AS" and "Chinese_PRC_CI_AS" in UNION ALL operator occurring in SELECT statement column 1.
    分析器错误消息: Reference.svcmap:未能加载文件
    跨AppDomain通信
  • 原文地址：https://www.cnblogs.com/muhy/p/14209751.html
Copyright © 2011-2022 走看看