论坛 › 音乐沙龙 › 抖音热曲欣赏

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

抖音热曲欣赏

<DIV style="LEFT: -400px; WIDTH: 1400px; POSITION: relative; TOP: 150px"><IFRAME marginWidth=0 marginHeight=0 src="https://wj.zp68.com/lxx/yunhua/2022/02/13/xlaj.html" frameBorder=0 width=1400 scrolling=no height=749></IFRAME></DIV><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR><BR>

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

@马黑黑

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

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

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

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

亲爱的做成功了，好棒啊{:4_199:}

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

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

小辣椒 发表于 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 { 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 { 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 { 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 + "</a><br />";
}

mLi.innerHTML += str;

function iPlay(idx){
      playIdx = idx;
      aud.src = muAr;
      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 = ;
                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
亲爱的，晚上好，今天没有做动图，就一个简单的图图，主要想测试玩这个播放器，感觉黑黑太厉害了

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

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

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

是的，第一次遇见这么强大的高手{:4_173:}

马黑黑 发表于 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首。另外，必须记住：这个数组的结构，最后一个不能有逗号，必须 ...

黑黑~~~好了{:4_187:}

马黑黑 发表于 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首的

嗯，看到了{:4_181:}

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

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

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

查看完整版本: 抖音热曲欣赏