独乐乐众乐乐 - 第8页 - 音乐沙龙 - 花潮论坛

绿叶清舟 发表于 2021-12-27 21:28

绿叶清舟 发表于 2021-12-27 21:28

绿叶清舟 发表于 2022-1-18 16:51

本帖最后由绿叶清舟于 2022-1-18 16:54 编辑 <br /><br /><style type="text/css">
.mnBox {
   margin: 0 auto;
   padding: 35px;
   width: 720px;
   border: none;
   border-top: 6px inset #000;/* 顶部边框样式*/
   border-radius: 10px;
   background: #666666;
}
.ctBox {
   margin: 0;
   padding: 10px;
   background: #BBBBBB;
   min-height: 300px;
   border-radius: 10px;
   box-shadow: 1px 3px 2px 2px rgba(4,4,4,.6);
}

.ctBox p,img, h2,button { text-align:center; }

.picBtn {
      width: 40px;
   height: 40px;
   line-height: 40px;
   color: #BBBBBB;
   background: transparent;
   border: 0;
   border-radius: 25%;
   box-shadow: 2px 2px 3px 1px rgba(0,0,0,.28);
   font-size: 18px;
   text-align: center;
}

.picBtn:hover {
   cursor: pointer;
   box-shadow: 2px 3px 4px 2px rgba(0,0,0,.28);
   color: black;
}

.picBtn:active {
   transform: scale(0.98);
   box-shadow: 1px 2px 2px 0px rgba(0,0,0,.28);
   color: red;
}

</style>

<div class="mnBox">
   <div class="ctBox">
            <p><img alt="" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2Fba4be761dd8c4841c9d19ba4ad2120a15e2f1ca31c628-8J2Mx2_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1645019445&t=667b72492703650a6c001fd1eef6969b"></p>
            <h2 style="text-align:center;">咖啡-张学友</h2>
            <pre>
            作词 : 何启弘
            作曲 : 黄韵玲
            编曲 : 吴庆隆
            制作人 : 欧丁玉
            太浓了吧否则怎会苦的说不出话
            每次都一个人在自问自答
            我们的爱到底还在吗
            已经淡了吧多放些糖也很难有变化
            不如喝完这杯就各自回家
            别坐在对面欣赏我的挣扎
            一场失败的爱情像个笑话
            热得时候心乱如麻
            冷了以后看见自己够傻
            人怎么会如此容易无法自拔
            一场无味的爱情像个谎话
            甜的时候只相信它
            苦了以后每一句都可怕
            人怎么会如此难以了无牵挂
            </pre>
            <p><audioid="music" src="http://music.163.com/song/media/outer/url?id=5252251.mp3" type="audio/mpeg" hidden="true"></audio></p>
            <p><button id="picBtn" class="picBtn">▶</button></p>
            <p></p>
   </div>
</div>

<script language="javascript">

var mu = document.getElementById('music');
var btn = document.getElementById('picBtn');

btn.onclick = function(){
   mu.paused ? (mu.play(), btn.style.background="url('')") : (mu.pause(), btn.style.background="url(' ')");
}

mu.addEventListener("ended", function(){
   btn.style.background="url('')";
})

</script>

绿叶清舟 发表于 2022-2-10 22:21

绿叶清舟 发表于 2022-2-20 21:55

绿叶清舟 发表于 2022-2-20 21:55

绿叶清舟 发表于 2022-6-11 16:45

