代码拉取完成，页面将自动刷新
<!DOCTYPE html>
<html>
<head>
<!--禁用缓存-->
<meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="Expires" content="0">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<!--禁止缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"/>
<title id="dynamic-title" style="color: deepskyblue">〇°</title>
<link rel="icon" type="image/png" sizes="16x16" href="/vuepress-lingdu-v2/img/logo.png">
<!--设置允许跨域的网址-->
<!--将 <meta> 元素中的 content 设置为 * 可以允许所有网址进行跨域访问。这将覆盖浏览器默认的同源策略，并允许任何域名访问该资源。-->
<meta name="Access-Control-Allow-Origin" content="*">
</head>
<!--百度统计-->
<script>
var _hmt = _hmt || [];
(function() {
var hm = document.createElement("script");
hm.src = "1https://hm.baidu.com/hm.js?800a9c4e9d5ae1edf2054b2bc45b89dc";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
</script>
<body style="margin: 0">
<button id="fullscreen-button">全屏</button>
<!--封面-->
<div id="fengmian"></div>
<div id="container ">
<span id="yuanma">
<!-- 切换背景按钮 -->
<button class="btn" id="toggleButton" onclick="toggleIframe()">切换动态背景</button><br>
<button class="btn" id="color-picker">自定义纯色背景</button>
<label for="color-choice"></label><input type="color" id="color-choice" style="display:none;">
<a href="https://gitee.com/lingdu990130556/yinyue/blob/master/src/index.html">源码</a>
</span>
<div id="child" style="text-align: center;">
<h1 id="lingdu_bofangqi" style="width: 50px;cursor: pointer;">〇°</h1>
<!--歌曲名称-->
<span id="gequming" style="font-size: clamp(1rem, 3vw, 2rem);color: #ffef5d;"></span>
<br>
<br>
<span>
<!--列表按钮-->
<button id="music-list-button"><i class="fa fa-list" aria-hidden="true"></i></button>
<!--上一曲按钮-->
<button id="step-backward-btn" onclick="qiege(this,-1)"><i class="fas fa-step-backward"></i></button>
</span>
<span>
<!--音乐控件-->
<audio controlsList="nodownload" id="music" controls></audio>
</span>
<span>
<button id="undo-alt-btn" onclick="boFangMoShi(this)" title="单曲循环"><i
class="fas fa-undo-alt"></i></button><!--单曲循环-->
<button id="sync-alt-btn" onclick="boFangMoShi(this)" title="列表循环"><i
class="fas fa-sync-alt"></i></button><!--列表循环-->
<button id="random-btn" onclick="boFangMoShi(this)" title="随机循环"><i class="fas fa-random"></i></button>
<!--随机循环-->
<!--下一曲按钮-->
<button id="step-forward-btn" onclick="qiege(this,1)"><i class="fas fa-step-forward"></i></button>
</span>
<!--音乐列表-->
<div id="music-list-container">
<!-- 添加其他歌曲 -->
</div>
<!--歌词容器-->
<div id="lyrics-container" style="margin-top: 0; padding: 0; border: 0 solid #ccc;">
</div>
<!--歌词颜色设置-->
<label style="display: inline-block;width: 20px;height: 20px;background-color: #8be771;
border-radius: 50%;cursor: pointer;" for="colorPicker_geci" id="color_picker_geci"></label>
<input type="color" id="colorPicker_geci" style="display: none;">
<!--音谱效果-->
<div>
<canvas id="my-canvas" width="400" height="200"></canvas>
<!--音谱颜色设置-->
<span>
<span>
<label style="display: inline-block;width: 20px;height: 20px;background-color: #15a5c5;
border-radius: 50%;cursor: pointer;" for="colorPicker" id="color_picker"></label>
<input type="color" id="colorPicker" style="display: none;" value="#15a5c5">
</span>
<span>
<!--彩色-->
<label class="colorful-sector" id="colorful-sector"></label>
</span>
</span>
<div class="rotate">
<canvas id="my-canvas2" width="400" height="70"></canvas>
</div>
</div>
</div>
<!-- 备案标注 -->
<div class="footer">
<div style="width:300px;margin:0 auto; padding:20px 0; position: relative;text-align: center; color: #8b949e; font-size: 12px" data-v-99bcade8="" class="copyright">
<a target="_blank" data-v-99bcade8="" href="https://beian.miit.gov.cn/#/Integrated/index">
<p style="height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
皖ICP备2023014487号-1
</p>
</a>
<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=34010402704001" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
<img src="https://lingdu.love/vuepress-lingdu-v2/img/备案图标.png" style="float:left;" alt=""/>
<p style="float:left;height:20px;line-height:20px;margin: 0 0 0 5px; color:#939393;">
皖公网安备 34010402704001号
</p>
</a><br>
Copyright © 2023-2033 <a href="http://lingdu.love">〇°</a>
</div>
</div>
</div>
<!--背景-->
<div class="background" id="beijing">
<iframe id="beijingiframe" src="http://lingdu990130556.gitee.io/vuepress-lingdu-v2/html/huaban/index.html"></iframe>
</div>
<!--音谱颜色-->
<script>
let lingdu_yinpu_color=localStorage.getItem("lingdu_yinpu_color");
const colorPicker_yinpu = document.getElementById("colorPicker");
const color_picker = document.getElementById("color_picker");
color_picker.style.backgroundColor = lingdu_yinpu_color || "#00eaff";
colorPicker_yinpu.addEventListener("input", function() {
lingdu_yinpu_color = colorPicker_yinpu.value;
// 将用户选择的颜色存储到本地存储
localStorage.setItem("lingdu_yinpu_color", lingdu_yinpu_color);
color_picker.style.backgroundColor = lingdu_yinpu_color;
});
colorPicker_yinpu.addEventListener("click", function() {
// 在点击事件发生时触发的逻辑
lingdu_yinpu_color = colorPicker_yinpu.value || "#00eaff";
// 将用户选择的颜色存储到本地存储
localStorage.setItem("lingdu_yinpu_color", lingdu_yinpu_color);
color_picker.style.backgroundColor = lingdu_yinpu_color;
});
const colorful_sector = document.getElementById("colorful-sector");
colorful_sector.addEventListener("click", function() {
lingdu_yinpu_color = null;
localStorage.removeItem("lingdu_yinpu_color");
});
</script>
<!--歌词颜色-->
<script>
let lingdu_geci_color=localStorage.getItem("lingdu_geci_color") || "#8be771";
const colorPicker_geci = document.getElementById("colorPicker_geci");
const color_picker_geci = document.getElementById("color_picker_geci");
const lyrics_line = document.getElementsByClassName("lyrics-line")
color_picker_geci.style.backgroundColor = lingdu_geci_color;
colorPicker_geci.addEventListener("click", function() {
colorPicker_geci.value = lingdu_geci_color;
});
colorPicker_geci.addEventListener("input", function() {
lingdu_geci_color = colorPicker_geci.value;
// 将用户选择的颜色存储到本地存储
localStorage.setItem("lingdu_geci_color", lingdu_geci_color);
color_picker_geci.style.backgroundColor = lingdu_geci_color;
for (let i = 0; i < lyrics_line.length; i++) {
lyrics_line[i].style.color=lingdu_geci_color;
}
});
</script>
<!--自定义纯色背景-->
<script>
const beijingIframe = document.getElementById("beijingiframe");
const colorPicker = document.getElementById("color-picker");
const colorChoice = document.getElementById("color-choice");
document.addEventListener("DOMContentLoaded", function() {
colorPicker.addEventListener("click", function() {
colorChoice.click();
beijingIframe.style.display = "none";
});
colorChoice.addEventListener("input", function() {
// 设置本地缓存变量
localStorage.setItem('beijingIframe.style.display', beijingIframe.style.display);
const selectedColor = colorChoice.value;
document.body.style.backgroundColor = selectedColor;
// 将用户选择的颜色存储到本地存储
localStorage.setItem("selectedColor", selectedColor);
});
});
// 检查本地存储中是否有之前保存的颜色值，如果有则还原
const savedColor = localStorage.getItem("selectedColor");
if (savedColor) {
document.body.style.backgroundColor = savedColor;
colorChoice.value = savedColor;
}
</script>
<!--全屏逻辑-->
<script>
const fullscreenButton = document.getElementById('fullscreen-button');
// 检查浏览器是否支持全屏模式
if (document.fullscreenEnabled || document.webkitFullscreenEnabled ||
document.mozFullScreenEnabled || document.msFullscreenEnabled) {
fullscreenButton.style.display = 'block';
}
// 进入全屏模式
function enterFullscreen() {
const element = document.documentElement;
if (element.requestFullscreen) {
element.requestFullscreen();
} else if (element.webkitRequestFullscreen) {
element.webkitRequestFullscreen();
} else if (element.mozRequestFullScreen) {
element.mozRequestFullScreen();
} else if (element.msRequestFullscreen) {
element.msRequestFullscreen();
}
}
// 退出全屏模式
function exitFullscreen() {
if (document.exitFullscreen) {
document.exitFullscreen();
} else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
} else if (document.mozCancelFullScreen) {
document.mozCancelFullScreen();
} else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
fullscreenButton.addEventListener('click', function () {
if (document.fullscreenElement || document.webkitFullscreenElement ||
document.mozFullScreenElement || document.msFullscreenElement) {
exitFullscreen();
fullscreenButton.textContent = '全屏';
} else {
enterFullscreen();
fullscreenButton.textContent = '退出全屏';
}
});
</script>
<!--生成音乐列表 -->
<script>
const songs = [
"这个年纪 - 齐一.mp3",
"大嘴-大嘴话-遥遥领先.mp3",
"念奴娇 - 伊能静.mp3",
"罗刹海市 - 刀郎.mp3",
"让我欢喜让我忧 (Live) - 薛之谦.mp3",
"明天见 - TFBOYS.wav",
"可能 - 程响.mp3",
"桃源恋歌 - GARNiDELiA.mp3",
"一笑倾城 - 汪苏泷.mp3",
"最伟大的作品 - 周杰伦.wav",
"Mojito - 周杰伦.flac",
"不爱我就拉倒 - 周杰伦.flac",
"倒影 - 周杰伦.wav",
"粉色海洋 - 周杰伦.wav",
"还在流浪 - 周杰伦.wav",
"时间煮雨 - 郁可唯.mp3",
"青春修炼手册 - TFBOYS.mp3",
"晴天 - 周杰伦.flac",
"不能握的手（秋秋）.mp3",
"阿拉斯加海湾 - 蓝心羽.mp3",
"一生所爱 - 卢冠廷.mp3",
"花海 - 周杰伦.flac",
"当我唱起这首歌 - 小贱,星弟.mp3",
"听悲伤的情歌 - 麦小兜.mp3",
"圈住你（cover：一口甜）翻唱（淮却）.mp3",
"园游会 - 周杰伦.flac",
"普通disco.mp3",
"生日快乐(松鼠Eunice).mp3",
"走马 - 而羡人间.mp3",
"说好的幸福呢 - 周杰伦.flac",
"走马 - 陈粒.mp3",
"你不是真正的快乐 - G.E.M. 邓紫棋.aac",
"稻香 - 周杰伦.flac",
"下雪的季节 - 本兮.flac",
"安妮哟-杨安妮.mp3",
"躲避的爱 - 华语群星.m4a",
"半岛铁盒 - 周杰伦.flac",
"你在看孤独的风景 - 本兮,单小源.flac",
"毛不易 - 像我这样的人.flac",
"呓语 - 毛不易.flac",
"好久不见 - 陈奕迅.flac",
"给我一首歌的时间 - 周杰伦.flac",
"龙卷风 - 周杰伦.flac",
"爱情转移 - 陈奕迅.flac",
"迟来的情话 - 张家旺.mp3",
"卜卦 - 崔子格.mp3",
"牧马城市 - 毛不易.mp3",
"有多少爱可以重来 - 迪克牛仔.mp3",
"一荤一素 - 毛不易.mp3",
"想唱就唱 - TFBOYS.flac",
"以父之名 - 周杰伦.flac",
"我想更懂你 - 潘玮柏,苏芮.m4a",
"萤火 - TFBOYS.flac",
"In the eyes - 江映东.mp3",
"沉默是金 - 张国荣.mp3",
"饿狼传说 - 张学友.mp3",
"皇后大道东-罗大佑.mp3",
"童年 - 罗大佑.mp3",
"十一年 - 邱永传.mp3",
"思念是一种病 - 张震岳,蔡健雅.wav",
"冬天的秘密 - 周传雄.wav",
"爱的回归线 - 陈韵若,陈每文.mp3",
"测试.aac",
"月光 (Single Version)-胡彦斌.m4a",
"这次你真的走了 - 1个球.mp3",
"消愁-毛不易.mp3",
"我们能不能不分手 - 花儿乐队.mp3",
"东北民谣 - 毛不易.mp3",
"若把你 - Kirsty刘瑾睿.mp3",
"水中花 - 郁可唯.mp3",
"姑娘别哭泣-柯柯柯啊.m4a",
"陈雪凝 - 白山茶.mp3",
"你的酒馆对我打了烊-陈雪凝.mp3",
"绿色-陈雪凝.mp3",
"瓦依那&任素汐 - 大梦(Live).mp3",
];
const container = document.getElementById("music-list-container");
for (let i = 0; i < songs.length; i++) {
const button = document.createElement("button");
button.className = "music-list-button";
button.setAttribute("onclick", "qiege(this)");
button.innerHTML = songs[i];
container.appendChild(button);
container.appendChild(document.createElement("br"));
}
</script>
<script>
// 音乐资源根路径
const path = './bgm/'
// const path='http://121.40.231.205/file/bgm/'
// 获取当前页面地址
let url = window.location.href;
// 获取参数值
let parameterValue_name = getUrlParameter(url, 'name');
let parameterValue_moShi_id = getUrlParameter(url, 'moShi_id');// 单曲循环 undo-alt-btn
// 解析地址字符串获取参数值的函数
function getUrlParameter(url, parameterName) {
try {
let parameters = url.split('?')[1].split('&');
for (let i = 0; i < parameters.length; i++) {
let parameter = parameters[i].split('=');
if (parameter[0] === parameterName) {
return parameter[1] === undefined ? true : decodeURIComponent(parameter[1]);
}
}
} catch (e) {
}
}
let name = parameterValue_name || localStorage.getItem('name') || '毛不易 - 像我这样的人.flac';// 歌名
// name = name.replaceAll("+-+", " - ");// 替换空格导致的+号
name = name.replaceAll("+", " ");// 替换空格导致的+号
const gequming = document.getElementById('gequming')
gequming.textContent = name.split('.').slice(0, -1).join('.');
// 音乐
const music = document.getElementById('music');
// const music = new Audio();
music.src = path + name;
// 设置音量 // 音量缓存值
music.volume = localStorage.getItem('previousVolume') || 0.8;
// 预加载
music.preload = 'auto';
// 预读取
music.autobuffer = true;
// 加载
music.load();
// 禁止自动播放
music.autoplay = false;
// 歌词容器
let lyricsContainer = document.getElementById('lyrics-container');
// 歌词行
let lyricsLines = null;
// 歌词时间偏移量
const lyricsConfig = {
'一生所爱 - 卢冠廷.mp3': 10.2,
'你不是真正的快乐 - G.E.M. 邓紫棋.aac': 4,
'听悲伤的情歌 - 麦小兜.mp3': -1.5,
'圈住你（cover：一口甜）翻唱（淮却）.mp3': -0.5,
'下雪的季节 - 本兮.flac': -0.5,
'时间煮雨 - 郁可唯.mp3': 1,
'不能握的手（秋秋）.mp3': -0.5,
'安妮哟-杨安妮.mp3': -0.5,
'桃源恋歌 - GARNiDELiA.mp3': -0.2,
'有多少爱可以重来 - 迪克牛仔.mp3': -0.5,
'让我欢喜让我忧 (Live) - 薛之谦.mp3': -1.9,
'皇后大道东-罗大佑.mp3': -0.5,
}
geci();
// let lyricsLines = lyricsContainer.querySelectorAll('.lyrics-line');
// logo
const h1 = document.querySelector('h1');
// 音谱效果
const canvasElement = document.getElementById("my-canvas");
const canvasElement2 = document.getElementById("my-canvas2");
let activeLineIndex = null;
let timer_updateLyrics = null;
// 封面元素
let imgElement = null;
function yanshiImg(type) {
if (imgElement) {
if (type === 'add') {
imgElement.classList.add('fengmianxuanzhuan');
}
if (type === 'remove')
imgElement.classList.remove('fengmianxuanzhuan');
}
return '';
}
/*播放音乐*/
function playMusic() {
update();
music.play();
timer_updateLyrics = setInterval(updateLyrics, 500);
// 播放音乐时添加类名
h1.classList.add('rotating');
yanshiImg('add');
// 开始播放音频，并绘制音谱图
init();
}
/*暂停播放*/
function pauseMusic() {
if (timer_updateLyrics != null) {
music.pause();
clearInterval(timer_updateLyrics);
// 暂停音乐时删除类名
h1.classList.remove('rotating');
yanshiImg('remove');
// stopDrawing();
setTimeout(stopDrawing, 2000);
}
}
music.addEventListener('play', function () {
// 当视频开始播放时执行的代码
console.log('开始播放');
update();
// music.play();
timer_updateLyrics = setInterval(updateLyrics, 500);
// 播放音乐时添加类名
h1.classList.add('rotating');
yanshiImg('add');
// 开始播放音频，并绘制音谱图
init();
});
music.addEventListener('pause', function () {
// 当视频暂停时执行的代码
console.log('已暂停');
if (timer_updateLyrics != null) {
// music.pause();
clearInterval(timer_updateLyrics);
// 暂停音乐时删除类名
h1.classList.remove('rotating');
yanshiImg('remove');
// stopDrawing();
setTimeout(stopDrawing, 2000);
}
});
// 获取歌曲信息
let musicListContainer = document.getElementById('music-list-container');
// 初始隐藏列表
musicListContainer.classList.add('visible0');
musicListContainer.classList.remove('visible1');
let buttons = musicListContainer.getElementsByTagName('button');
// 存放歌曲名称
const buttonTexts = [];
for (let i = 0; i < buttons.length; i++) {
let buttonText = buttons[i].textContent;
buttonTexts.push(buttonText);
}
// 已随机过的歌曲记录
let suijijilu = buttonTexts;
// 播放模式 1单曲循环2列表循环3随机训话
let moShi = 1;
music.addEventListener('ended', function () {
// 音频播放完毕
console.log('音频播放完毕');
pauseMusic();
if (moShi === 3) {
suijiqiege();
} else if (moShi === 2) {// 顺序循环播放
shunxuqiege(1);
} else {
playMusic();// 单曲循环
}
});
/*随机切歌*/
function suijiqiege() {
// 清完后重置
if (suijijilu.length === 1) {
suijijilu = buttonTexts;
}
// 随机循环
for (let i = 0; i < suijijilu.length; i++) {
if (decodeURIComponent(music.src).includes(suijijilu[i])) {
suijijilu = suijijilu.filter(item => item !== suijijilu[i]);// 删除当前播放的
break;
}
}
let num = getRandomInt(0, suijijilu.length - 1);// 随机数
let obj = {};
obj.textContent = suijijilu[num];
qiege(obj);
}
/*顺序切歌*/
function shunxuqiege(j) {
j = j == null ? 1 : j;// 歌曲下标增减数
// 列表循环
for (let i = 0; i < buttonTexts.length; i++) {
if (decodeURIComponent(music.src).includes(buttonTexts[i])) {
let obj = {};
i = i === buttonTexts.length ? 0 : i + j;
i = i === -1 ? buttonTexts.length - 1 : i;
i = i === buttonTexts.length ? 0 : i;
obj.textContent = buttonTexts[i];
qiege(obj);
break;
}
}
}
/*获取随机数*/
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
// 播放模式按钮
const undoAltBtn = document.getElementById('undo-alt-btn');// 单曲循环
const syncAltBtn = document.getElementById('sync-alt-btn');// 列表循环
const randomBtn = document.getElementById('random-btn');// 随机循环
// 地址栏参数
if (parameterValue_moShi_id) {
const obj = {};
obj.id = parameterValue_moShi_id;
boFangMoShi(obj);
// 本地缓存值
} else if (localStorage.getItem('moShi')) {
const obj = {};
obj.id = localStorage.getItem('moShi');
boFangMoShi(obj);
}
/*播放模式*/
function boFangMoShi(d) {
switch (d.id) {
case "undo-alt-btn":
undoAltBtn.style.display = 'none';
randomBtn.style.display = 'none';
syncAltBtn.style.display = 'inline-block';
moShi = 2;
break;
case "sync-alt-btn":
syncAltBtn.style.display = 'none';
undoAltBtn.style.display = 'none';
randomBtn.style.display = 'inline-block';
moShi = 3;
break;
case "random-btn":
default:
undoAltBtn.style.display = 'inline-block';
randomBtn.style.display = 'none';
syncAltBtn.style.display = 'none';
moShi = 1;
break;
}
// 设置本地缓存变量
localStorage.setItem('moShi', d.id);
}
/*格式时间*/
function formatTime(time) {
const minutes = Math.floor(time / 60);
const seconds = Math.floor(time % 60);
return `${padZero(minutes)}:${padZero(seconds)}`;
}
/*填充0*/
function padZero(number) {
return String(number).padStart(2, '0');
}
/*更新歌词*/
function updateLyrics() {
// 当前时间
const currentTime = music.currentTime;
// 当前行
let currentLineIndex = null;
for (let i = 0; i < lyricsLines.length; i++) {
const time = parseFloat(lyricsLines[i].dataset.time);
if (currentTime >= time) {
currentLineIndex = i;
} else {
break;
}
}
if (currentLineIndex !== activeLineIndex) {
for (let i = 0; i < lyricsLines.length; i++) {
const line = lyricsLines[i];
const distanceToMove = -40 * currentLineIndex;
line.style.transition = "transform 0.5s ease-in-out"; // 添加过渡效果
line.style.transform = `translateY(${distanceToMove}px)`;
line.classList.add('active');
if (i === currentLineIndex) { // 当前行
line.classList.add('showing');
line.classList.remove('active');
line.style.transition = "font-size 0.5s ease-in-out, transform 0.5s ease-in-out"; // 添加过渡效果
line.style.transform = `translateY(${-40 * currentLineIndex}px)`;
line.style.fontSize = "30px"; // 设置目标字体大小
dongtaitiaozhengzitidaxiao(line);
setScrollingTitle(line.textContent); // 设置标题
} else if (i === activeLineIndex) {
line.classList.remove('active');
line.style.fontSize = "16px"; // 恢复默认字体大小
}
if (i !== currentLineIndex) {
line.classList.remove('showing');
line.style.fontSize = "16px"; // 恢复默认字体大小
}
}
activeLineIndex = currentLineIndex;
}
}
/**
* 动态调整字体大小
* @param lyricsDiv 目标元素
*/
function dongtaitiaozhengzitidaxiao(lyricsDiv){
const content = lyricsDiv.textContent;
// let fontSize = lyricsDiv.style.fontSize;
let fontSize = 30;
while (content.length * fontSize > lyricsDiv.offsetWidth) {
fontSize--;
lyricsDiv.style.fontSize = `${fontSize}px`;
if (fontSize <= 0) {
break;
}
}
lyricsDiv.innerHTML = content; // 恢复原始内容
}
// 获取标题元素
const titleElement = document.getElementById("dynamic-title");
/**设置新标题*/
function setNewTitle(newTitle) {
// 设置新的标题
titleElement.innerText = newTitle;
}
let setIntervalId;
// 设置新的标题并实现滚动效果
function setScrollingTitle(newTitle) {
let title = newTitle + " - "; // 添加分隔符或其他修饰符
let scrollLength = 0; // 标题滚动的位置
// 清除之前的定时器
if (setIntervalId) {
clearInterval(setIntervalId);
}
// 定时更新标题
setIntervalId = setInterval(function () {
scrollLength++; // 每次增加滚动位置
let scrolledText = title.substring(scrollLength, title.length) + title.substring(0, scrollLength);
titleElement.innerText = scrolledText; // 设置滚动后的标题
// 检查是否滚动到标题末尾，如果是则重新开始滚动
if (scrollLength === title.length) {
scrollLength = 0;
}
}, 200); // 每300毫秒滚动一次，可以根据需要调整滚动速度
}
/**更新当前播放时间和总时长的显示，以及进度条的值*/
function update() {
music.addEventListener("timeupdate", function () {
updateLyrics(this.currentTime);
});
}
//**************************************************************************************************************
let animationId = null;
let animationId2 = null;
// 创建 Web Audio API 的上下文
let audioContext = null;
let analyser = null;
let sourceNode = null;
// 在用户点击页面上的按钮时启动 AudioContext
function startAudioContext() {
if (audioContext === null) {
audioContext = new (window.AudioContext || window.webkitAudioContext)();
// 创建 analyser 对象（用于分析音频数据）
analyser = audioContext.createAnalyser();
// 将音频节点连接到 analyser 对象
sourceNode = audioContext.createMediaElementSource(music);
sourceNode.connect(analyser);
// 将 analyser 对象连接到 Web Audio API 上下文
analyser.connect(audioContext.destination);
}
}
function init() {
startAudioContext();
// 设置频率精度和时间精度
// analyser.fftSize = 4096;
// analyser.fftSize = 2048;
// analyser.fftSize = 1024;
// analyser.fftSize = 512;
// analyser.fftSize = 256;
// analyser.fftSize = 128;
// analyser.fftSize = 64;
// analyser.fftSize = 32;
// 根据页面宽度计算fftSize的值
const pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let fftSize;
let xx = 0;
if (pageWidth < 768) {
fftSize = 1024;
xx = 1.5;
} else if (pageWidth < 1280) {
fftSize = 2048;
xx = 2.5;
} else if (pageWidth < 1440) {
fftSize = 4096;
xx = 5.2;
} else {
fftSize = 4096;
xx = 5.2;
}
analyser.fftSize = fftSize;
// 获取音频数据
const bufferLength = analyser.frequencyBinCount;
const dataArray = new Uint8Array(bufferLength);
draw();
// 绘制音谱图
function draw() {
if (animationId != null) {
cancelAnimationFrame(animationId);// 先停止绘制上一帧
}
// 在下一帧继续绘制
animationId = requestAnimationFrame(draw);
// animationId2 = requestAnimationFrame(draw2);
// 获取音频数据，并绘制音谱图
analyser.getByteFrequencyData(dataArray);
let canvasCtx = canvasElement.getContext("2d");
canvasCtx.clearRect(0, 0, canvasElement.width, canvasElement.height); // 清除画布内容
canvasCtx.globalAlpha = 0.5;
canvasCtx.fillStyle = "rgba(255, 255, 255, 0)";
canvasCtx.fillRect(0, 0, canvasElement.width, canvasElement.height);
const barWidth = (canvasElement.width / bufferLength) * 2.5;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i];
canvasCtx.globalAlpha = 1;
canvasCtx.fillStyle = lingdu_yinpu_color || `hsla(${x / xx},100%,50%,0.7)`;
// canvasCtx.fillStyle = `hsl(30, 100%, 50%)`;
// canvasCtx.fillStyle = `hsla(${(barHeight)+(i/xx)-150},100%,50%)`;
// canvasCtx.fillStyle = `hsla(${x / xx},100%,50%,0.7)`;
// canvasCtx.fillStyle = `hsl(0,100%,50%)`;
canvasCtx.fillRect(x, canvasElement.height - barHeight / 2, barWidth, barHeight / 2);
x += barWidth + 1;
}
return '〇°';
}
// 绘制音谱图 [倒影]
function draw2() {
if (animationId2 != null) {
cancelAnimationFrame(animationId2);// 先停止绘制上一帧
}
// 获取音频数据，并绘制音谱图
analyser.getByteFrequencyData(dataArray);
let canvasCtx = canvasElement2.getContext("2d");
canvasCtx.clearRect(0, 0, canvasElement2.width, canvasElement2.height); // 清除画布内容
canvasCtx.fillStyle = "rgba(255,255,255,0)";
canvasCtx.fillRect(0, 0, canvasElement2.width, canvasElement2.height);
const barWidth = (canvasElement2.width / bufferLength) * 2.5;
let x = 0;
for (let i = 0; i < bufferLength; i++) {
const barHeight = dataArray[i];
canvasCtx.globalAlpha = 0.21;
canvasCtx.fillStyle = `hsla(${x / 1.5},100%,75%,1)`;
canvasCtx.fillRect(x, canvasElement2.height - barHeight / 4, barWidth, barHeight / 4);
x += barWidth + 1;
}
return '〇°';
}
try {
} catch (e) {
// 忽略错误
}
}
// 停止绘制
function stopDrawing() {
if (animationId != null && music.paused) {
cancelAnimationFrame(animationId);
cancelAnimationFrame(animationId2);
// 重置 animationId 和 animationId2
animationId = null;
animationId2 = null;
}
}
// 判断页面是否右移至窗口外的函数
function checkIfPageShifted() {
if (window.pageXOffset >= document.documentElement.clientWidth) {
stopDrawing();
}
}
// 监听滚动事件
window.addEventListener('scroll', checkIfPageShifted);
/**更新宽度*/
function updateCanvasWidth() {
let w = window.innerWidth;
canvasElement.width = w - 1;
canvasElement2.width = w - 1;
let h = window.innerHeight;
if (h > 700) {
lyricsContainer.style.height = (h - 700) + 'px';
} else {
lyricsContainer.style.height = '50px';
}
}
window.addEventListener("resize", updateCanvasWidth); // 监听窗口大小变化
updateCanvasWidth(); // 获取初始画布宽度
let musicListButton = document.getElementById('music-list-button');
musicListButton.addEventListener('click', function () {
if (musicListContainer.classList.contains('visible0')) {
musicListContainer.classList.remove('visible0');
musicListContainer.classList.add('visible1');
} else {
musicListContainer.classList.remove('visible1');
musicListContainer.classList.add('visible0');
}
});
document.addEventListener('click', function (event) {
if (!musicListButton.contains(event.target) &&
!musicListContainer.contains(event.target) &&
!document.getElementById('step-backward-btn').contains(event.target) &&
!document.getElementById('step-forward-btn').contains(event.target) &&
!document.getElementById('undo-alt-btn').contains(event.target) &&
!document.getElementById('sync-alt-btn').contains(event.target) &&
!document.getElementById('random-btn').contains(event.target)) {
// 鼠标点击了<div>之外的位置
musicListContainer.classList.add('visible0');
musicListContainer.classList.remove('visible1');
}
});
// 切换歌曲
function qiege(d, t) {
// pauseMusic();// 切歌之前先暂停播放
// stopDrawing()// 切歌之前停止绘制
if (t != null) {
if (moShi === 1 || moShi === 2) {// 单曲和顺序
shunxuqiege(t);
} else {// 随机
suijiqiege();
}
} else {
for (let i = 0; i < buttons.length; i++) {
let buttonText = buttons[i].textContent;
if (buttonText === name) {
buttons[i].classList.remove('bofang-name')
}
if (buttonText === d.textContent) {
buttons[i].classList.add('bofang-name')
}
}
name = d.textContent;//
gequming.textContent = name.split('.').slice(0, -1).join('.');
let previousVolume = music.volume; // 记录当前的音量值
music.src = path + name;
music.volume = previousVolume;// 设置音量为之前的值
geci();
playMusic();
// 设置本地缓存变量
localStorage.setItem('name', name);
localStorage.setItem('previousVolume', previousVolume);// 音量缓存值
setUrl();// 设置地址栏参数
}
}
/**
* 初始化歌词
* @returns {Promise<void>}
*/
async function geci() {
function parseLrcFromUrl(url) {
return fetch(url)
.then(response => response.text())
.then(lrc => {
const lines = lrc.split('\n');
const lyrics = [];
for (let i = 0; i < lines.length; i++) {
const line = lines[i].trim();
const match = line.match(/\[(\d+):(\d+\.\d+)](.*)/);
if (match) {
const minutes = parseInt(match[1]);
const seconds = parseFloat(match[2]);
const time = minutes * 60 + seconds + (lyricsConfig[name] || 0);
const lyricText = match[3];
const lyricElement = document.createElement('div');
lyricElement.className = 'lyrics-line';
lyricElement.setAttribute('data-time', time.toFixed(2));
lyricElement.innerText = lyricText;
// 设置颜色
lyricElement.style.color=lingdu_geci_color;
lyrics.push(lyricElement);
}
}
return lyrics;
});
}
const lrcUrl = path + '歌词/' + name.split('.').slice(0, -1).join('.') + '.lrc';
// var lyricsContainer = document.getElementById('lyrics-container');
// 清空之前生成的内容
while (lyricsContainer.firstChild) {
lyricsContainer.removeChild(lyricsContainer.firstChild);
}
parseLrcFromUrl(lrcUrl)
.then(lyrics => {
lyrics.forEach(lyric => {
lyricsContainer.appendChild(lyric);
});
lyricsLines = lyricsContainer.querySelectorAll('.lyrics-line');
// 使用 lyricsLines 进行进一步操作
})
.catch(error => {
console.error('Failed to fetch and parse LRC:', error);
});
// 设置封面
setFengmian(path + '封面/' + name.split('.').slice(0, -1).join('.') + '.png');
}
const lingdu_bofangqi = document.getElementById('lingdu_bofangqi');
lingdu_bofangqi.addEventListener('click', function () {
window.open('https://lingdu990130556.gitee.io/yinyue/', '_blank');
});
/****************************************************封面************************************************************/
// 创建 img 元素并设置样式
function setFengmian(src) {
// 获取要添加图片的 div 元素
const divElement = document.getElementById("fengmian");
// 清空之前的图片元素
clearFengmian(divElement);
// 创建 Image 对象
const img = new Image();
// 设置图片加载完成时的回调函数
img.onload = function () {
// 检查图片加载状态和尺寸是否正常
if (img.complete && img.naturalWidth !== 0 && img.naturalHeight !== 0) {
clearFengmian(divElement);
// 图片加载成功，创建 img 元素并添加到 div 中
imgElement = document.createElement("img");
imgElement.className = "center-image";
imgElement.src = img.src;
// imgElement.classList.add('fengmianxuanzhuan');
// 设置图片样式
imgElement.style.borderRadius = "50%";
// imgElement.style.width = "9.5%";
imgElement.style.height = "15%";
imgElement.style.objectFit = "cover";
imgElement.style.position = "fixed";
imgElement.style.top = "10px";
imgElement.style.left = "50px";
// 将 img 元素添加到 div 元素中
divElement.appendChild(imgElement);
}
};
// 设置图片加载失败时的回调函数
img.onerror = function () {
console.log("无法加载图片");
// 清空之前的图片元素
clearFengmian(divElement);
};
// 加载图片
img.src = src;
}
// 清空 div 元素中的所有子元素
function clearFengmian(divElement) {
while (divElement.firstChild) {
divElement.removeChild(divElement.firstChild);
}
}
// 设置封面
setFengmian(path + "封面/" + name.split(".").slice(0, -1).join(".") + ".png");
//****************************************************切换背景逻辑**************************************************************
// 背景iframe的链接
const src0='./黑.html';
const src1='https://lingdu990130556.gitee.io/vuepress-lingdu-v2/html/huaban/index.html';
const src2='https://lingdu990130556.gitee.io/vuepress-lingdu-v2/html/空间/index.html';
const src3='https://lingdu990130556.gitee.io/vuepress-lingdu-v2/html/雨.html';
const src4='https://lingdu990130556.gitee.io/vuepress-lingdu-v2/html/蜂窝特效.html';
const iframe = document.getElementById("beijingiframe"); // 获取 iframe 元素
/**
* 切换背景方法
*/
function toggleIframe() {
// 如果是隐藏则显示
if (iframe.style.display === "none") {
iframe.style.display = "block";
// 设置本地缓存变量
localStorage.setItem('beijingIframe.style.display', iframe.style.display);
} else {
let s = decodeURIComponent(iframe.src);// 中文解码
console.log(s)
iframe.src=
s===src0?src1:
s===src1?src2:
s===src2?src3:
s===src3?src4:
s===src4?src0:src1;
// 设置本地缓存变量
localStorage.setItem('beijingiframesrc', iframe.src);
}
}
iframe.src=localStorage.getItem('beijingiframesrc') || src0;
iframe.style.display = localStorage.getItem('beijingIframe.style.display') || 'block';
/****************************************************同步地址栏参数**********************************************************/
setUrl();
function setUrl(){
// 修改地址栏参数
const url = new URL(window.location);
// const encodedValue = encodeURIComponent(name); // 编码
// url.searchParams.set("name", encodedValue); // 设置参数名和值
url.searchParams.set("name", name); // 设置参数名和值
window.history.pushState(null, "", url); // 更新地址栏URL
}
</script>
</body>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手