代码拉取完成,页面将自动刷新
同步操作将从 半生瓜/lyric-vue3 强制同步,此操作会覆盖自 Fork 仓库以来所做的任何修改,且无法恢复!!!
确定后同步将在后台操作,完成时将刷新页面,请耐心等待。
功能:vue3下的歌词滚动插件,播放时间与歌词联动滚动,可自定义样式
npm install lyric-vue3
import lyric from 'lyric-vue3'
createApp(App).use(lyric).mount('#app')
<LyricBasic :config="config"></LyricBasic>
{
src: String, // (必填)音频文件地址,支持Ogg、MP3和WAV
lyrStr: String, // (必填)歌词字符串,格式严格按照lrc标准格式
scorllSpeed: Number, // (默认0.6)歌词自动滚动速度
scaleSpeed: Number, // (默认0.3)歌词缩放速度
scalePercent: Number, // (默认1.2)歌词缩放比例
}
<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>
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。