天籁之音（学习月儿日历对应歌曲效果）
<style>#mydiv { margin: 100px 0 0 calc(50% - 681px); width: 1200px; height: 675px; border: 4px solid rgba(0,0,0,.15); border-radius: 10px; background: gray url('https://pic.imgdb.cn/item/660ff03368eb935713015034.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: 80px;top: 88px; font: bold 2.1em/2.2em sans-serif; color: #BA55D3; text-shadow: 1px 1px #999;screen;opacity: .65; z-index: 4; }
#rili { padding: 6px; right: 190px;bottom: 60px; 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; width: 200px; height: 200px; opacity: .62; cursor: pointer;right: 480px;bottom: 40px;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: #FFFF00; }
.hy { position: relative; --w: 400px; border: 0px solid; left:320px; top:10px; width: var(--w); overflow: hidden;}
.hy div { word-break: keep-all; white-space: nowrap; font-family: '楷体','微软雅黑'; font-size: 32px; color: #1535B8; animation: hy1 52s linear infinite; opacity: .65; }
@keyframes hy1 { from { transform: translateX(100%); } to { transform: translateX(calc(-340% - var(--w))); }}
#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/15653652/01/67/72/63db19167a0c0_10s_big.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/658aed8ac458853aef791877.png" alt="" />
<div class="hy"><div>Enya(恩雅)是爱尔兰著名独立音乐家。她的声音空灵唯美，恍若梦境，为我们洗去尘世的浮躁。优美而深邃的歌声，神秘圣洁，给人以无限的遐想。</div></div>
</div>
<script>
/* 音乐数组：总数不低于31个，来源于网易云音乐，或URL同一个网站前缀 + 不同后缀（需修改 playSong 函数）*/
let songs = [
["Fairytale ","2530654"],
["Amid the Falling Snow","2530156"],
["Portrait ","1479681851"],
["China Roses ","2530090"],
["Only Time ","29470947"],
["May It Be ","2530077"],
["Exile ","2530178"],
["I Want Tomorrow ","25879023"],
["Orinoco Flow ","1436395884"],
["Tea-House Moon ","2530209"],
["One By One ","2530133"],
["Amarantine ","2530135"],
["s Fagaim No Bhaile ","2530532"],
["Silent Night ","2530529"],
["Flora Secret ","2530218"],
["The Sun in the Stream","2530651"],
["Book Of Days ","2530085"],
["Flora Secret ","2530145"],
["Lift Thine Eyes ","29718564"],
["Caribbean Blue ","2530083"],
["The Frog Prince ","2530315"],
["Echoes in Rain ","1357946808"],
["Merry Christmas ","2530154"],
["Adeste Fideles ","2530152"],
["To Go Beyond ","2530653"],
["Only If ","2530087"],
["So I Could Find My Way","1357947155"],
["Long Long Journey ","2530131"],
["s Fagaim No Bhaile ","2530532"],
["Caribbean Blue ","2530083"],
["How Can I Keep Singing","2530151"] ];
/* 画日历并播放今天曲目 */
(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, sName = songs;
output += `<div class="tbox" title="${sName}" onclick="playSong(${sUrl},'${sName}');this.style.color='#BA55D3';">${idx}</div>`;
}else{
output += '<div class="tbox"></div>';
}
});
rili.innerHTML = output;
rili.dataset.bg = `${y}年${m+1}月`;
let songName = songs, songUrl = songs;
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> 带着原来的旧电脑外出的，发现里面有个恩雅的半成品图图，忘记当时想做什么的。
想起月儿的《有歌的日子》，倒是可以用来也学习一个了。谢谢月儿@南无月{:4_187:} 月儿说也是黑黑的代码，谢谢黑黑，可以让我们去做所有喜欢的音乐@马黑黑 {:4_187:} 本帖最后由 起个网名好难 于 2024-4-6 09:50 编辑
https://img.soogif.com/olrt53z1tMMdY6VqE2K7nSCkMRVWeFe0.gif
真棒！我从1日至30日全点了，每天都有曲。高！实在是高！！ 起个网名好难 发表于 2024-4-6 09:49
谢谢难难鼓励{:4_187:} 梦油 发表于 2024-4-6 09:50
真棒！我从1日至30日全点了，每天都有曲。高！实在是高！！
是套用的代码做的呢{:4_173:} 红影 发表于 2024-4-6 10:41
是套用的代码做的呢
你的作品也在不断的升级啊。 要是做成电子日历，挂在家里，每天都有不同音乐，该是多好。 问好！{:4_191:}{:4_178:} 欣赏美女领导好制作{:4_199:} 美女领导真厉害哦{:4_178:} 欣赏佳作，感谢分享 天使吻过的嗓子 红影 发表于 2024-4-6 10:40
谢谢难难鼓励
除当天外其它日子点击后就不见了{:5_117:} 震憾之作，这么多经典曲子专辑，这个模板真是太合适了。。{:4_187:} 背景大气，视频动态向上飞舞的粒子看着十分梦幻。。
移动的说明文字也增加可读性。。{:4_187:} 影子出手必是经典。。整体效果绝美。。。{:4_187:} 影子收集了这么多啊，这制作厉害了 亲爱的，效果特别的惊艳{:4_199:}