秒轉(zhuǎn)00:00:00

 * 秒值轉(zhuǎn)時分秒
 * @name TimeToString
 * @example 秒值轉(zhuǎn)時分秒
 * @param {String} seconds 秒
 */
const TimeToString = (seconds) => {
  console.log(seconds)
    let param = parseInt(seconds);
    let hh = "",
        mm = "",
        ss = "";
    if (param >= 0 && param < 60) {
        param < 10 ? (ss = "0" + param) : (ss = param);
        return "00:" + ss;
    } else if (param >= 60 && param < 3600) {
        mm = parseInt(param / 60);
        mm < 10 ? (mm = "0" + mm) : mm;
        param - parseInt(mm * 60) < 10 ?
            (ss = "0" + String(param - parseInt(mm * 60))) :
            (ss = param - parseInt(mm * 60));
        return mm + ":" + ss;
    }
}

頁面

<style lang="less" scoped>
// 我的移動端換算設置為100px=1rem
.main-page {
    width: 100%;
    height: 100vh;
    position: relative;
    background: rgba(15, 15, 15, 0.3);
    .background-flitter {
        position: fixed;
        z-index: -2;
        background-repeat: no-repeat;
        width: 100%;
        height: 100vh;
        top: 0;
        left: 0;
        background-size: cover;
        background-position: 50%;
        filter: blur(0.16rem);
        opacity: 0.7;
        overflow: hidden;
        box-sizing: border-box;
    }
    .top-bar {
        width: 100%;
        height: 1.2rem;
        text-align: center;
        color: #fff;
        font-size: 0.32rem;
        line-height: 0.6rem;
        font-weight: 600;
    }
    .lyric-container {
        width: 100%;
        height: 9rem;
        position: relative;
        overflow: hidden;
        .swiper-contain {
            position: relative;
            width: 100%;
            height: 100%;
            .swiper-wrapper {
                width: 100%;
                height: 100%;
                position: relative;
                .swiper-slide {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    .disc-cover {
                        width: 100%;
                        height: 6rem;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        .disc {
                            width: 5rem;
                            height: 5rem;
                            border-radius: 50%;
                            box-shadow: 0 0 0 0.2rem rgba(255, 255, 255, 0.4);
                            animation: animations1 12s linear infinite forwards;
                            animation-play-state: paused;
                            overflow: hidden;
                            img {
                                width: 100%;
                                height: 100%;
                            }
                        }
                        @keyframes animations1 {
                            from {
                                transform: rotate(0deg);
                            }
                            to {
                                transform: rotate(360deg);
                            }
                        }
                    }
                    .text-container {
                        position: relative;
                        padding-top: 1rem;
                        box-sizing: border-box;
                        overflow: hidden;
                        mask-image: linear-gradient(
                            to bottom,
                            rgba(255, 255, 255, 0) 0,
                            rgba(255, 255, 255, 0.5) 2%,
                            rgba(255, 255, 255, 1) 5%,
                            rgba(255, 255, 255, 0) 100%
                        );
                        .text-list {
                            width: 100%;
                            text-align: center;
                            line-height: 1rem;
                            color: #fff;
                            font-size: 0.28rem;
                            transform: translate3d(0, 0, 0);
                            transition: transform 0.6s ease-out;
                            text-overflow: ellipsis;
                            overflow: hidden;
                            white-space: nowrap;
                        }
                    }
                }
            }
            .swiper-pagination {
                width: 100%;
                height: 0.4rem;
            }
        }
    }
    .progress-bar {
        margin-top: 0.3rem;
        width: 100%;
        padding: 0 0.75rem;
        box-sizing: border-box;
        display: flex;
        align-items: center;
        position: relative;
        height: 0.6rem;
        color: #fff;
        line-height: 0.6rem;
        font-size: 0.24rem;
        .time {
            width: 1rem;
            text-align: center;
        }
        .progress {
            width: 4rem;
            height: 0.06rem;
            background: rgba(255, 255, 255, 0.3);
            border-radius: 0.03rem;
            position: relative;
            margin: 0 0.15rem;
            .progress_box {
                width: 4rem;
                height: 0.06rem;
                border-radius: 0.03rem;
                background: #40ce8f;
            }
            .play-point {
                position: absolute;
                transition: -webkit-transform 0.2s linear;
                transition: transform 0.2s linear;
                transition: transform 0.2s linear, -webkit-transform 0.2s linear;
                top: -0.12rem;
                left: -0.15rem;
                width: 0.3rem;
                height: 0.3rem;
                border-radius: 50%;
                background: #fff;
            }
        }
    }
    .play-icon {
        margin-top: 0.6rem;
        position: relative;
        width: 100%;
        display: flex;
        justify-content: center;
        .icon {
            width: 0.92rem;
            img {
                width: 0.92rem;
            }
        }
        .play-icon {
            width: 0.92rem;
            margin: 0 1.2rem;
        }
    }
}
</style>
<template>
    <div class="main-page" ref="MainRef">
        <div
            class="background-flitter"
            :style="`background-image: url(${songInfo.cover})`"
        ></div>
        <div class="top-bar">
            <p>{{ songInfo.name }}</p>
            <p style="font-size: 0.24rem;font-weight: 500">{{ songInfo.artistsName }}</p>
        </div>
        <div class="lyric-container">
            <div class="swiper-contain">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <div class="disc-cover">
                            <div class="disc" ref="rotate">
                                <img :src="songInfo.cover" alt="" />
                            </div>
                        </div>
                        <div class="text-container">
                            <div class="text-list" :style="lyricMiniTop">
                                <p
                                    v-for="(item, index) in lyricInfo"
                                    :key="index"
                                    :style="{
                                        color:
                                            lyricIndex === index
                                                ? colorLight
                                                : color,
                                    }"
                                >
                                    {{ item.lyric }}
                                </p>
                            </div>
                        </div>
                    </div>
                    <div class="swiper-slide">
                        <l-scroll
                            ref="lyric"
                            :color="color"
                            :colorLight="colorLight"
                            :lineHeight="lineHeight"
                            :paddingTop="paddingTop"
                            :fontSize="fontSize"
                            :lyricIndex="lyricIndex"
                            :lyricsList="lyricInfo"
                        ></l-scroll>
                    </div>
                </div>
            </div>
        </div>
        <div class="progress-bar">
            <div class="time">{{ currentTime }}</div>
            <div
                class="progress"
                @click="HandleProgressClick($event)"
                ref="track"
            >
                <div
                    class="progress_box"
                    :style="{ width: audioProgressPercent }"
                ></div>
                <div
                    class="play-point"
                    @touchstart.stop.prevent="TouchStart"
                    @touchmove.stop.prevent="TouchMove"
                    @touchend.stop.prevent="TouchEnd"
                    :style="{
                        transform: 'translateX(' + thumbTranslateX + 'rem)',
                    }"
                ></div>
            </div>
            <div class="time">{{ audioDuration }}</div>
        </div>
        <div class="play-icon">
            <div class="icon" @click="SkipBack">
                <img :src="arrow_01" alt="" />
            </div>
            <img
                class="play-icon"
                @click="PlayMusic"
                v-show="!playing"
                :src="play_01"
                alt=""
            />
            <img
                class="play-icon"
                @click="PlayMusic"
                v-show="playing"
                :src="play_02"
                alt=""
            />
            <div class="icon" @click="SkipForward">
                <img :src="arrow_02" alt="" />
            </div>
        </div>
        <audio :src="songInfo.url" preload="preload" id="audio"></audio>
    </div>
