【雨声音画】时光印记 祝：宝子们初九工作愉快！

雨声

云笛 发表于 2024-2-17 23:24
哇。你是如何做到的。求代码，这个我要学~~

是静静帖子里的代码，我复制给你哈，只需要换图换自己喜欢的歌就好！

雨声

云笛 发表于 2024-2-17 23:24
哇。你是如何做到的。求代码，这个我要学~~

<style>
#mydiv { margin: 0 0 0 calc(50% - 931px); width: 1800px; height: 900px; top:130px;border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('http://qslt.net/data/attachment/forum/202402/16/094619fqe0ggrvv0cjq68y.jpg') no-repeat center/cover; box-shadow: 4px 4px 16px rgba(0,0,0,.25); position: relative; display: grid; place-items: center;overflow: hidden; }
#mydiv::before { position: absolute; content: attr(data-title); right: 590px;bottom: 200px; font: bold 2em/2.2em sans-serif; color: LightSteelBlue; text-shadow: 1px 1px #000;screen;opacity: .62; z-index: 4; }
#rili { padding: 6px; left: 220px;top: 100px; max-width: 222px; display: flex; flex-direction: row; flex-wrap: wrap; color: #eee; box-sizing: border-box; position: absolute; }
#rili::before { position: absolute; content: attr(data-bg); width: 100%; height: 100%; color: rgba(0,0,0,.25); display: grid; place-items: center; font: bold 2em sans-serif; }
#iRed { position: absolute; color: red; transition: .5s; }
#iRed:hover { font-size: 40px; font-weight: bold; }
#myplayer { position: absolute; cursor: pointer;right: 550px;bottom: 60px;  z-index: 12; mix-blend-mode: screen;animation: rotating 5s infinite linear var(--state); }
.tbox { width: 30px; height: 26px; text-align: center; font: normal 16px/26px sans-serif; cursor: pointer; z-index: 10; }
.tbox:hover { color: pink; }
.tbox:active { color: navy; }
#vid { position: absolute;width: 100%; height: 110%; top:-180px;object-fit: cover; mix-blend-mode: screen;opacity: .62; }
@keyframes rotating { to { transform: rotate(360deg); } }

</style>

<div id="mydiv">
<video id="vid" src="https://img.tukuppt.com/video_show/2269348/00/02/01/5b4ef06f1969e.mp4" muted loop></video>
        <audio id="aud" src="https://music.163.com/song/media/outer/url?id=22651392" autoplay loop></audio>
        <div id="rili"></div>
        <img id="myplayer" src="https://pic.imgdb.cn/item/6598dd69871b83018ab160ce.gif" alt="" />
</div>

<script>

/* 音乐数组：总数不低于31个，来源于网易云音乐，或URL同一个网站前缀 + 不同后缀（需修改 playSong 函数）*/
let songs = [ ["想着你 睡不着","297590"], ["爱你一万年","29723035"], ["我的爱对你说","1325711612"], ["想着你亲爱的","28152005"], ["爱情这杯酒","491768863"], ["再回 首","1364418249"], ["等你等了那么久","1969320354"], ["唱着情歌流着泪","1969319596"], ["想你的夜","387624"], ["红尘情歌","1997530200"], ["爱你一生","29535900"], ["满眼都是你","1872125546"], ["讓我一次愛個夠","1852762110"], ["相思渡口","1977184154"], ["千年之恋","5233047"], ["因为有你","387704"], ["原來你也在這裡","1852762841"], ["我的眼里只有你","2104689283"], ["我的快乐就是想你","32531219"], ["鬼迷心窍","1918885023"], ["浓情烟雨中","1442476651"], ["漫天相思雨","410628733"], ["人生路","1474159175"], ["如歌歲月","2107572976"], ["千万次想起你","2075593038"], ["捎信给那姑娘","2036819170"], ["-姑娘你真美-","102400"], ["与你到永久","1984801762"], ["别哭我最爱的人","5231770"], ["你听你听","1998971833"], ["我亲爱的姑娘","29593919"] ];
/* 画日历并播放今天曲目 */
(function () {
        let ar = '日一二三四五六'.split('').map(c => `<div class="tbox">${c}</div>`);
        let output = ar.join('');
        let y = new Date().getFullYear(), m = new Date().getMonth();
        let days = new Date(y, m+1, 0).getDate();
        let day1st = new Date(y, m).getDay();
        let today = new Date().getDate();
        Array.from({length: days + day1st}).forEach((item,key) => {
                let idx = key < day1st ? '' : (key - day1st + 1);
                if(idx) {
                        if(idx == today) idx = `<span id="iRed">${idx}</span>`;
                        let sUrl = songs[key - day1st][1], sName = songs[key - day1st][0];
                        output += `<div class="tbox" title="${sName}" onclick="playSong(${sUrl},'${sName}');this.style.color='navy';">${idx}</div>`;
                }else{
                        output += '<div class="tbox"></div>';
                }
        });
        rili.innerHTML = output;
        rili.dataset.bg = `${y}年${m+1}月`;
        let songName = songs[today - 1][0], songUrl = songs[today - 1][1];
        playSong(songUrl,songName);
})();
/* 播放音频函数 ：相同的url前缀 + 不同的后缀id */
function playSong(id,song) {
        let url = 'https://music.163.com/song/media/outer/url?id=' + id;
        aud.src = url;
        mydiv.dataset.title = song;
};
/* 其他相关操作 */
let mState = () => aud.paused ? (mydiv.style.setProperty('--state', 'paused'), vid.pause()) : (mydiv.style.setProperty('--state','running'), vid.play());
aud.addEventListener('playing', mState, false);
aud.addEventListener('pause', mState, false);
myplayer.addEventListener('click', () => aud.paused ? aud.play() : aud.pause());

</script>
<br><br><br><br><br><br><br><br><br>

雨声

云笛 发表于 2024-2-17 23:55
今天感觉挺累的，又进来再听一首歌去睡觉了

笛妞总是很晚睡？ 不要熬夜啊，早早休息！

雨声

云笛 发表于 2024-2-17 23:56
我现在听的是17这首。好听~~

嗯嗯，每天一歌，都是情歌，哈哈

雨声

花简静 发表于 2024-2-18 11:01
这个图片的色彩和手法爱了爱了，简单的裙边，都可以做得如此有意境。。

哈哈，我说咋这么想你呢，就等你回来夸我呢

雨声

花简静 发表于 2024-2-18 11:02
排字经典十分好看。。。这个日历效果绝佳，声妞作品百看不厌。。

哈哈，这不是得到你的真传了吗？日历还能不好看？

雨声

碧海 发表于 2024-2-18 11:12
欣赏雨声带来的精美单图！

谢谢海哥的鼓励！

雨声

碧海 发表于 2024-2-18 11:12
背景质感，码字好看，人物给人想象的空间！

嗯呢，海哥说的都对

雨声

碧海 发表于 2024-2-18 11:13
好听的歌，好看的图，播放器漂亮！

播放器是俺家静妞的，我借来一用

雨声

碧海 发表于 2024-2-18 11:14
雨声玩代码进步不小，向雨声你学习！

我们应该向静妞学习，代码我都是顺了静妞的