抖音热曲欣赏

小辣椒 · 发表于 2022-2-13 20:30

请马上登录，朋友们都在花潮里等着你哦：）

您需要登录才可以下载或查看，没有账号？立即注册

x

小辣椒 · 发表于 2022-2-13 20:32

@马黑黑

黑黑我上传了20首歌曲，但不能出来就只能14首，看见你是16首，不晓得我怎么会进不去

小辣椒 · 发表于 2022-2-13 20:33

14首播放器可以出来了，多了播放器就歌曲不出来了

红影 · 发表于 2022-2-13 20:35

亲爱的做成功了，好棒啊

小辣椒 · 发表于 2022-2-13 20:37

黑黑，感觉你太强大了，纯css的语句制作的专辑播放器，第一次晓得可以这样玩，太厉害了

小辣椒 · 发表于 2022-2-13 20:38

红影发表于 2022-2-13 20:35
亲爱的做成功了，好棒啊

亲爱的，晚上好，今天没有做动图，就一个简单的图图，主要想测试玩这个播放器，感觉黑黑太厉害了

马黑黑 · 发表于 2022-2-13 20:44

小辣椒发表于 2022-2-13 20:32
@马黑黑

黑黑我上传了20首歌曲，但不能出来就只能14首，看见你是16首，不晓得我怎么会进不去

我需要你框架结构的代码，控制台看不到

小辣椒 · 发表于 2022-2-13 20:46

马黑黑发表于 2022-2-13 20:44
我需要你框架结构的代码，控制台看不到

好的，我发你

小辣椒 · 发表于 2022-2-13 20:47

<style type="text/css">
#waiDiv { margin:10px auto; padding:8px; width:400px; background:#b01f00; 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; }
#audDiv audio { position: relative; left: 0px; width:200px; opacity: .9; }
#audDiv div[id=add1] { margin:6px; background:#eee; text-align:center; width:30px; height:30px; line-height:30px; border-radius:50%; cursor:pointer; }
#mLiDiv { margin-top: 10px; background:#eceadd; color:#000; min-height:100px; padding:10px; border:1px solid olive; font-size:1em; column-count: 2; }
#mLiDiv a { text-decoration: none; cursor:pointer; }
#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[type=text] { margin:4px;padding:4px; width:392px; }
#prompt input[type=button] { border-radius:4px; cursor:pointer; border:1px solid gray; border-radius:3px; box-shadow: 1px 1px 2px #444; }
#audDiv input[type=radio] { cursor:pointer; }
</style>
<div id="waiDiv">
<div id="audDiv">
<audio id="myPlayer" controls="controls" loop="loop"></audio>
<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>
<script language="javascript">
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 muAr = [
["https://oss.shandianpan.com/56eeb7441bab346cc52e2e6bbb31ee38.mp3","阿果吉曲 - 海来阿木"],
["https://oss.shandianpan.com/13a48c69b71211e972e40b85a910a3dd.mp3","爱情错觉 - 半吨兄弟"],
["https://oss.shandianpan.com/c12551462ad886b1c4f78e92ad87bb19.mp3","百花香--魏新雨"],
["https://oss.shandianpan.com/bba4f5853a7412622f96d9a37f27633b.mp3","别知己 - 海来阿木等"],
["https://oss.shandianpan.com/c1195cfefaa3c0a871617cccc89c6846.mp3","潮湿的心 - 小阿枫"],
["https://oss.shandianpan.com/d01f53ca06585167784aefafbadc9cda.mp3","大田后生仔"],
["https://oss.shandianpan.com/1781184f635949f30cdce0784a23e906.mp3","红尘来去一场梦"],
["https://oss.shandianpan.com/8e2b5977ef4be91e96ef200a8a9d96f0.mp3","酒醉的蝴蝶 - 崔伟立"],
["https://oss.shandianpan.com/7aa9b82ac300407c88dbe6e33011be8e.mp3","狂浪 - 花姐"],
["https://oss.shandianpan.com/3cb16d49da1b9f7b9212d4b11f8388fa.mp3","绿色 - 陈雪凝"],
["https://oss.shandianpan.com/6a0fa7336b58b494f0140b296e1f3a7f.mp3","芒种 - 音阙诗听"],
["https://oss.shandianpan.com/03cd3ffb06a70da528e520f4387abbfd.mp3","牧马城市 - 毛不易"],
["https://oss.shandianpan.com/1c8107e3a6695e994e3a0e6e1605b5fb.mp3","你的答案 - 阿冗"],
["https://oss.shandianpan.com/0a0a863b37d59002a70df42bb44280ef.mp3","你的酒馆对我打了烊"],
["https://oss.shandianpan.com/cbc890c394aaa6ab942c1c9ff8c8e27a.mp3","谁 - 雪十郎"],
["https://oss.shandianpan.com/8e4e3ca4f056d0de93c2636244fbde14.mp3","忘情牛肉面"],
["https://oss.shandianpan.com/4fdc1085429f17b48ce5a7a48ff6811d.mp3","像我这样的人"],
["https://oss.shandianpan.com/7a41d3ce7fa452fdcaf40b3e39a4f84d.mp3","野狼disco - 宝石"],
["https://oss.shandianpan.com/d7a3124ca1ce3778d851a40153e35d89.mp3","你笑起来真好看"],
["https://oss.shandianpan.com/2709b43817e625c8809c4df91019872b.mp3","桥边姑娘 - 海伦"]
];
var playIdx = 0;
var str = "";
for(i=0;i<muAr.length; i++) {
str += (i+1) + ".<a id='list" + i + "' onclick='iPlay(" + i + ")' >" + muAr[i][1] + "</a><br />";
}
mLi.innerHTML += str;
function iPlay(idx){
playIdx = idx;
aud.src = muAr[playIdx][0];
aud.play();
nameRed(playIdx);
}
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[tnum] = [str1, str2];
mLi.innerHTML += (tnum+1) + ".<a id='list" + tnum + "' onclick='iPlay(" + tnum + ")' >" + str2 + "</a><br />";
iPlay(tnum);
uri.value = "";
name.value = "";
}
prom.style.display = "none";
}
function howplay(){
dqxh.checked ? aud.loop = true : (aud.loop = false,playNext(),aud.addEventListener('ended',playNext,false));
prom.style.display = "none";
}
function playNext(){
iPlay(playIdx);
playIdx += 1;
if(playIdx >= muAr.length) playIdx = 0;
}
function nameRed(){
for(i=0;i<muAr.length;i++){
let listId = "list" + i;
document.getElementById(listId).style.color = "black";
}
listId = "list" + playIdx;
document.getElementById(listId).style.color = "red";
}
</script>