</template>
<script>
import LScroll from "../../../components/lyricScroll/scroll.vue";
const Swiper = require("swiper");
import "swiper/dist/css/swiper.min.css";
export default {
    data: function () {
        return {
            playing: false,
            playIndex: 0,
            play_01:
                "../src/image/play_icon.png",
            play_02:
                "../src/image/play-02.png",
            arrow_01:
                "../src/image/arrow_01.png",
            arrow_02:
                "../src/image/mechanism/arrow_02.png",
            songInfo: {},
            songList: [
                {
                    albumId: 75612550,
                    albumTitle: "辭.九門回憶",
                    artistsName: "解憂草/冰幽",
                    cover:
                        "https://p1.music.126.net/pWJXXU4kbhsk1HhXCPUMag==/109951163879149420.jpg",
                    id: 557640761,
                    index: 0,
                    name: "辭.九門回憶",
                    url:
                        "https://music.163.com/song/media/outer/url?id=1347524822.mp3",
                },
                {
                    albumId: 9333,
                    albumTitle: "翻唱合集",
                    artistsName: "等什么君",
                    cover:
                        "https://y.gtimg.cn/music/photo_new/T002R300x300M000000vtKmF3OEIbF.jpg?max_age=2592000",
                    id: 1462624041,
                    index: 1,
                    name: "春庭雪",
                    url:
                        "http://aqqmusic.tc.qq.com/amobile.music.tc.qq.com/C4000036hiOc1PzcKd.m4a?guid=7184359043&vkey=E887F187BAEE434C584843A53C72142C4DFF181C3CC1831F94B3E5AD910C21F178E84BDD7D04572DC2048D4FF9EDAC742D3E2256F69226EC&uin=0&fromtag=38",
                },
                {
                    albumId: 75612550,
                    albumTitle: "20歲30歲40歲",
                    artistsName: "曾婕Joey.Z",
                    cover:
                        "https://p2.music.126.net/-HrOFDdHaCg-_bl6MlqFQw==/109951163753269739.jpg?param=120y120",
                    id: 1335968312,
                    index: 3,
                    name: "20歲30歲40歲",
                    url:
                        "https://music.163.com/song/media/outer/url?id=1335968312.mp3",
                },
                {
                    albumId: 85511857,
                    albumTitle: "謫仙",
                    artistsName: "伊格賽聽/葉里",
                    cover:
                        "https://p1.music.126.net/X-ZQ6wkyaL9cJTiyxmDhuw==/109951164680974796.jpg",
                    id: 1421256202,
                    index: 4,
                    name: "謫仙",
                    url:
                        "https://music.163.com/song/media/outer/url?id=1421256202.mp3",
                },
                {
                    albumId: 35172219,
                    albumTitle: "君の名は - 黃昏之時",
                    artistsName: "Frank_Jiang",
                    cover:
                        "https://p1.music.126.net/YppJiMHyrLc7tDkj6jUttg==/109951162858188597.jpg",
                    id: 459116892,
                    index: 5,
                    name: "黃昏之時（FRANKOWO Bootleg）",
                    url:
                        "https://music.163.com/song/media/outer/url?id=459116892.mp3",
                },
                {
                    albumId: 85474719,
                    albumTitle: "等什么君翻唱合集",
                    artistsName: "等什么君",
                    cover:
                        "https://p1.music.126.net/dDF57j70YTq6isZTIqQNWg==/109951164678301220.jpg",
                    id: 1421028283,
                    index: 6,
                    name: "冬眠（翻自 司南） ",
                    url:
                        "https://music.163.com/song/media/outer/url?id=1421028283.mp3",
                },
                {
                    albumId: 93162249,
                    albumTitle: "STRAY SHEEP",
                    artistsName: "米津玄師",
                    cover:
                        "https://p1.music.126.net/6mhlWCOOQkT0xDjjuCLW7g==/109951165181187586.jpg",
                    id: 1466598056,
                    index: 7,
                    name: "Lemon",
                    url:
                        "https://music.163.com/song/media/outer/url?id=1466598056.mp3",
                },
            ],
            currentTime: "00:00",
            audioDuration: 0,
            audioPercent: 0,
            thumbTranslateX: 0, // 進度條滑塊位置
            activeClass: ".swiper-contain",
            lyricInfo: [],
            lyricIndex: 0,
            startX: 0, //拖動開始前的X
            finalX: 0, //拖動結(jié)束X的位移距離
            startXFirst: true,
            top: 0,
            color: "#fff", //文案默認顏色
            colorLight: "#40ce8f", //文案高亮色
            fontSize: "0.18rem", //文案字體大小
            lineHeight: "0.6", //每段行高
            paddingTop: "4.2rem", //高亮文案部分居中
        };
    },
    components: {
        LScroll,
    },
    computed: {
        lyricMiniTop() {
            return `transform :translate3d(0, ${
                (0 - 1) * (this.lyricIndex - this.top)
            }rem, 0);color: ${this.colorLight}`;
        },
        audioProgressPercent() {
            return `${this.audioPercent * 100}%`;
        },
    },
    created() {},
    mounted() {
        const audio = document.getElementById("audio");
        this.init();
        this.audioInit();
        this.swiper = new Swiper(this.activeClass, {
            autoplay: false, //自動播放
            loop: false, //循環(huán)播放
        });
    },
    methods: {
        init() {
            this.songInfo = this.songList[0];
            this.GetLyric(this.songInfo.id);
        },
        //播放與暫停
        PlayMusic() {
            if (this.playing) {
                // 播放中,點擊則為暫停
                this.playing = false;
                this.$refs.rotate.style.animationPlayState = "paused";
                audio.pause();
            } else {
                // 暫停中,點擊則為播放
                this.playing = true;
                this.$refs.rotate.style.animationPlayState = "running";
                audio.play();
            }
        },
        audioInit() {
            let that = this;
            // 音頻或視頻文件已經(jīng)就緒可以開始
            audio.addEventListener("canplay", () => {
                console.log("canplay");
                that.audioDuration = that.TimeToString(audio.duration);
                let buffered = audio.buffered.end(0)
            });
            let progressL = this.$refs.track.offsetWidth; // 進度條總長
            audio.addEventListener("timeupdate", () => {
                // 當前播放時間
                let compareTime = audio.currentTime;
                let buffered = audio.buffered.end(0)
                for (let i = 0; i < that.lyricInfo.length; i++) {
                    if (compareTime > parseInt(that.lyricInfo[i].time)) {
                        const index = that.lyricInfo[i].index;
                        if (i === parseInt(index)) {
                            that.lyricIndex = i;
                        }
                    }
                }
                that.currentTime = that.TimeToString(audio.currentTime);
                that.audioPercent =
                    audio.currentTime / audio.duration.toFixed(3);
                that.thumbTranslateX = that.audioPercent * 4;
            });
            audio.addEventListener("ended", () => {
                that.playIndex =
                    that.playIndex + 1 >= that.songList.length
                        ? 0
                        : that.playIndex + 1;
                that.songInfo = that.songList[that.playIndex];
                that.GetLyric(that.songInfo.id);
                setTimeout(() => {
                    audio.play();
                }, 100);
            });
        },
        // 上一首
        SkipBack() {
            this.playIndex = this.playIndex - 1 >= 0 ? this.playIndex - 1 : 0;
            this.songInfo = this.songList[this.playIndex];
            this.GetLyric(this.songInfo.id);
            this.playing = true;
            this.lyricIndex = 0;
            this.$refs.rotate.style.animationPlayState = "running";
            setTimeout(() => {
                audio.play();
            }, 100);
        },
        // 下一首
        SkipForward() {
            this.playIndex =
                this.playIndex + 1 >= this.songList.length
                    ? 0
                    : this.playIndex + 1;
            this.songInfo = this.songList[this.playIndex];
            this.GetLyric(this.songInfo.id);
            this.playing = true;
            this.lyricIndex = 0;
            this.$refs.rotate.style.animationPlayState = "running";
            setTimeout(() => {
                audio.play();
            }, 100);
        },
        //點擊進度條
        HandleProgressClick(event) {
            let progressL = this.$refs.track.offsetWidth; // 進度條總長
            let clickX = event.offsetX;
            let time = (clickX / progressL).toFixed(2);
            this.SetProgress(time);
        },
        SetProgress(t) {
            audio.currentTime = audio.duration * t;
        },
        TouchStart(event) {
            let progressL = this.$refs.track.offsetWidth ; // 進度條總長
            let allL = this.$refs.MainRef.offsetWidth ; // 進度條總長
            let half = (allL-progressL)/2
            //記錄開始的X軸坐標
            if (this.startXFirst) {
                this.startX = half;
                this.startXFirst = false;
            }
        },
        TouchMove(event) {
            let moveX = parseInt(
                (event.changedTouches[0].clientX - this.startX)
            );
            let progressL = this.$refs.track.offsetWidth; // 進度條總長
            let percent = (moveX / progressL).toFixed(2); //拖動%比
            if(percent>1){
                percent = 1
            }
            this.audioPercent = percent; //音頻播放%
            this.thumbTranslateX = this.audioPercent * 4; //計算滑塊位移
        },
        TouchEnd(event) {
            this.finalX = parseInt(
                event.changedTouches[0].clientX - this.startX
            );
            let progressL = this.$refs.track.offsetWidth; // 進度條總長
            let time = (this.finalX / progressL).toFixed(2);
            if(time>1){
                time = 1
            }
            this.SetProgress(time);
        },
        GetLyric(id) {
            let that = this;
            axios
                .get("https://api.mtnhao.com/lyric", {
                    params: {
                        id: id,
                    },
                })
                .then(function (response) {
                    let lrc = response.data.lrc.lyric;
                    that.GetLyricList(lrc);
                });
        },
        GetLyricList(lrc) {
            let lyricsObjArr = [];
            const regNewLine = /\n/;
            const lineArr = lrc.split(regNewLine); // 每行歌詞的數(shù)組
            const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/;
            lineArr.forEach((item) => {
                if (item === "") return;
                const obj = {};
                const time = item.match(regTime);

                obj.lyric =
                    item.split("]")[1].trim() === ""
                        ? ""
                        : item.split("]")[1].trim();
                obj.time = time
                    ? this.TimeToSeconds(time[0].slice(1, time[0].length - 1))
                    : 0;
                obj.uid = Math.random().toString().slice(-6);
                if (obj.lyric === "") {
                } else {
                    lyricsObjArr.push(obj);
                }
            });
            this.lyricInfo = lyricsObjArr.map((item, index) => {
                item.index = index;
                return {
                    ...item,
                };
            });
            console.log("歌詞信息", this.lyricInfo);
        },
    },
};
</script>

