施艾敏
<style type="text/css">
.bbox { background: #aaa; transform: rotateY(180deg); padding:10px; font-size: 1em; }
.bbox h2, p { padding: 6px; text-align:center; }
#waiDiv { margin:10px; padding:8px; width:400px; background:#696969; 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:#eee; text-align:center; width:20px; height:20px; line-height:20px; border-radius:50%; cursor:pointer; }
#add1:hover { color: red; }
#mLiDiv { margin-top: 10px; background:#eee; color:#000; 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:400px; 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:392px; }
#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: #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 style="position:relative; left:-200px; top:100px; border-radius:6px; box-shadow:3px 3px 3px 2px gray; width:1000px;background:rgba(0,0,0,0.6) url('https://www.huachaowang.com/data/attachment/forum/202107/18/201853yloklkfpq75i3m7z.jpg'); ">
<div align="center" style="border-radius:6px;width:100%;background:#177B93 url('https://www.huachaowang.com/data/attachment/forum/202107/22/181925u9wpzch8zhcupb8e.gif');">
<div align="center" style="border-radius:1px;width:95%;background:rgba(0,0,0,0.6) url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fhbimg.b0.upaiyun.com%2F742560263775fc9024bb7ab0ee9d5484db5e7b821c654-9Vnfnj_fw658&refer=http%3A%2F%2Fhbimg.b0.upaiyun.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1647868182&t=d3bf28f932dd21ae959293f26cbe72c4');">
<br>
<br>
<DIV align=center><br><IMG border=0 src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fmanhua.qpic.cn%2Fhorizontal%2F0%2F29_21_53_5d8e5746e5513a05012ea4b1a8e57831_1606658019290.png%2F0&refer=http%3A%2F%2Fmanhua.qpic.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1655385444&t=15e7684f7779504a9fa3679cb585c1e9" width=500 _height="500"><br><br><br></div>
<section data-role="outer" label="Powered by 135editor.com" style="">
<section class="_135editor" data-role="title" data-tools="135编辑器" data-id="107201">
<section style="text-align: center;margin: 10px auto;">
<section style="display:flex;justify-content: center;align-items: flex-end;"><section class="assistant" style="box-sizing:border-box;width: 75px;flex-shrink: 0;"><img class="assistant" style="box-sizing:border-box;vertical-align:inherit;width: 100%; display: block;" src="https://image2.135editor.com/cache/remote/aHR0cHM6Ly9tbWJpei5xbG9nby5jbi9tbWJpel9wbmcvSmFGdlB2dkEySjA1eXNNZVFldVh4aWNhb2xtVXRwMGhObEg4MzdENzRTYXpGM0VMWmFUVkx3WE9EZmZZaWJHeFdWcGFwTzI4eWliZGljaWFyNmdNYUllYnZpYUEvMD93eF9mbXQ9cG5n" data-ratio="0.52" data-w="113" data-width="100%"></section><section class="135brush" data-brushtype="text" style="font-size: 14px;letter-spacing: 1.5px;color: #5f7ad2;margin: 0 0 5px -30px;" hm_fix="320:609">施艾敏
</section>
</section>
</section>
</section>
<div><br><br><br><br><br><br><br><br><br><br><br><br></div>
</div>
</div>
</div>
<br><br><br><br><br><br>
<DIVstyle="position: relative; opacity: 0.5; LEFT: 100px; TOP: -230px">
<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" onclick="aud.muted = this.checked ? true : false">静音
<input id="dqxh" type="radio" name="rad" checked="checked" onclick="howplay()" />单曲
<input id="lhbf" type="radio" name="rad" onclick="howplay()" />轮播
<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=289350.mp3","传奇"],
["http://music.163.com/song/media/outer/url?id=289353.mp3","暗恋"],
["http://music.163.com/song/media/outer/url?id=289354.mp3","你是我心内的一首歌"],
["http://music.163.com/song/media/outer/url?id=5235667.mp3","我记得我爱过"],
["http://music.163.com/song/media/outer/url?id=289348.mp3","背叛"],
["http://music.163.com/song/media/outer/url?id=289351.mp3","喜欢两个人"],
["http://music.163.com/song/media/outer/url?id=289344.mp3","Forever love"],
["http://music.163.com/song/media/outer/url?id=289422.mp3","寻找幸福"],
["http://music.163.com/song/media/outer/url?id=289439.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> 暗恋的感觉肯定不错的{:4_173:} 本帖最后由 大猫咪 于 2022-5-17 22:38 编辑
歌声婉转动听，萧的旋律融合很棒！
宁静的夜，坐于窗前， 昏黄的路灯，无力地照着沉寂的深巷，有一种优雅的感伤，
一些被遗忘的时光随歌声慢慢铺成开来。。
聚了、散了，近了、远了。
{:4_204:}{:4_199:} 真好听，循环好多遍，清舟好分享！ {:4_204:}{:4_199:} 小辣椒 发表于 2022-5-17 21:33
暗恋的感觉肯定不错的
辣椒来了{:4_187:}晚上好{:4_190:} 真好听歌曲系列，这个可以选择歌曲可以拉进度的代码被清舟做在图框里了，真漂亮{:4_199:} 大猫咪 发表于 2022-5-17 22:33
歌声婉转动听，萧的旋律融合很棒！
宁静的夜，坐于窗前， 昏黄的路灯，无力地照着沉寂的深巷，有一种优雅 ...
同感 马黑黑 发表于 2022-5-17 22:56
同感
想小芳了黑黑 {:5_117:}{:4_204:}中午好{:4_191:} 大猫咪 发表于 2022-5-18 11:58
想小芳了黑黑 中午好
是老芳{:4_170:} 今天正好听学生说谁谁暗恋谁
我们笑，有人说说出来就不是暗恋了，是单恋 {:5_106:}
小辣椒 发表于 2022-5-17 21:33
暗恋的感觉肯定不错的
辣椒好，没试过不知道啊{:4_189:} 来看你 发表于 2022-5-18 15:51
今天正好听学生说谁谁暗恋谁
我们笑，有人说说出来就不是暗恋了，是单恋
暗恋不是单恋吗{:4_189:} 大猫咪 发表于 2022-5-17 22:41
真好听，循环好多遍，清舟好分享！
她的有连接的就这些了，基本都是这个专辑里的 红影 发表于 2022-5-17 22:51
真好听歌曲系列，这个可以选择歌曲可以拉进度的代码被清舟做在图框里了，真漂亮
很喜欢她的声音的 绿叶清舟 发表于 2022-5-18 20:01
她的有连接的就这些了，基本都是这个专辑里的
唱的真好听 ，编曲也非常棒！
{:4_204:} 大猫咪 发表于 2022-5-18 20:03
唱的真好听 ，编曲也非常棒！
是啊，可惜其他的都听不到了 绿叶清舟 发表于 2022-5-18 20:11
是啊，可惜其他的都听不到了
嗯嗯 过一段时间就可以了 大猫咪 发表于 2022-5-18 20:22
嗯嗯 过一段时间就可以了
有时间了得去其他地方再找找看 绿叶清舟 发表于 2022-5-18 20:24
有时间了得去其他地方再找找看
嗯嗯 慢慢找{:4_204:} 绿叶清舟 发表于 2022-5-18 20:01
很喜欢她的声音的
这个人倒是不太熟悉呢，声音倒是很好听呢。
页:
[1]
2