写一个音乐播放器4--点击单句歌词播放

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

所实现的功能是：点击单句歌词后，对本句进行播放，并且高亮显示，相应的进度条到达一定的位置。

实现

绑定点击事件

在单句歌词上绑定鼠标点击事件@click，传入该句歌词的index，以获取所点击的歌词

<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>

点击后播放

点击单行歌词后触发click事件，获取到该句歌词的index值，

进而可以通过index索引传入的歌词数组(歌词数组是单句歌词加该句歌词开始播放时间的包含该首歌所有歌词的数组，前面有讲过写一个音乐播放器2--歌词高亮滚动)获得该句歌词开始播放的时间，

将audio当前时间currentTime设置为该句歌词开始播放的时间，即可从该句继续播放。

由于进度条是按当前时间与总播放时间的占比来实现播放进度条的长度占比的(可以看往期写一个音乐播放器1--歌曲播放进度条)，因此进度条也会自动渲染至正确位置。

最后，将当前点击该行歌词高亮，注意去除上一次播放歌词的高亮样式。

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     
    },     
},

最后

到此，单首歌曲的播放就实现完了，这相当于点击播放歌曲的详情页面；由于当时项目需求简单，没有做切换上一首下一首和循环播放、列表播放等功能。

由于线上代码出现了问题，第一篇有讲到，所以无法附上源码地址，以上都是我个人当时记录的分享笔记。

完结撒花。