lyric-vue3

介绍

功能：vue3下的歌词滚动插件，播放时间与歌词联动滚动，可自定义样式

使用

npm install lyric-vue3

import lyric from 'lyric-vue3'
createApp(App).use(lyric).mount('#app')

<LyricBasic :config="config"></LyricBasic>

config

{
    src: String, // （必填）音频文件地址，支持Ogg、MP3和WAV
    lyrStr: String, // （必填）歌词字符串，格式严格按照lrc标准格式
    scorllSpeed: Number, // （默认0.6）歌词自动滚动速度
    scaleSpeed: Number, // （默认0.3）歌词缩放速度
    scalePercent: Number, // （默认1.2）歌词缩放比例
}

example

<template>
  <LyricBasic :config="config" class="lyr"></LyricBasic>
</template>

<script setup>
import { reactive } from 'vue';
import lrc from './assets/music'

const config = reactive({
  src: require('./assets/music.mp3'),
  lyrStr: lrc,
  scorllSpeed: 0.6,
  scaleSpeed: 0.3,
  scalePercent: 1.2
})

</script>

<style scoped>
/**
 * 通过样式穿透修改样式
 * 1、css 用 >>>
 * 2、scss 用 /deep/ ,vue-cli3以上版本用 ::v-deep
 */
.lyr >>>.container .active {
  color: aqua;
}
</style>

logs

0.0.1 初始化项目，实现基本功能 0.1.0 修改webpack打包方式，将css打包进js，用户不需要单独引入css文件 1.0.1 新增scorllSpeed、scaleSpeed、scalePercent等参数 1.0.2 完善read.me 1.1.1 修改bug，完善样式修改说明 1.1.2 提供源码

源码

https://gitee.com/lzshyy/lyric-vue3