1 Star 0 Fork 1

Hewie/lyric-vue3

forked from 半生瓜/lyric-vue3 
加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
该仓库未声明开源许可证文件(LICENSE),使用请关注具体项目描述及其代码上游依赖。
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README

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>

空文件

简介

基于vue3的歌词功能组件 展开 收起
JavaScript
取消

发行版

暂无发行版

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化
JavaScript
1
https://gitee.com/hewie/lyric-vue3.git
git@gitee.com:hewie/lyric-vue3.git
hewie
lyric-vue3
lyric-vue3
master

搜索帮助