歌詞組件代碼---LScroll

<template>
    <!--歌詞-->
    <div
        ref="musicLyric"
        class="music-lyric"
        :style="{ 'padding-top': paddingTop }"
    >
        <div class="music-lyric-items" :style="lyricTop">
            <template v-if="lyricsList.length > 0">
                <p
                    v-for="(item, index) in lyricsList"
                    :key="index"
                    :data-index="index"
                    ref="lyric"
                    :style="{
                        color: lyricIndex === index ? colorLight : color,
                        'font-size': fontSize,
                    }"
                >
                    {{ item.lyric }}
                </p>
            </template>
            <p style="color: #fff" v-else>文案加載失旔兄住啄糙！</p>
        </div>
    </div>
</template>

<script>
const COMPONENT_NAME = "scroll";

export default {
    name: COMPONENT_NAME,
    props: {
        // 歌詞列表
        lyricsList: {
            type: Array,
            default: () => [],
        },
        // 當前歌詞下標索引
        lyricIndex: {
            type: Number,
            default: 0,
        },
        // 歌詞默認色
        color: {
            type: String,
            default: "#fff",
        },
        // 歌詞高亮色
        colorLight: {
            type: String,
            default: "#40ce8f",
        },
        fontSize: {
            type: String,
            default: "0.16rem",
        },
        lineHeight: {
            type: String,
            default: "0.48",
        },
        paddingTop: {
            type: String,
            default: "3rem",
        },
    },
    data() {
        return {
            top: 0, // 文案居中
            //文案list示例
            lyricListDemo: [
                {
                    index: 0,
                    lyric: "作曲 : CMJ",
                    time: 0,
                },
                {
                    index: 1,
                    lyric: "作詞 : 桃玖",
                    time: 0.29,
                },
                {
                    index: 2,
                    lyric: "你聽啊秋末的落葉",
                    time: 0.89,
                },
                {
                    index: 3,
                    lyric: "你聽它嘆息著離別",
                    time: 5.14,
                },
                {
                    index: 4,
                    lyric: "只剩我獨自領略",
                    time: 9.39,
                },
                {
                    index: 5,
                    lyric: "海與山 風和月",
                    time: 13.14,
                },
            ],
        };
    },
    mounted() {},
    watch: {
        lyricIndex(newVal, oldVal) {
            console.log(newVal, oldVal);
        },
    },
    computed: {
        lyricTop() {
            return `transform :translate3d(0, ${
                (0 - this.lineHeight) * (this.lyricIndex - this.top)
            }rem, 0);color: ${this.color};line-height: ${this.lineHeight}rem`;
        },
    },
    methods: {},
    watch: {},
};
</script>
<style lang="less" scoped>
/*歌詞部分*/
.music-lyric {
    // position: absolute;
    // top: 1.9rem;
    // right: 0;
    // bottom: 0;
    // left: 0;
    padding-top: 4.1rem;
    box-sizing: border-box;
    overflow: hidden;
    text-align: center;
    mask-image: linear-gradient(
        to bottom,
        rgba(255, 255, 255, 0) 0,
        rgba(255, 255, 255, 0.6) 15%,
        rgba(255, 255, 255, 1) 25%,
        rgba(255, 255, 255, 1) 75%,
        rgba(255, 255, 255, 0.6) 85%,
        rgba(255, 255, 255, 0) 100%
    );
    .music-lyric-items {
        text-align: center;
        font-size: 0.16rem;
        color: #fff;
        transform: translate3d(0, 0, 0);
        transition: transform 0.6s ease-out;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        .on {
            color: #40ce8f;
        }
    }
}
</style>