原生JS实现在线音乐播放器及歌词滚动

本文链接：https://blog.csdn.net/weixin_46073653/article/details/125418341

本文展示了如何使用HTML、CSS和JavaScript创建一个简单的音乐播放器，包括歌曲切换、进度条跟随和歌词滚动功能。通过AJAX获取本地歌词文件并实时同步歌词滚动，同时处理播放、暂停、上一首、下一首等操作。代码简洁明了，适合初学者参考学习。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说先上效果图，界面没怎么美化，音乐使用的在线链接，图片使用的也是在线链接，歌名和歌词使用的是本地信息
在这里插入图片描述
style

 * {
        margin: 0;
        padding: 0;
      }
      body {
        background-color: #2d2d2d;
      }
      #musbox {
        position: relative;
        margin: 80px auto;
        background-color: #fcfcfc;
        width: 300px;
        height: 500px;
        border-radius: 15px;
        text-align: center;
      }
      #musboximg {
        margin-top: 30px;
        margin-bottom: 30px;
        width: 180px;
        height: 180px;
        border-radius: 50%;
        animation: mymove 20s linear infinite;
      }
      #musnam {
        margin-top: 20px;
        margin-bottom: 10px;
      }
      button {
        width: 30px;
        height: 30px;
        border-radius: 50%;
        border: none;
        background-color: #fcfcfc;
        margin-top: 100px;
      }
      button:nth-of-type(2) {
        margin-left: 30px;
        margin-right: 30px;
      }
      button > img {
        width: 100%;
        height: 100%;
      }
      progress {
        width: 280px;
      }
      @keyframes mymove {
        0% {
          transform: rotate(0deg);
        }
        100% {
          transform: rotate(360deg);
        }
      }
      .lyric_area {
        position: absolute;
        bottom: 70px;
        /*歌词显示区域*/
        height: 80px; /*歌词区域高度*/
        overflow: hidden;
        margin-top: 15px;
      }
      #lyric {
        /*歌词列表*/
        line-height: 25px; /*行高，这个值要用在歌词滚动距离上*/
        transition-duration: 600ms; /*滚动速度*/
      }
      #lyric .lineHigh {
        /*高亮行*/
        color: red;
      }
      #lyric > li {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      #fanhui {
        position: absolute;
        top: -100px;
        left: 0px;
        opacity: 0;
      }

HTML

 <div id="musbox">
      <audio src="" id="auo"></audio>
      <img src="" alt="" id="musboximg" />
      <h3 id="mustitle"></h3>
      <p id="musnam"></p