学习代码音乐播放器

老谟深虑 · 发表于 2024-3-19 12:19:45

本帖最后由老谟深虑于 2024-4-6 16:42 编辑

女人如花-香耐尔

00:00 /00:00

老谟深虑 · 发表于 2024-3-19 12:22:32

<style>
#bfqbg {margin: 200px -20px;
width: 960px;
height: 120px;
background:#000 url()no-repeat 0px -200px/cover;
border-radius:2px;
position: relative;overflow: hidden;
z-index: 123;
}
#tp{position:absolute;height:106px;width:106px;bottom:8px; left:8px;}
#tp img{height: 100%;width: 100%;}
#dt{position: absolute;bottom:248px; left:0%;width: 100%;height: 120px;opacity: .4;}
#dt img{height: 600px;width: 100%;}
#mplayer {z-index: 100;position:absolute;bottom:10px; left:80px;width:28px;height:28px;}
#tmsg {position: absolute;z-index: 91;
font: normal 12px sans-serif;
color: #ffffff;
bottom:10px; right:20px}
#prog {position: absolute;z-index: 91;
width: 730px;
height: 1%;
cursor: pointer;
bottom:14px;left:120px;
color: #cccccc;
}
#bt{ width: 500px; height: 50px; color: #ffffff; position: absolute; left:120px;top:10px; font-size: 16px; font-family:仿宋;z-index: 21; }
</style>
<div id="bfqbg">
<div id="dt"><img id="Img" src="https://pic.imgdb.cn/item/64f84824661c6c8e54f9ba5c.gif" /></div>
<img id="tp" src="https://s21.ax1x.com/2024/03/19/pFRIhXq.jpg" alt="" />
<div id="bt">女人如花-香耐尔</div>
<div ><img id="mplayer" src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png" alt="" /></div>
<div id="tmsg">00:00 /00:00</div>
<div id="prog"></div>
<div class="lrc">
<ul id="ullrc">
</ul>
</div>
</div>
<audio id="aud" src="https://www.kumeiwp.com/sub/filestores/2024/03/04/3e6e07d938b991e13737ad849c58b3b7.mp3" loop autoplay></audio>
<style type="text/css">
.lrc{z-index: 20;
width: 700px;bottom:-18px; left:210px;
height: 100px;
overflow: hidden;
display: block;position: absolute;
margin: 0 auto;}
.lrc #ullrc{
width: 700px;
padding: 0;list-style: none;transition: 0.3s all ease;
margin: 0;}
/*歌词普通样式*/
.lrc #ullrc li{
height: 70px;
line-height: 60px;
font-family:仿宋;
font-size: 0px;
color: #000078;
font-weight: normal;
transition: .3s all ease;/*一定要加上不然看着突兀*/
list-style-type: none;
text-align: center;display: block;
width: 100%;
margin: 0 auto;}
/*动态歌词样式*/
.lrc #ullrc li.active{
font-size: 25px;
color: #ffffff;}
</style>
<script >
var lrc = `[00:00.00]歌曲：女人如花
[00:06.70]作词：午夜香茗
[00:12.01]作曲：音乐走廊
[00:18.98]翻唱：香耐尔
[00:24.98]同步歌词编辑：老谟深虑
[00:31.24]女人是一朵花
[00:35.61]摇曳在天涯
[00:39.19]如若你想摘下
[00:42.79]学会飞上悬崖
[00:46.45]女人是朵玫瑰
[00:50.09]娇艳欲滴下
[00:53.69]如若你想摘下
[00:57.35]请你好好待她
[01:03.20]女人是朵梅花
[01:06.51]越冷越开花
[01:10.07]如若你有一天
[01:13.75]醉倒在花下
[01:17.33]请你好好珍藏
[01:20.98]别让散落天涯
[01:25.79]女人花她摇曳红尘中
[01:32.80]女人花等有心人采她
[01:39.99]若是你闻到了花香浓
[01:47.39]就多情的把她带回家
[01:56.77]歌曲：女人如花
[01:56.84]作词：午夜香茗
[02:03.90]作曲：音乐走廊
[02:14.72]翻唱：香耐尔
[02:24.71]都说红颜是沙
[02:28.27]时光难留下
[02:31.85]都说爱是如画
[02:35.48]浏览都成神话
[02:39.20]爱不够的是傻
[02:42.83]都是手中沙
[02:46.45]风一样的四季
[02:50.19]无力拯救变化
[02:55.87]女人是朵梅花
[02:59.20]越冷越开花
[03:02.79]如若你有一天
[03:06.52]醉倒在花下
[03:10.05]请你脱俗挥歌
[03:13.72]墨点如诗如画
[03:18.57]女人花她摇曳红尘中
[03:25.64]女人花等有心人采她
[03:32.97]若是你闻到了花香浓
[03:40.25]就多情的把她带回家
[03:47.69]女人花她摇曳红尘中
[03:54.50]女人花等有心人采她
[04:01.90]若是你闻到了花香浓
[04:09.20]就多情的把她带回家
[04:16.57]女人多情时
[04:19.32]如水如花
[04:25.38]***感谢聆听***
[04:29.59]支持原创！！！
[04:31.73]
未经许可,不得翻唱或使用
`;
function $(id) {return document.getElementById(id);
}//这样写以后getid方便
function getLrcArray() {
var parts = lrc.split("\n");
for (let index = 0; index < parts.length; index++) {
parts[index] = getLrcObj(parts[index]);
}
return parts;
function getLrcObj(content) {
var twoParts = content.split("]");
var time = twoParts[0].substr(1);
var timeParts = time.split(":");
var seconds = +timeParts[1];
var min = +timeParts[0];
seconds = min * 60 + seconds;
var words = twoParts[1];
return{
seconds: seconds,
words: words,
};
}
}
var lrcArray = getLrcArray();
function inputLrc() {
for (let index = 0; index < lrcArray.length; index++) {
var li = document.createElement("li");
li.innerText = lrcArray[index].words;
$("ullrc").appendChild(li);
}
}
inputLrc();
function setPosition() {
var index = getLrcIndex();
if (index == -1) {
return;
}
var lrc_li_height = 70, lrc_ul_height = 60;
var top = index * lrc_li_height + lrc_li_height / 2 - lrc_ul_height / 2;
if (top < 0) {top = 0;}$("ullrc").style.marginTop = -top + "px";
var activeLi = $("ullrc").querySelector(".active");
if(activeLi){
activeLi.classList.remove("active");}
$("ullrc").children[index].classList.add("active");
}
var turn = 0;
function getLrcIndex(){
var time = $("aud").currentTime + turn;for (var index = 0; index < lrcArray.length; index++) {
if (lrcArray[index].seconds > time) {
return index - 1;
}
}
}
$("aud").ontimeupdate = setPosition;
(function() {
var aud = document.getElementById("aud");
var img = document.getElementById("mplayer");
var image= document.getElementById("Img");
img.onclick = function() {
if (aud.paused) {
aud.play();image.play();
} else {
aud.pause();image.stop();
}
}
aud.addEventListener("play", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012325163161-5769293.png";
}, false);
aud.addEventListener("pause", function (e) {
img.src="http://image.hnol.net/c/2022-02/01/23/202202012327333961-5769293.png";
}, false);})();
/*进度条进度时间*/
prog.onclick = (e) => {
aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
}
aud.addEventListener('timeupdate', () => {
aud.addEventListener('timeupdate', () => {prog.style.background= 'linear-gra**nt(90deg, red, red, red ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';});
tmsg.innerText = toMin(aud.currentTime) + ' / ' + toMin(aud.duration);
});
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;
};
/*结束*/
</script>
<script>
if ('getContext' in document.createElement('canvas')) {
HTMLImageElement.prototype.play = function() {
if (this.storeCanvas) {
// 移除存储的canvas
this.storeCanvas.parentElement.removeChild(this.storeCanvas);
this.storeCanvas = null;
// 透明度还原
image.style.opacity = '';
}
if (this.storeUrl) {
this.src = this.storeUrl;
}
};
HTMLImageElement.prototype.stop = function() {
var canvas = document.createElement('canvas');
// 尺寸
var width = this.width, height = this.height;
if (width && height) {
// 存储之前的地址
if (!this.storeUrl) {
this.storeUrl = this.src;
}
// canvas大小
canvas.width = width;
canvas.height = height;
// 绘制图片帧（第一帧）
canvas.getContext('2d').drawImage(this, 0, 0, width, height);
// 重置当前图片
try {
this.src = canvas.toDataURL("image/gif");
} catch(e) {
// 跨域
this.removeAttribute('src');
// 载入canvas元素
canvas.style.position = 'absolute';
// 前面插入图片
this.parentElement.insertBefore(canvas, this);
// 隐藏原图
this.style.opacity = '0';
// 存储canvas
this.storeCanvas = canvas;
}
}
};
}
var image= document.getElementById("Img");
</script>