复制代码

红影 · 发表于 2022-2-13 20:49

小辣椒发表于 2022-2-13 20:38
亲爱的，晚上好，今天没有做动图，就一个简单的图图，主要想测试玩这个播放器，感觉黑黑太厉害了

是啊，这个可以放那么多歌曲，还能自己选，甚至还能添加，好厉害的。

小辣椒 · 发表于 2022-2-13 20:51

红影发表于 2022-2-13 20:49
是啊，这个可以放那么多歌曲，还能自己选，甚至还能添加，好厉害的。

是的，第一次遇见这么强大的高手

马黑黑 · 发表于 2022-2-13 20:56

小辣椒发表于 2022-2-13 20:46
好的，我发你

歌曲数组 var muAr = [...] 不全，只有14首。另外，必须记住：这个数组的结构，最后一个不能有逗号，必须向这样：

var muAr = [
[",,,",",,,"],
[",,,",",,,"],
[",,,",",,,"],
[",,,",",,,"]
];

上面倒数第二行加入是歌曲信息的收尾行，他不能有逗号

小辣椒 · 发表于 2022-2-13 20:57

马黑黑发表于 2022-2-13 20:56
歌曲数组 var muAr = [...] 不全，只有14首。另外，必须记住：这个数组的结构，最后一个不能有逗号，必须 ...

哦，知道了，我去添加进去

马黑黑 · 发表于 2022-2-13 20:59

小辣椒发表于 2022-2-13 20:57
哦，知道了，我去添加进去

嗯，理论上，你有多少它就帮你显示多少，前提是数据语法没问题

小辣椒 · 发表于 2022-2-13 21:06

马黑黑发表于 2022-2-13 20:56
歌曲数组 var muAr = [...] 不全，只有14首。另外，必须记住：这个数组的结构，最后一个不能有逗号，必须 ...

黑黑~~~好了

马黑黑 · 发表于 2022-2-13 21:11

小辣椒发表于 2022-2-13 21:06
黑黑~~~好了

你的框架里看到20首了

马黑黑 · 发表于 2022-2-13 21:11

https://wj1.zp68.com:812/lxx/yunhua/2022/02/13/xlaj.html

小辣椒 · 发表于 2022-2-13 21:12

马黑黑发表于 2022-2-13 21:11
你的框架里看到20首了

我现在加到20首的

马黑黑 · 发表于 2022-2-13 21:13

小辣椒发表于 2022-2-13 21:12
我现在加到20首的

嗯，看到了

小辣椒 · 发表于 2022-2-13 21:16

马黑黑发表于 2022-2-13 21:13
嗯，看到了

我现在把正确的代码发上去，有兴趣的人可以一起玩

[音乐专辑] 抖音热曲欣赏

请马上登录，朋友们都在花潮里等着你哦：）

评分

浏览过的版块

花潮美女

多彩人生

星月交辉

奔放热烈

海样胸怀

春风拂面

火热情怀

优雅迷人

神秘浪漫

缤纷心情

草莓情怀

青草情怀

蝴蝶情怀

心曲飞扬

星星情怀

七彩绚丽

活泼开朗

女儿情怀

男儿情怀

鹰傲苍穹

心香一瓣

音画大师

天籁妙音

风雨同行

我心永远

喜乐安康

中秋征文

指尖上的流年

花潮管理

虎

龙

狗

猪

相遇之美

一往情深

花好月圆

紫色情节

飞龙在天

金剪刀

妙笔生花

天长地久

幸福快乐

绚丽缤纷

周年庆

舞会之星

分析（喊冤）章

总结章

杀人王

小强章

最佳杀刺

临屏写诗

七夕诗钟活动

第五届风云

第六届风云

情人节

花潮帅哥

鼠

牛

兔

蛇

马

羊

猴

鸡

王者至尊

大将风范

共看流星

侠骨柔肠

心想事成

开朗大方