一曲天籁送元奇
<style>
#bigPa { position: relative; left: 100px; width: 640px; height: 478px; background:#333 url('https://pic.imgdb.cn/item/620a379c2ab3f51d91c84a26.jpg') no-repeat center/cover; box-shadow: 0 0 0 2px #111;}
#gcDiv { width: 500px; float: right; column-count:2; color: #eee; font-size: 1em; text-shadow: 1px 1px 1px #111; }
#paDiv { position: relative; left: 10px; top: 10px; width: 220px; display: flex; align-items: center; border: 1px solid olive; border-radius: 8px 0px 8px 0px; background: rgba(0,0,0,.8); box-shadow: 1px 1px 2px #000; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #eee; text-align: center; background: linear-gradient(90deg, olive, green) no-repeat; background-size: 8px 0px; cursor: pointer; }
#btn-ro { width: 20px; height: 20px; line-height: 20px; font-size: 12px; background: linear-gradient(blue, silver, red); outline:none; color: white; border-radius: 50%; text-align: center; cursor: pointer; animation: rol linear 2s infinite; }
#btn-ro:hover { opacity: 0.8; }
#btn-ro:active { opacity: 1; }
@keyframes rol { to { transform:rotate(360deg); } }
</style>
<div id="bigPa">
<div id="paDiv">
<div id="btn-ro">·</div>
<div id="jindu">
<div id="jd-go"></div>
</div>
</div>
</div>
</div>
<script language="javascript">
var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.createElement('audio');
aud.loop = true;
// 音乐地址放在下行引号内
aud.src = "http://djqcdn.djshow.cn/djs/58/28/5603ea4119f98763_l.m4a";
aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
aud.addEventListener('timeupdate', tmMsg, true);
aud.play();
function tmMsg(){ //进度条
let auT = Math.floor(aud.duration - aud.currentTime);
let auM = auT / 60;
let auMs = parseInt(auM);
if (auMs <10) auMs = "0" + auMs;
let auS = auT % 60;
let auSs = Math.round(auS);
if (auSs < 10) auSs = "0" + auSs;
jindu.innerHTML = "- " + auMs +":" + auSs;
let jd = (100*aud.currentTime)/aud.duration;
jindu.style.backgroundSize = jd+ "% 8px";
}
jindu.onclick = function(){ //进度控制
let w = offset(jindu,"left");
let x = (event.clientX - w) * aud.duration / jindu.clientWidth;
aud.currentTime = x;
}
function offset(obj,direction){//获取父级元素偏移总量
let offsetDir = "offset" + direction.toUpperCase()+direction.substring(1);
let realNum = obj;
let positionParent = obj.offsetParent;
while(positionParent != null){
realNum += positionParent;
positionParent = positionParent.offsetParent;
}
return realNum;
}
btn.onclick = function(){ // 暂停&播放
aud.paused ? (aud.play(), btn.style.animationPlayState="running") : (aud.pause(), btn.style.animationPlayState="paused");
}
</script>
没有地方上传音乐，进来的人帮忙听一下有声音没有？ 有声音，音乐很好听。画面很好看。 元闹 发表于 2022-2-14 19:14
有声音，音乐很好听。画面很好看。
哦有声音就好，谢谢闹闹{:5_109:} 元杉 发表于 2022-2-14 19:17
哦有声音就好，谢谢闹闹
偶应谢你才是，聆听你美妙的音乐，令老夫如痴如醉，美在其中，，，， 送我的，太美了，图片上还有标注，是元奇专有的{:5_116:} 原来你是杉木的杉，一直以为是衣衫的衫，还以为是个小美女{:5_117:} 一下子成哥们了，也挺好，看我们昆仑派横扫天下{:5_106:} 这个礼物很喜欢，谢谢小杉{:5_108:} 一下子成哥们了，挺出乎意料，哈哈{:5_106:} 定位、定位、定位!小尾巴亮出来了。{:4_189:} 拐了拐了{:4_170:}不带这么玩的，让崆峒派情何以堪啊 元时时 发表于 2022-2-14 19:59
拐了拐了不带这么玩的，让崆峒派情何以堪啊
拐吧，拐吧。咱本一家人，我的就是你的，你的还是你的 元首 发表于 2022-2-14 19:44
定位、定位、定位!小尾巴亮出来了。
太自负了，兄弟。 元杉 发表于 2022-2-14 20:20
拐吧，拐吧。咱本一家人，我的就是你的，你的还是你的
头像很面熟啊，象条美男鱼{:4_170:} 元奇 发表于 2022-2-14 19:44
一下子成哥们了，挺出乎意料，哈哈
今生我们有缘，
我想有个心愿，
带着哥们，看草原 元奇 发表于 2022-2-14 19:43
这个礼物很喜欢，谢谢小杉
不客气呀不客气。 元奇 发表于 2022-2-14 19:41
原来你是杉木的杉，一直以为是衣衫的衫，还以为是个小美女
本想装个小美女亲近你，唉，反串累得慌，本色出演吧，随心所欲 元奇 发表于 2022-2-14 19:39
送我的，太美了，图片上还有标注，是元奇专有的
当然辽—— 元奇 发表于 2022-2-14 19:39
送我的，太美了，图片上还有标注，是元奇专有的
现在的元奇是歌神当受此音画。