复制代码

风清 · 发表于 2024-3-19 12:58:55

谢谢老莫版主！欣赏学习您的音乐播放器，刚点开一看，这么多代码就吓退了，以后再学习吧！
中午好！

庶民 · 发表于 2024-3-19 13:30:14

太美妙了，上网就看到了。

湛蓝 · 发表于 2024-3-19 13:36:48

欣赏老师代码音画《女人花》

微尘 · 发表于 2024-3-19 14:06:46

欣赏了老友的佳作，赞一个！

老谟深虑 · 发表于 2024-3-19 14:15:24

丁香发表于 2024-3-19 12:29
谢谢老师，有空开电脑学起来。

这个好学，等待你的作品。

老谟深虑 · 发表于 2024-3-19 14:17:44

风清发表于 2024-3-19 12:58
谢谢老莫版主！欣赏学习您的音乐播放器，刚点开一看，这么多代码就吓退了，以后再学习吧！
中午好！
...

哈哈，不用害怕，只要一张图片、一个音乐地址、一个同步歌词就够了。

老谟深虑 · 发表于 2024-3-19 14:18:30

庶民发表于 2024-3-19 13:30
太美妙了，上网就看到了。

谢谢老乡支持，下午好！

老谟深虑 · 发表于 2024-3-19 14:19:15

湛蓝发表于 2024-3-19 13:36
欣赏老师代码音画《女人花》

谢谢老师的支持欣赏，下午好！

		自动登录	找回密码
密码			立即注册

学习代码音乐播放器

评分