本帖最后由绿叶清舟于 2022-9-13 22:16 编辑 <br /><br /><style>
.mama {
left: -200px;
width: 1000px;
height: 700px;
background-image: linear-gradient(#ccff99, transparent), url('https://pic.imgdb.cn/item/62a415db09475431294c1603.jpg');
background-blend-mode:multiply, normal;
position: relative;
}

</style>

<div class="mama">
<div id="txtBox" style="position:absolute; LEFT: 580px; TOP: 500px; margin: auto; width: 300px; font-size: 1em;"></div>
</div>

<script language="javascript">

var txtBox = document.getElementById("txtBox");
var idx = 0;
var str = "放肆了近十天，前天晚上突然通知区内全员核酸，全楼的第一反应囤菜。第二天一早还下着大雨就看到楼群里发来的菜场场景，满满的抢菜的人，等雨停了俺想去收个场吧，到了那摊位上只剩下老三样土豆、黄瓜、西红柿了，人还是那么多转身回家，好在前天晚上小区接龙里已经下了单，对付二天还是没问题。冰箱里满满的荤菜都不敢动得囤着，可以自由购买只得现买现吃。今天做完核酸就开了大门可以自由出入，那些昨天抢菜尤其抢了不很想吃的还好吗";

setInterval(function(){
   txtBox.innerHTML = str.substring(0, idx) + "|";
   idx += 1;
   if(idx > str.length) idx = 0;
}, 200);

</script>
<audio style="width:600px; height:64px;"controls="controls" autoplay="autoplay" loop="loop" src="音乐" type="audio/mpeg" hidden="true"></audio>

绿叶清舟 发表于 2022-6-11 16:50

绿叶清舟 发表于 2022-6-15 11:11

本帖最后由绿叶清舟于 2022-6-15 11:23 编辑 <br /><br /><style>
.mama1 { position: relative; left: -202px; width: 1000px; height: 1000px; background: #ccc url('https://pic.imgdb.cn/item/62a94ee5094754312993dcde.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }
.vid1 { position: absolute; width: 1000px; height: 1000px; object-fit: cover; opacity: 1; clip-path: circle(100% at bottom) ;mix-blend-mode: screen;}

.box{
width: 200px;
height: 200px;
box-sizing: border-box;
border: 1px solid #cb6341;
position: fixed;
left: 50%;
top: 50%;
margin-top: -100px;
margin-left: -100px;
}
.box:after, .box:before{
content: "";
width: 110%;
height: 110%;
box-sizing: border-box;
border: 2px solid;
position: absolute;
top: -5%;
left: -5%;
animation: boxBorder 6s linear infinite;
}
.box:before{
animation-delay: -3s;
}

/* 布局结束 */
/* 动画开始 */

@keyframes boxBorder {
0%{
   border-color: #fff;
   clip: rect(0, 220px, 2px ,0);
}
25%{
   border-color: yellow;
   clip: rect(0, 2px, 220px ,0);
}
50%{
   border-color: blue;
   clip: rect(218px, 220px, 220px ,0);
}
75%{
   border-color: green;
   clip: rect(0, 220px, 220px ,218px);
}
100%{
   border-color: aqua;
   clip: rect(0, 220px, 2px ,0);
}
}

</style>

<div class="mama1">
<video class="vid1" src="https://img.tukuppt.com/video_show/2432605/00/01/90/5b4cd0d177954.mp4" autoplay="autoplay" loop="loop" muted="muted"></video>

<div style="position: relative; LEFT: 830px; width:200px;TOP: 810px" class="box"> <div class="icon icon1"></div> <div class="icon icon2"></div><iframe style="opacity: 0.5;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=200 height=200 src="https://music.163.com/outchain/player?type=1&id=3374069&auto=1&height=200"></iframe></div>
</div>

绿叶清舟 发表于 2022-6-15 11:23

绿叶清舟 发表于 2022-9-13 22:15

给我爱的人 - 范琳
专辑播放

<style type="text/css">
.mama33 { position: relative; left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic.imgdb.cn/item/6320739516f2c2beb1aef56e.jpg') no-repeat; box-shadow: 2px 2px 2px #444; overflow: hidden; }

#waiDiv { margin:10px; padding:8px; width:330px; background:#d1a2aa; border-radius:10px; box-shadow:2px 2px 4px #000; display:flex; flex-direction:column; position:relative; }
#audDiv { width:100%; display:flex; flex-direction:row; align-items:center; font-size:10px; position: relative; }
#add1 { margin-left: 12px; background:#dfd1d1; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#dfd1d1; color:#e2d5d5; min-height:100px; padding:10px; border:1px solid olive; font-size:14px; column-count: 2;}
#mLiDiv a { text-decoration: none; cursor:pointer; }
#mLiDiv a:hover { color:red; }
#prompt { position:absolute; left:200px; top:50px; width:00px; padding:6px 12px; background:silver; font-size:12px; display:none; box-shadow:1px 1px 1px #666; border-radius:2px; }
#prompt input { outline:none; }
#prompt input { margin:4px;padding:4px; width:300px; }
#prompt input { border-radius:4px; cursor:pointer;border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input, #audDiv input { cursor:pointer; }
#paDiv { margin: auto; 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; position: relative; }
#jindu { position: relative; width: 200px; height: 8px; line-height: 8px; font-size: 10px; color: #dfd1d1; text-align: center; background: linear-gradient(90deg, olive, #85565e) 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 class="mama33"></div>

<DIVstyle="position: relative; opacity: 0.8; LEFT: -116px; TOP: -400px">
<div id="waiDiv">
   <div id="audDiv">
            <div id="paDiv">
                     <div id="btn-ro">·</div>
                     <div id="jindu"><div id="jd-go"></div></div>
            </div>
            <input id="muted" type="checkbox">静音
            <input id="dqxh" type="radio" name="rad" checked="checked" />单曲
            <input id="lhbf" type="radio" name="rad" />轮播
            <div id="add1">+</div>
   </div>
   <div id="mLiDiv"></div>
   <div id="prompt">
   <div>添歌</div>
            <input type="text" id="mName" placeholder="歌曲名称" /><br />
            <input type="text" id="mUrl" placeholder="歌曲地址" /><br />
            <div style="text-align:center;">
                     <input id="subMe" type="button" value=" 添加 " />
                     <input id="cancelMe" type="button" value=" 算了 " />
            </div>
   </div>
</div>
</div>

<script>
//音乐数据注意最后一个结尾不要逗号但前面每一个的结尾都要有逗号
var muAr = [
   ["http://music.163.com/song/media/outer/url?id=84187.mp3","温柔的倾诉"],
   ["http://music.163.com/song/media/outer/url?id=84193.mp3","可爱的家"],
   ["http://music.163.com/song/media/outer/url?id=84175.mp3","奔放的旋律"],
   ["http://music.163.com/song/media/outer/url?id=84181.mp3","海滨之歌"],
   ["http://music.163.com/song/media/outer/url?id=84173.mp3","月亮河"],
   ["http://music.163.com/song/media/outer/url?id=84196.mp3","罗密欧与朱丽叶"],
   ["http://music.163.com/song/media/outer/url?id=84190.mp3","试着回忆"],
   ["http://music.163.com/song/media/outer/url?id=84171.mp3","给我爱的人"],
   ["http://music.163.com/song/media/outer/url?id=84184.mp3","柔情"],
   ["http://music.163.com/song/media/outer/url?id=84199.mp3","往日情怀"],
];

var btn = document.getElementById('btn-ro');
var jindu = document.getElementById('jindu');
var aud = document.getElementById('myPlayer');
var mLi = document.getElementById('mLiDiv');
var mAdd = document.getElementById('add1');
var prom = document.getElementById('prompt');
var cancelMe = document.getElementById('cancelMe');
var subMe = document.getElementById('subMe');
var dqxh = document.getElementById('dqxh');
var lhbf = document.getElementById('lhbf');
var aud = document.createElement('audio');
aud.loop = true;
var playIdx = 0; //当前播放索引
if(aud.paused) btn.style.animationPlayState="paused";
//写歌单
var str = "";
for(j=0; j<muAr.length; j++) {
   str += (j+1) + ".<a id='list" + j + "' onclick='iPlay(" + j + ")' >" + muAr + "</a><br />";
}
mLi.innerHTML += str;

function iPlay(idx){ //播放函数
   playIdx = idx;
   aud.src = muAr;
   aud.play();
   aud.addEventListener('timeupdate', tmMsg, true);
   aud.addEventListener('ended', function() { btn.style.animationPlayState="paused"; }, true);
   btn.style.animationPlayState="running";
   nameRed(playIdx);
}

function howplay(){ //单曲&轮播处理
   dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
   prom.style.display = "none";
}

function playNext(){ //处理下一首
   if(aud.paused) iPlay(playIdx);
   playIdx += 1;
   if(playIdx >= muAr.length) playIdx = 0;
}

function nameRed(){ //歌单着色
   for(k=0;k<muAr.length;k++){
            let listId = "list" + k;
            document.getElementById(listId).style.removeProperty("color");
   }
   listId = "list" + playIdx;
   document.getElementById(listId).style.color = "red";
}

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;
   let jd = (100*aud.currentTime)/aud.duration;
   if(jd>0) {
            jindu.innerHTML = "- " + auMs +":" + auSs;
            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");
}

mAdd.onclick = function(){ prom.style.display = "block"; } //呼出加歌界面
cancelMe.onclick = function(){ prom.style.display = "none"; } //放弃加歌

subMe.onclick = function(){ //加歌并播放新歌
   let uri = document.getElementById('mUrl');
   let name = document.getElementById('mName');
   let tnum = muAr.length;
   let str1 = uri.value.trim();
   let str2 = name.value.trim();
   if(str1 !="" && str2 != ""){
            muAr = ;
            mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
            iPlay(tnum);
            uri.value = "";
            name.value = "";
   }
   prom.style.display = "none";
}
//自动播放（默认播放第一首）
iPlay(playIdx);
</script>

绿叶清舟 发表于 2022-9-24 20:06

火烧云

<style>

.outer { left: -250px; width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/632aff5716f2c2beb128db1a.jpg') no-repeat; overflow: hidden; position: relative; }
.sky { position: absolute; width: inherit; height: 270px; background: url('https://pic.imgdb.cn/item/632aff8b16f2c2beb1291536.png'); animation: cloud_fly 40s linear infinite; }
.outer meter { position: absolute; width: 100px; left: 50px; bottom: 60px; transform: rotate(-90deg); cursor: pointer; }
.btn { position: absolute; left: 60px; bottom: 110px; width: 80px; height: 10px; background: #ffff7e; border-radius: 0 100%;cursor: pointer; animation: btn_rot 1s linear infinite; }
.btn::before { position: absolute; content: ''; left: calc(50% - 5px); top: calc(50% - 40px); width: 10px; height: 80px; background: #ffff7e; border-radius: 0 100%; }
@keyframes cloud_fly { from { background-position: 0 0; } to { background-position: -799px 0; } }
@keyframes btn_rot { to { transform: rotate(1turn); } }
</style>

<div class="outer">
   <div class="sky"></div>
   <meter id="meter" min="0" max="100" low="33" high="66" optimum="80" value="0"></meter>
   <div class="btn"></div>
</div>
<audio id="aud" src="http://music.163.com/song/media/outer/url?id=5253684.mp3" autoplay="autoplay" loop="loop"></audio>

<script>

let meter = document.querySelector('#meter'), aud = document.querySelector('#aud'), btn = document.querySelector('.btn');

aud.addEventListener('timeupdate', () => {
   meter.value = aud.currentTime / aud.duration * 100;
});

btn.onclick = meter.onclick = () => aud.paused ? (aud.play(), btn.style.animationPlayState = 'running') : (aud.pause(), btn.style.animationPlayState = 'paused');

</script>

绿叶清舟 发表于 2022-9-24 20:29

不忘初心 - 韩磊,谭维维

<style>
   #papa { left: -250px; width: 1100px; height: 700px; background: url('https://pic.imgdb.cn/item/632ef36b16f2c2beb124a043.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; box-shadow: 3px 3px 20px #000; overflow: hidden; position: relative; z-index: 1; }
   #mplayer { position: absolute; left: 10px; bottom: 10px; }
   #btnwrap { fill: snow; cursor: pointer; }
   #btnwrap:hover { fill: lightgreen; }
   #tmsg { fill: snow; stroke: gray; stroke-width: 1px; font: bold 1em sans-serif; }
   #lrc { position: absolute; left: 140px; bottom: 50px; font: bold 2.4em sans-serif; color: transparent; background: linear-gradient(-90deg, snow, transparent) 0 0 / 200% 200%; filter: drop-shadow(2px 2px 4px #666); background-clip: text; -webkit-background-clip: text; text-stroke: 1px lightgreen; -webkit-text-stroke: 1px white; }
   #heart { position: absolute; background: hsl(0,100%,30%); left: 494px; top: 248px; height: 55px; width: 55px; transform: rotate(-60deg); animation: beat 0.8s infinite; }
   #heart::before { position: absolute; content: ''; background: inherit; width: 100%; height: 100%; border-radius: 50%; top: -25px; }
   #heart::after { position: absolute; content: ''; background: inherit; width: 100%; height: 100%; border-radius: 50%; left: 25px; }
   #face { position: absolute; left: 344px; top: 135px; width: 16px; height: 10px; background: #aaa; border-radius: 50%; }
   #face::before { position: absolute; content: ''; width: 100px; height: 40px; left: -40px; top: -50px; background: #1b1b1b; opacity: .8; animation: opa 4s linear infinite alternate;}
   @keyframes bgMove1 { to { background-position: -100% 0; } }
   @keyframes bgMove2 { to { background-position: -100% 0; } }
   @keyframes beat { to { transform: scale(1.05) rotate(-55deg); } }
   @keyframes opa { to { opacity: 0; } }
</style>

<div id="papa">

   <span id="heart"></span>

</div>

<audio class="aud" src="http://music.163.com/song/media/outer/url?id=1840418933.mp3" autoplay="autoplay" loop="loop"></audio>

绿叶清舟 发表于 2022-9-29 19:19

天禅 - 巫娜

<style>
#papa { left: -250px; width: 1100px; height: 700px; background: gray url('https://pic1.imgdb.cn/item/63355f1e16f2c2beb14d898f.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; overflow: hidden; user-select: none; position: relative; }
#box{ position: absolute;

width: 475px;
height: 376px;
box-sizing: content-box;
border: 0px
left: 50%;
top: 50%;
top: 213px;
left: 301px;
}

.ball { position: absolute; left: -0px; top: 0px; width: 12px; height: 12px; border-radius: 50%; background: #749ab1; animation: move 20s var(--ss) linear infinite; }
@keyframes move {
   0%, 100% { left: 0; top: 0; }
   25% { left: calc(100% - 10px); top: 0; }
   50% { left: calc(100% - 10px); top: calc(100% - 10px); }
   75% { left: 0; top: calc(100% - 10px); }
}
</style>

<div id="papa">

   <span id="box">
            <iframe style="opacity: 0.5;position: absolute; top: 31px;left: 43px;" frameborder="no" border="0" marginwidth="0" marginheight="0" width=400 height=310 src="https://music.163.com/outchain/player?type=1&id=30210&auto=1&height=430"></iframe>
            <span id="prog"></span>

   </span>
</div>

<script>

Array.from({length: 60}).forEach((item,key) => {
   item = document.createElement('span');
   item.className = 'ball';
   item.style.cssText = `--ss: ${key * 0.5}s; background: #${Math.random().toString(16).substr(1,6)};`;
   box.appendChild(item);
});

prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
aud.addEventListener('playing', ()=> btnstate());
aud.addEventListener('pause', ()=> btnstate());

aud.addEventListener('timeupdate', () => {
   prog.style.backgroundSize = lw * aud.currentTime / aud.duration + 'px 2px';
   tmsg.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
   for(j = 0; j < lrcAr.length;j ++) {
            if(aud.currentTime >= lrcAr) lrc.innerText = lrcAr;
   }
});

let btnstate = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');

let toMin = (val)=> {
   if (!val) return '00:00';
   val = Math.floor(val);
   let min = parseInt(val / 30), sec = parseFloat(val % 30);
   if(min < 10) min = '0' + min;
   if(sec < 10) sec = '0' + sec;
   return min + ':' + sec;
}
</script>

绿叶清舟 发表于 2022-10-8 19:42

美好的一天

<style>
   #papa { left: -250px; width: 1100px; height: 700px; background: #ccc url('https://pic1.imgdb.cn/item/63380a9716f2c2beb1c4a6f6.jpg') no-repeat center/cover; box-shadow: 3px 3px 20px #000; display: grid; place-items: center; position: relative; z-index: 1; }
   #mplayer { position: absolute; bottom: 0; width: 300px; height: 80px; user-select: none; display: grid; place-items: center; cursor: pointer; }
   #mplayer:hover #btnwrap, #mplayer:hover #prog { transform: translateY(var(--yy)); }
   #mplayer:hover #btnwrap { background: linear-gradient(to top right, purple, orange); border-radius: 50%; opacity: .75; }
   #btnwrap, #prog { position: absolute; display: grid; place-items: center; transition: .5s; }
   #btnwrap { --yy: -15px; width: 40px; height: 40px; transform: rotate(45deg); border: 1px solid tan; border-radius: 6px; opacity: 0; }
   #btnplay { width: 20px; height: 20px; transform: translateX(3px); background: #eee; clip-path: polygon(0 0, 0% 100%, 100% 50%); }
   #btnpause { width: 2px; height: 20px; border-style: solid; border-width: 0px 4px; border-color: transparent #eee; display: none; }
   #prog { --yy: 20px; width: 300px; height: 16px; border-radius: 10px; background: linear-gradient(90deg, orange, purple 100%, transparent 0); border: 1px solid tan; font: normal 14px / 16px sans-serif; color: #fff; text-shadow: 1px 1px 0 #000; opacity: .8; }
   .star5 { position: absolute; background: transparent; top: -130px; left: -90px; font: normal 18px /18px sans-serif; offset-distance: 0%; offset-path: path("m418.5,540c0,0 -23,-20 -23.5,-20c0.5,0 -29.5,-10 -30.5,-11c-1,-1 -32,-14 -32.5,-14c0.5,0 -26.5,-17 -27,-17c0.5,0 -27.5,-35 -28,-35c0.5,0 -10.5,-23 -11,-23c0.5,0 5.5,-26 5,-26c0.5,0 7.5,-13 7,-13c0.5,0 9.5,-12 9,-12c0.5,0 14.5,-9 14,-9c0.5,0 22.5,-3 22,-3c0.5,0 13.5,3 13,3c0.5,0 20.5,8 20,8c0.5,0 18.5,19 18,19c0.5,0 10.5,20 10,20c0.5,0 13.5,32 13,32c0.5,0 11.5,42 11,42c0.5,0 -0.5,-53 -1,-53c0.5,0 9.5,-52 9,-52c0.5,0 9.5,-22 9,-22c0.5,0 7.5,-20 7,-20c0.5,0 18.5,-8 18,-8c0.5,0 14.5,-3 14,-3c0.5,0 15.5,-1 15,-1c0.5,0 20.5,9 20,9c0.5,0 12.5,20 12,20c0.5,0 7.5,18 7,18c0.5,0 2.5,20 2,20c0.5,0 -0.5,25 -1,25c0.5,0 -12.5,19 -13,19c0.5,0 -5.5,17 -6,17c0.5,0 -24.5,25 -25,25c0.5,0 -19.5,24 -20,24c0.5,0 -36.5,41 -36.5,41z"); text-shadow: 0 0 12px rgba(199,245,122,.75); animation: move 12s var(--ss) linear infinite; }

   @keyframes move{to{offset-distance:100%}}
</style>

<div id="papa">

   <div id="mplayer">
            <div id="btnwrap"><span id="btnplay"></span><span id="btnpause"></span></div>
            <div id="prog">00:00 | 00:00</div>
   </div>
</div>

<script>
let mKey = 0, mFlag = true, aud = new Audio();
let setColor = () => Math.random().toString(16).substr(-6);
Array.from({length: 40}).forEach((ele,key) => {
   ele = document.createElement('span');
   ele.className = 'star5';
   ele.innerText = '\u2764';
   ele.style.cssText += `--ss: ${key * 0.5}s; color: #F70938;`;
   papa.appendChild(ele);
});

aud.src = 'http://music.163.com/song/media/outer/url?id=5177963.mp3';
aud.autoplay = true;
aud.loop = true;

btnwrap.onclick = () => aud.paused ? aud.play() : aud.pause();
prog.onclick = (e) => aud.currentTime = aud.duration * e.offsetX / prog.offsetWidth;
aud.addEventListener('pause', () => mState());
aud.addEventListener('play', () => mState());
aud.addEventListener('timeupdate', () => {
   prog.style.background = 'linear-gradient(90deg, orange, purple ' + aud.currentTime / aud.duration * 100 + '%, snow 0)';
   prog.innerText = toMin(aud.currentTime) + ' | ' + toMin(aud.duration);
});
let mState = () => aud.paused ? (btnplay.style.display = 'block', btnpause.style.display = 'none') : (btnplay.style.display = 'none', btnpause.style.display = 'block');

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>

风舞红尘 发表于 2023-4-20 15:10

好久没玩论坛了，这些代码贴都忘记了。
感谢绿叶清舟分享，跟着学习下。

杨帆发表于 2024-12-20 21:24

辛苦了！丰富、优质、宝贵的资源，谢谢清舟版主精彩分享{:4_204:}

页: 1 2 3 4 5 6 7 [8]

花潮论坛's Archiver