论坛 › 音乐沙龙 › 七彩同步歌词播放器

亦是金 发表于 2022-9-23 08:12

七彩同步歌词播放器

本帖最后由 亦是金 于 2023-3-19 20:13 编辑 <br /><br /><div class="t_fsz">
<table cellspacing="0" cellpadding="0"><tr><td class="t_f" id="postmessage_1862377">
本帖最后由 亚伦影音工作室 于 2023-3-19 18:24 编辑 <br /><br /><style>
#papa {
        margin: 20px -310px;
        width: 1164px;
        height: 640px;
        box-shadow: 1px 1px 0px #000;
        position: relative;
background:#000080;
        display: grid;
        place-items: center;
        z-index: 1;
}
#canv {
        position: absolute;
        display: block;
       
        position: relative;
        cursor: pointer;
        z-index: 2;
}
#vid { display: none; }

#mypic {
        width: 580px;
        height: 380px;
        position: absolute;
        top: 20px;
        right: 30px;
-webkit-mask-image: radial-gradient(black 25% ,transparent 65%);
        cursor: pointer;
        z-index: 3;
        animation: rot 20s infinite alternate var(--state);
        --state: paused;
}
@keyframes rot { 0%{ transform:scale(0); }}
.wenzi { position: absolute; left: 10px; top: 30px; z-index: 4; color: pink; font: bold 30px/30px 'FangSong',serif;opacity: .8; }
</style>

<div id="papa">
        <canvas id="canv"></canvas>
        <audio id="aud" src="https://www.qqmc.com/mp3/music176729863.mp3" autoplay loop></audio>
        <video autoplay width="1200" height="750" top:0px; left:-130px;loop muted src="http://video.699pic.com/videos/77/08/15/a_6PPqEeFnxHvK1586770815.mp4" >&nbsp;</video>
        <img id="mypic" src="https://s1.ax1x.com/2022/09/07/vHRdbj.jpg" alt="" />
      <div class="wenzi">烟雨人间 (DJ沈念版) - 海来阿木</div>

<div data-lrc="亚伦影音工作室" id="lrc">亚伦影音工作室</div>

</div>
<script>
let ctx = canv.getContext('2d');
let ww = canv.width = papa.offsetWidth, hh = canv.height = papa.offsetHeight;
let loop = () => {
        ctx.drawImage(vid, 0, 0, ww, hh);
        if(!vid.paused) {
                requestAnimationFrame(loop);
                return;
        }
}
let mState = () => aud.paused ? (mypic.style.setProperty('--state', 'paused'), vid.pause()) : (mypic.style.setProperty('--state', 'running'), vid.play());
vid.addEventListener('play', loop, false);
aud.addEventListener('play', () => mState());
aud.addEventListener('pause', () => mState());
mypic.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());
</script>

