使用方法: (点击下载)
首先你要下载歌词, 下载地址: https://www.kugeci.com/
.
下载的歌词需要图中这样格式, 有些会出现 [00:00:000] 或 [00:00:0000]
一般就开头或结尾有几个 删除多余的就行[00:00:00]
.
其次到 网易云音乐网页版 找到对应音乐的ID,
然后把找到的 ID 复制到歌词第一行就行了
.
最后点这个选择歌词文件, 点播放就行了
代码示例:
这里需要用到layui的 layui.css 和 layui.js 文件 , 如果是用CDN地址的话, 进度条可能会有显示问题
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title id="yinyue">音乐播放</title>
<link rel="stylesheet" type="text/css" href="../layui/css/layui.css" />
<link rel="stylesheet" type="text/css" href="css/la.css" />
<script src="../layui/layui.js"></script>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.js"></script>
</head>
<body>
<!--音乐文件-->
<audio id="myAudio">
<!--如果需要改直链需要将js里的其中两行代码注释掉-->
<source class="and" src="https://music.163.com/song/media/outer/url?id=1431373779.mp3" type="audio/mpeg">
</audio>
<div class="jindu">
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 50px;">
<legend id="lyrics">歌词显示</legend>
</fieldset>
<div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo">
<div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
</div>
<div class="button">
<div class="img1" id="an1">
<img id="bofang" src="https://img1.imgtp.com/2023/05/10/PwBFIrQM.png" />
</div>
<div class="img2" id="an2">
<img id="zhantin" src="https://img1.imgtp.com/2023/05/10/apOOIzKe.png" />
</div>
<div class="img3">
<!-- 歌词上传-->
<label>
<input style="position:absolute;opacity:0;" type="file" name="file" id="file"/>
<img style="width: 60px;height: 60px;" src="https://img1.imgtp.com/2023/05/10/k8m1PO0q.png">
</label>
</div>
</div>
</div>
</body>
<script src="js/la.js"></script>
</html>
/*整体背景*/
body {
background-color: #efeeee;
}
/*歌词居中*/
#lyrics {
text-align: center;
}
/*两个按钮*/
.button {
margin: 0;
padding: 0;
height: 30vh;
display: flex;
justify-content: center;
align-items: center;
gap: 30px;
}
/*歌词和进度条*/
.jindu {
width: 500px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/*默认效果*/
.img1 {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
-18px -18px 30px rgba(255, 255, 255, 1);
transition: all .2s ease-out;
}
/*点击后效果*/
.img2 {
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
0 0 0 rgba(255, 255, 255, 0.8),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
transition: all .2s ease-out;
/*禁用点击*/
cursor: not-allowed;
pointer-events: none;
}
img {
width: 60px;
}
.jindu{
border-radius: 20px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
-18px -18px 30px rgba(255, 255, 255, 1);
}
.img3{
width: 100px;
height: 100px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 20px;
box-shadow: 18px 18px 30px rgba(0, 0, 0, 0.2),
-18px -18px 30px rgba(255, 255, 255, 1);
transition: all .2s ease-out;
}
.img3:active{
cursor: pointer;
box-shadow: 0 0 0 rgba(0, 0, 0, 0.2),
0 0 0 rgba(255, 255, 255, 0.8),
inset 18px 18px 30px rgba(0, 0, 0, 0.1),
inset -18px -18px 30px rgba(255, 255, 255, 1);
}
var audio1 = document.getElementById("myAudio");
$('.img1>img').click(function() {
gecixianshi();
zhangtai();
audio1.play();
})
$('.img2>img').click(function() {
zhangtai();
audio1.pause();
})
//点击 按下与弹起
function zhangtai() {
//按下与弹起
var an1 = "#an1";
var an2 = "#an2";
if ($('#an1').attr('class') == "img1") {
an1 = "#an2";
an2 = "#an1";
}
$(an1).attr("class", "img1");
$(an2).attr("class", "img2");
};
//歌词 获取歌词网址 https://www.kugeci.com/song/lgGQok3x
var geci = [];
function gecixianshi() {
var zhixin = setInterval(function() { //每1秒一次
var audio = document.querySelector("audio");
var zhong = audio.duration; //获取总播放时间
var jin = audio.currentTime; //获取播放进度
Time(zhong, jin);
if (zhong == jin) {
//播放完,初始化
$("#yinyue").text("音乐播放");
$("#lyrics").text("歌词显示");
$("#an1").attr("class", "img1");
$("#an2").attr("class", "img2");
//停止每秒执行
clearInterval(zhixin);
}
}, 1000);
}
function Time(zhong, jin) {
var jindutiao = formateTime(jin);
console.log("总播放时间:" + formateTime(zhong) + "进度:" + jindutiao);
var geci1 = geci[jindutiao];
console.log(geci1);
if (geci1 != undefined) {
$("#yinyue").text(geci1);
$("#lyrics").text(geci1);
// document.getElementById("yinyue").innerText = geci1;
// document.getElementById("lyrics").innerText = geci1;
}
var baifen = (jin / zhong * 100)
console.log(baifen + "%"); //控制台显示
var xianshi = baifen.toFixed(2) + "%"
layui.use('element', function() {
var $ = layui.jquery,
element = layui.element; //Tab的切换功能，切换事件监听等，需要依赖element模块
element.progress('demo', xianshi);
// element.init();
});
}
//秒转分钟 时间转换
function formateTime(time) {
const h = parseInt(time / 3600)
const minute = parseInt(time / 60 % 60)
const second = Math.ceil(time % 60)
const hours = h < 10 ? '0' + h : h
const formatSecond = second > 59 ? 59 : second
return `${hours > 0 ? `${hours}:` : ''}${minute < 10 ? '0' + minute : minute}:${formatSecond < 10 ? '0' + formatSecond : formatSecond}`
}
//上传的歌词文件获取与分割
document.getElementById('file').onchange = function() {
//如果出现播放时,点击上传更换歌词, 那就需要将按钮归位
$("#an1").attr("class", "img1");
$("#an2").attr("class", "img2");
var file = this.files[0];
var reader = new FileReader();
reader.onload = function(progressEvent) {
//分割获取的数据
var lines = this.result.split('\n');
//如果用直链, 把下面两行代码注释掉 , 当然去除之后, 歌词文件也就不能加ID了
$(".and").attr("src", "https://music.163.com/song/media/outer/url?id=" + lines[0] + ".mp3");
//音频src修改后, 如果不用下面这个,是不生效的
document.getElementById("myAudio").load();
for (var i = 1; i < lines.length; i++) {
var line = lines[i];
//时间
const regex1 = /^\[(\d{2}:\d{2})/;
const match1 = line.match(regex1);
const timestamp1 = match1[1]; // "00:24"
//歌词
const regex = /^\[\d{2}:\d{2}\.\d{2}\](.*)/;
const match = line.match(regex);
const lyrics = match[1];
//歌词放入
geci[timestamp1] = lyrics;
}
};
$("#lyrics").text("已放入歌词")
reader.readAsText(file);
};
5572
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
