首页 › 音画作品 › 梦驼铃 (新声版)(DJ默涵版)

亚伦影音工作室 发表于 2023-11-18 21:03

梦驼铃 (新声版)(DJ默涵版)

本帖最后由 亚伦影音工作室 于 2023-11-21 23:45 编辑 <br /><br /><style>
#papa{margin: 80px -150px ; width: 1164px; height: 640px;background: lightgreen url('https://pic.imgdb.cn/item/6444d4390d2dde57777c025a.jpg') no-repeat center/cover;box-shadow: 2px 2px 2px #000; position: relative; display: grid; place-items: center; z-index: 10000; overflow:hidden;}
#papa:hover #fullscreen { display:block ;}
#fullscreen { position: absolute; top:5%; left:80%;color:#FFffff; filter:drop-shadow( 1px 1px 1px #000000);font: normal 2em华文隶书; opacity: 1; cursor: pointer; z-index: 11}
#jzg{ width: 500px;height: 400px;position: absolute; top:5%; left:5%; z-index:1}
#btn:hover #jzg {
opacity: 0; transition: 0.3s;}

#btn{z-index: 2;
position: absolute;top:25%; left:55%;
width: 500px;
height: 500px;}
#mplayer {top:50%; left:42%;z-index: 4;
position: absolute;
width: 100px;
height: 100px;
cursor: pointer;
animation: spin 10s infinite linear;
}
@keyframes spin {0% { transform: rotate(360deg); }
}
</style>



<div id="papa">

<span id="fullscreen">全屏观赏</span>



<div type="button" id="btn"title="暂停/播放">
<img id="mplayer" src="https://pic.imgdb.cn/item/639c602fb1fccdcd36980aad.png" alt="" />
<div id="jzg"><iframe frameborder="0" height="400" marginheight="0" marginwidth="0" scrolling="no" src="https://i.mp3.wf/view.php/76e8a84d7455d5aff3f07f77faf15810.html" width="500"></iframe></div>
</div>
<div id="lrc" data-lrc="亚伦影音工作室">亚伦影音工作室</div>
</div>
<audio id="MusicPlayer" src="https://aod.cos.tx.xmcdn.com/storages/3b09-audiofreehighqps/39/34/GMCoOSYJDaaFACAAAAJzEJDF.m4a" loop autoplay></audio>
<style>
#lrc {
        --state: paused;
        --motion: cover2;
        --tt: 2s;
        --bg: linear-gradient(180deg, #880000, #880000);
        position: absolute;
        left: 50%;z-index: 5;
        transform: translate(-50%);
        top: 85%;
        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默涵版)
作词：小轩
作曲：谭健常
攀登高峰望故乡
黄沙万里长
何处传来驼铃声
声声敲心坎
盼望踏上思念路
飞纵千里山
天边归雁披彩霞
乡关在何方
风沙挥不去印在
历史的血痕
风沙挥不去苍白
海棠血泪
攀登高峰望故乡
黄沙万里长
何处传来驼铃声
声声敲心坎
盼望踏上思念路
飞纵千里山
天边归雁披彩霞
乡关在何方
黄沙吹老了岁月
吹不老我的思念
曾经多少个今夜
梦回秦关
风沙挥不去印在
历史的血痕
风沙挥不去苍白
海棠血泪
黄沙吹老了岁月
吹不老我的思念
曾经多少个今夜
梦回秦关
梦回秦关
梦回秦关

`;

/*变量 ：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 (MusicPlayer.currentTime <= lrcAr) {
                        mKey = j - 1;
                        break;
                }
        }
        if (mKey < 0) mKey = 0;
        if (mKey > lrcAr.length - 1) mKey = lrcAr.length - 1;
        let time = lrcAr - (MusicPlayer.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 = () => MusicPlayer.paused ? (lrc.style.setProperty('--state','paused'),mplayer.style.animationPlayState = 'paused') : (lrc.style.setProperty('--state','running'),mplayer.style.animationPlayState = 'running');

/*监听播放进度*/
MusicPlayer.addEventListener('timeupdate', () => {
        for (j = 0; j < lrcAr.length; j++) {
                if (MusicPlayer.currentTime >= lrcAr) {
                        cKey = j;
                        if (mKey === j) showLrc(lrcAr);
                        else continue;
                }
        }
});




MusicPlayer.addEventListener('pause', () => mState());/*监听暂停事件*/
MusicPlayer.addEventListener('play', () => mState());/*监听播放事件*/
MusicPlayer.addEventListener('seeked', () => calcKey());/*监听查询事件*/
mplayer.addEventListener('click', () => { MusicPlayer.paused ? MusicPlayer.play() : MusicPlayer.pause(); });




mplayer.style.animationPlayState = MusicPlayer.paused ? 'paused' : 'running';
MusicPlayer.addEventListener('playing', () =>mplayer.style.animationPlayState = 'running');
MusicPlayer.addEventListener('pause', () =>mplayer.style.animationPlayState = 'paused');

let lrcAr = getLrcAr(lrcStr); /*获得歌词数组*/
})();

let fs = true;
        fullscreen.onclick = () => {
                fs ? (fullscreen.innerText = '退出全屏', papa.requestFullscreen()) : (fullscreen.innerText = '全屏观赏', document.exitFullscreen());
                fs = !fs;
        };
</script>

liumang 发表于 2023-11-18 21:36

欣赏楼主的分享{:5_150:}

liumang 发表于 2023-11-19 21:47

听说是代码高手的，欢迎同一首{:5_150:}

查看完整版本: 梦驼铃 (新声版)(DJ默涵版)