<style type="text/css">#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;z-index: 3;
        left: 50%;
        transform: translate(-50%);
        top: 80%;
        font:normal 3em 华文隶书;
        color: #000078;
        white-space: pre;
        -webkit-background-clip: text;
        filter:drop-shadow(#FFFFFF 1px 0 0)drop-shadow(#FFFFFF 0 1px 0)drop-shadow(#FFFFFF -1px 0 0) drop-shadow(#FFFFFF 0 -1px0);
}
#lrc::before {
        position: absolute;
        content: attr(data-lrc);
        width: 20%;
        height: 100%;
        color: transparent;
        overflow: hidden;
        white-space: pre;
        background: var(--bg);
       
        -webkit-background-clip: text;
        animation: var(--motion) var(--tt) linear forwards;
        animation-play-state: var(--state);
}
@keyframes cover1 { from { width: 0; } to { width: 100%; } }
@keyframes cover2 { from { width: 0; } to { width: 100%; } }
</style>
<script >
(function() {
/*原始lrc歌词*/
let lrcStr = `
烟雨人间 (DJ沈念版) - 海来阿木
词：海来阿木
曲：海来阿木
编曲：曲比阿且
录音：曲比阿且
混音：张黎兵
OP：坚诚文化
（、）
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
等到天边月亮入睡
等到姑娘把口弦揉碎
等到我把心儿唱碎
等到你音信全无我就入睡
被爱的人不用流泪
幸福的人他不会晚睡
思念在月光里酒醉
煽情的眼泪好让人羞愧
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
等到天边月亮入睡
等到姑娘把口弦揉碎
等到我把心儿唱碎
等到你音信全无我就入睡
被爱的人不用流泪
幸福的人他不会晚睡
思念在月光里酒醉
煽情的眼泪好让人羞愧
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
路过人间呐
路过烟火啊
心里嘛有苦也切莫声张
你说人生呐
你说岁月啊
男儿嘛他就该志在四方啊
男儿嘛他就该志在四方啊
`;

/*变量 ：mKey - 当前歌词索引；mFlag ：调用关键帧动画索引；averAdd ：平均值补偿*/
let mKey = 0, mFlag = true, averAdd = 0.3;

/*函数 ：获取每句歌词用时，歌词用时若超过平均值则取平均值，最后一句歌词则取平均值*/
let lrcTime = (ar) => {
        let tmpAr = [];
        for(j = 0; j <ar.length - 1; j ++) {
                if(j !== ar.length - 1) tmpAr = parseFloat((ar - ar).toFixed(1));
        }
        let aver = parseInt(tmpAr.reduce((a,b) => a + b) / (tmpAr.length - 1)) + averAdd;
        tmpAr.push(aver);
        tmpAr.forEach((item,key) => {
                ar = item > aver ? aver : item;
        });
        return ar;
};

/*函数 ：从原始lrc歌词获取信息并存入 n*3 数组*/
let getLrcAr = (text) => {
        let lrcAr = [];
        let calcRule = ;
        for(x of text.split('\n')) {
                let ar = [];
                let re = /\d+[\.:]\d+([\.:]\d+)?/g;
                let geci = x.replace(re,'');
                if(geci) {
                        geci = geci.replace(/[\[\]\'\"\t,]s?/g,'');
                        let time = x.match(re);
                        if(time != null) {
                                for(y of time) {
                                        let tmp = y.match(/\d+/g);
                                        let sec = 0;
                                        for(z in tmp) sec += tmp * calcRule;
                                        ar = ;
                                        lrcAr.push(ar);
                                }
                        }
                }
        }
        lrcAr.sort((a,b)=> a - b);
        return(lrcTime(lrcAr));
};

/*函数 ：模拟显示同步歌词*/
let showLrc = (time) => {
        let name = mFlag ? 'cover1' : 'cover2';
        lrc.innerHTML = lrcAr;
        lrc.dataset.lrc = lrcAr;
        lrc.style.setProperty('--motion', name);
        lrc.style.setProperty('--tt', time + 's');
        lrc.style.setProperty('--state', 'running');
        mKey += 1;
        mFlag = !mFlag;
};

/*函数 ：处理当前歌词索引 mKey*/
let calcKey = () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (aud.currentTime - lrcAr);
        showLrc(time);
};

/*格式化时间信息*/
let toMin = (val) => {
        if (!val) return '00:00';
        val = Math.floor(val);
        let min = parseInt(val / 60),
        sec = parseFloat(val % 60);
        if (min < 10) min = '0' + min;
        if (sec < 10) sec = '0' + sec;
        return min + ':' + sec;
}

/*函数 ：关键帧动画状态切换*/
let mState = () => aud.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
aud.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (aud.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});
aud.addEventListener('pause', () => mState());/*监听暂停事件*/
aud.addEventListener('play', () => mState());/*监听播放事件*/
aud.addEventListener('seeked', () => calcKey());/*监听查询事件*/
let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();
</script>

</td></tr></table>

红影 发表于 2022-9-23 10:30

12首歌曲，这么多啊。可惜我单位网络有限制，暂时听不了。先来点赞送花{:4_187:}

马黑黑 发表于 2022-9-24 23:09

浏览器木有兼容模式了。IE已经88了，微软不要了

风中飞尘 发表于 2022-9-24 23:18

无法显示。。。？{:5_157:}

绿叶清舟 发表于 2022-9-25 19:49

地址点过去也是没有看到了

亦是金 发表于 2022-9-25 23:15

绿叶清舟 发表于 2022-9-25 19:49
地址点过去也是没有看到了

到这里看看：http://43.226.74.150/forum.php?mod=viewthread&tid=11944&extra=

绿叶清舟 发表于 2022-9-27 14:36

亦是金 发表于 2022-9-25 23:15
到这里看看：http://43.226.74.150/forum.php?mod=viewthread&tid=11944&extra=

看到了，制作高手啊

查看完整版本: 七彩同步歌词播放器