歌词组件的设计与实现

最新推荐文章于 2025-02-13 03:49:10 发布

Mr.F阿

最新推荐文章于 2025-02-13 03:49:10 发布

阅读量556

点赞数 1

分类专栏：小程序文章标签：云开发交互细节问题解决歌词组件实现

本文链接：https://blog.youkuaiyun.com/shenyou_fu/article/details/104286816

版权

本文详细介绍了在小程序中设计和实现歌词组件的过程，包括歌词的显示、歌词与播放时间的联动、歌词随时间移动的动画效果以及解决在播放过程中遇到的各种问题，如歌曲切换时高亮保持、暂停播放同步等。通过云函数请求歌词资源，利用事件监听和自定义事件实现组件间的交互，确保歌词与音乐播放的完美同步。

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

首先需要实现的就是，在点击封面的时候，可以显示歌词页面，即在封面的时候会有一个点击事件

一、点击事件控制元素是否显示

定义组件过程、引用（略）
在封面上定义点击事件bindtap="onChangeLyricShow"
在脚本中我们定义一个全局bool变量，判断当前是歌词还是封面。
在事件中进行取反数据绑定

 onChangeLyricShow(){
   
    this.setData({
   
      isLyricShow:!this.data.isLyricShow
    })

并隐藏之前一个组件，使用次数多的用hiddenhidden="{ {isLyricShow}}"
,组件中也是用对应的事件进行取反操作。隐藏与封面相反

<bs-lyric   isLyricShow="{
   {!isLyricShow}}" bindtap="onChangeLyricShow"/>

在组件中响应变量变化
在这里插入图片描述
定义他的类型和数值。并在前端响应相应隐藏
<scroll-view hidden="{ {isLyricShow}}"> 歌词 </scroll-view>

二、歌词显示

在当前歌曲加载成功后在显示歌词，因为不需要一显示就加载歌词。
所以在加载完封面之类的首要显示内容在请求单词

首先当前是从云函数中请求我们的歌词资源

app.router('lyric',async(ctx,next)=>{
   
  ctx.body=await rp(URL+`/lyric?id=${
     event.musicId}`).then((res)=>{
   
     return res
   })
})

请求后在页面请求调用
在这里插入图片描述
判断当前歌词的情况，并进行字符串装换。
在前台将我们的绑定数据进行传送，传递给组件lyric="{ {lyric}}"

在组件中接受，并通过属性监听器来监听数据
observers:{ lyric(lrc){ console.log(lrc) } },

解析歌词

在获取到资源的情况下，将我们的歌词逐行解析，显示在桌面上

 _parseLyric(sLyric){
   
      //通过每一行的换行，取到每一行的歌词
      let line=sLyric.split('\n')
      let _lrcList=[]
      line.f

最低0.47元/天解锁文章