vue.js实现点击单句歌词播放

所实现的功能是：点击单句歌词后，对本句进行播放，并且高亮显示，相应的进度条到达一定的位置。
可参考vue.js歌曲播放进度条与歌词滚动同步 ，和vue.js实现歌词高亮滚动与播放同步。

效果图：

点击单句播放

1、布局部分
(1)、template部分

<audio ref="player" autoplay ></audio>

//歌词
<div class="detail">
  <div class="song-title">
    <p ref="song">歌名</p>
    <p ref="singer">歌手</p>
  </div>
  <div class="wrapper">
    <ul ref="ul" class="content">
    <li v-for="(item,index) of ms" :key=item.index @click="playThis(index)">{{item.c}}</li>
  </ul>
  </div>
</div>

//进度条
<div class="bar">
  <div class="progressbar" ref="runfatbar">
  <div class="greenbar" ref="runbar" >
  <span class="yuan"></span>
  </div>
  </div>
</div>

//时间
<div class="time-text">{{cTime}}</div>
<div class="right-time time-text">{{dTime}}</div>

(2)、style部分

//歌词
.detail
  position absolute
  top 1rem
  bottom 2.6rem
  left 0
  right 0
  text-align center
  color  #26a2ff 
  .song-title
    width 100%
    height 2rem
    // background-color #eeefff
    p
      width 100%
      line-height .8rem
      font-size 18px
      color #FFD700 
      margin-top .1rem
      text-align center
      // background-color #fff
  .wrapper
    overflow hidden
    position absolute
    top 2rem
    right 0
    left 0
    height 545px
    // background-color yellow
    ul
      line-height 32px
      width 100%
      padding-bottom 1rem
      // background-color red
      li
        font-size 16px
        transition-duration 1200ms
        // background-color skyblue
      .lineHigh
        color #FFD700
//进度条
.bar 
  width: 80%;
  height: .3rem
  margin-left 10%
  position fixed 
  bottom 2.5rem
  // background-color red
  .progressbar 
    width: 100%;
    height: .1rem
    background-color: #999999;
    // background-color red
    margin-top: .1rem;
    border-radius: .2rem;
    // position: relative;
    .greenbar 
      height: .1rem;
      border-radius: .2rem;
      position: absolute;
      top: .1rem;
      left: 0;
      // overflow hidden 
      // 圆形变成椭圆
      background-color: #1296db;
      // background-color #fff
      .yuan 
        border-radius 10px
        position absolute
        top -.05rem
        right -0.01rem
        width .2rem
        height .2rem
        background-color #fff
//时间
.time-text 
  position fixed
  bottom 2.5rem
  font-size 13px
  line-height .5rem
.right-time 
  right 0
  .audio-btn 
    width: 100%;
    text-align: center;

2、逻辑部分

data () {
    return {
      lineNo: 0,
      Cpos: 7,
      offset: -32,
      ms: [],
    }
  },
  
  methods: {
    // 点击单句歌词播放事件
    playThis(index) {
        const music = this.$refs.player
        const ulist = this.$refs.ul
        const list = ulist.getElementsByTagName("li");

        // 删除之前的高亮样式与设置当前点击部分高亮样式
        list[this.lineNo-1].removeAttribute("class");//去掉上一行的高亮样式
        this.lineNo = index
        list[this.lineNo].className = "lineHigh";//高亮显示当前行
        
        // 设置当前时间进行播放
        music.currentTime = this.ms[this.lineNo].t
    },  
  },