更新记录

1.2.1（2023-06-13）

• 修复了某些情况下，字幕不会跟着音频滚动的问题

1.2.0（2023-06-13）

• 优化了字幕切换的判断逻辑，使其能在用户跳转到某时段能更 及时的 进行字幕对应的切换

1.1.0（2023-06-02）

• 增加了 click 单击事件的传递
• 增加了 SeekDataUp 手指滑动事件，并向外提供滑动的距离参数 px

平台兼容性

计划更新的内容

• [x] 基础功能 随时间戳滚动的字幕
• [x] 自定义显示的字幕行数、样式
• [x] 触摸滑动带动歌词与歌曲进度同步滚动

组件介绍

一个简单的字幕滚动组件， 目前是使用了相对定位绝对定位，组件会随着传入的时间用 top 值指定位置

该组件为歌词组件 适用于搭配 smm-audio 组件

注意传入的歌词数据格式应该为 (例子)：

[
    { time: '0:00:05.22', ylc: '全名制作人大家好\r' },
    { time: '0:00:08.78', ylc: '我是练习时常两年半的个人练习生\r' },
     ... 
]

参数传递

事件向外提供

使用演示

<template>
    <view class="content">
        <smm-lyricBar class="openItem" :lyricList='lyricList' :curTime='nowTime' :lyricWh='lyricWh' v-show="isOpen"
            @dblclick='dblclickFn'></smm-lyricBar>
        <smm-audio :srcList='arrList' :lastSongIndex='befoIndex' :directory="true" :dirHight="wh" @timeupdate='showLyric'
            @playChangeIndex='storageIndex' @openLyric='openLyricFn'></smm-audio>
    </view>
</template>

<script>
export default {
    data() {
        return {
            lyricList: [],
            arrList: [],
            wh: 0,
            nowTime: 0,
            // 上一个记录
            befoIndex: 0,
            lyricWh: 0,
            isOpen: false
        };
    },
    onLoad() {
        // 获取设备信息
        const info = uni.getSystemInfoSync();
        // 为当前 可用高度对应变量进行赋值
        this.wh = info.windowHeight - 100;
        this.lyricWh = info.windowHeight;
    },
    created() {
        this.getSongList();
    },
    watch: {
        isOpen(newVal) {
            if (newVal) {
                uni.showToast({
                    title: '双击可关闭字幕滚动',
                    icon: 'none'
                })
            }
        }
    },
    methods: {
        //....
        // 网络请求获取歌词数据
        GetLyricData(id) {
            uni.request({
                url: 'http://网络请求接口',
                method: 'GET',
                data: {
                    songId: id
                },
                success: ({
                    data: res
                }) => {
                    this.lyricList = res.data;
                }
            });
        },
        // 获取当前音乐播放的时间段 单位：秒
        showLyric(e) {
            const nowTime = Math.floor(e.detail.currentTime);
            this.nowTime = nowTime;
        }
}